import { bind } from "astal";
import AstalBattery from "gi://AstalBattery";
import AstalBluetooth from "gi://AstalBluetooth";
import AstalNetwork from "gi://AstalNetwork"
import AstalWp from "gi://AstalWp";
import Brightness from "../../util/brightness";
import { Gtk } from "astal/gtk4";
import QuickActions from "../QuickActions/QuickActions";

const STATE = AstalNetwork.DeviceState;


const QuickView = () => {
    const quickActions = QuickActions.QuickActions();


    return <button onClicked={() => quickActions.popup()} child={
        <box>
            <Audio></Audio>
            <NetworkWidget></NetworkWidget>
            { quickActions }
        </box>
    }></button>
}


const NetworkWidget = () => {
    const network = AstalNetwork.get_default();

    return <box>
        <image iconName={bind( network, 'state' ).as( state => {
            if ( state === AstalNetwork.State.CONNECTING ) {
                return 'chronometer-reset-symbolic';
            } else if ( state === AstalNetwork.State.CONNECTED_LOCAL || state === AstalNetwork.State.CONNECTED_SITE || state === AstalNetwork.State.CONNECTED_GLOBAL ) {
                print( 'Wired connected' );
                return 'network-wired-activated-symbolic';
            } else {
                print( 'Unknown state' );
                return 'paint-unknown-symbolic';
            }
        } )} cssClasses={[ 'network-widget' ]} visible={bind( network.wifi, 'state' ).as( state => state !== STATE.ACTIVATED )}></image>
        <image iconName={bind( network.wifi, 'state' ).as( state => {
            if ( state === STATE.ACTIVATED ) {
                return network.wifi.iconName
            } else {
                return '';
            }
        } )} cssClasses={[ 'network-widget' ]} visible={bind( network.wifi, 'state' ).as( state => state === STATE.ACTIVATED )}></image>
    </box>
        

}

const BluetoothWidget = () => {
    const bluetooth = AstalBluetooth.get_default();
    const enabled = bind( bluetooth, "isPowered" );
    const connected = bind( bluetooth, "isConnected" );
}


const BatteryWidget = () => {
    const battery = AstalBattery.get_default();
    if ( battery.get_is_present() ) {
        return <image iconName={battery.iconName}></image>
    } else {
        return <box></box>
    }
    // Else, no battery available -> Don't show the widget
}


const BrightnessWidget = () => {
    // TODO: Finish (detect if there is a controllable screen)
    const brightness = Brightness.get_default();
    const screen_brightness = bind( brightness, "screen" );

    return <label label={"🌣" + screen_brightness}></label>
}


const Audio = () => {
    const wireplumber = AstalWp.get_default();
    if ( wireplumber ) {
        const volume_speakers = bind( wireplumber.defaultSpeaker, 'volume' );

        return <box orientation={Gtk.Orientation.HORIZONTAL}>
            <image iconName={wireplumber.defaultSpeaker.volumeIcon}></image>
            <image iconName={wireplumber.defaultMicrophone.volumeIcon}></image>
            <label label={volume_speakers.as( v => { return "" + v } ) }></label>
            <label label={wireplumber.defaultSpeaker.get_name()}></label>
        </box>
    } else {
        print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing' );
    }
    return null;
}


export default {
    QuickView
}