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>
            <BatteryWidget></BatteryWidget>
            <Audio></Audio>
            <BluetoothWidget></BluetoothWidget>
            <NetworkWidget></NetworkWidget>
            <BrightnessWidget></BrightnessWidget>
            <image iconName={"system-shutdown-symbolic"}></image>
            { 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 ) {
                return 'network-wired-activated-symbolic';
            } else {
                return 'paint-unknown-symbolic';
            }
        } )} cssClasses={[ 'network-widget', 'quick-view-symbol' ]} 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', 'quick-view-symbol' ]} visible={bind( network.wifi, 'state' ).as( state => state === STATE.ACTIVATED )}></image>
    </box>
        

}

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

    // For each connected BT device, render status
    return <box>
        <box visible={enabled.as( e => e )}>
            <image iconName={"bluetooth-active-symbolic"} visible={connected.as( c => c )}></image>
            <image iconName={"bluetooth-disconnected-symbolic"} visible={connected.as( c => !c )}></image>
        </box>
        <image iconName={"bluetooth-disabled-symbolic"} visible={enabled.as( e => !e )}></image>
        <box>
            {bind( bluetooth, 'devices' ).as( devices => {
                return devices.map( device => {
                    return <box visible={bind( device, 'connected' ).as( c => c )}>
                        <image iconName={bind( device, 'icon' ).as( icon => icon )}></image>
                        <label label={bind( device, 'batteryPercentage' ).as( n => { return n + '%' } ) }></label>
                    </box>
                } );
            } )}
        </box>
    </box>
}


const BatteryWidget = () => {
    const battery = AstalBattery.get_default();
    if ( battery.get_is_present() ) {
        return <image iconName={bind( battery, 'iconName' ).as( icon => icon )} cssClasses={[ 'quick-view-symbol' ]}></image>
    } else {
        return <box></box>
    }
    // Else, no battery available -> Don't show the widget
}


const BrightnessWidget = () => {
    const brightness = Brightness.get_default();
    const screen_brightness = bind( brightness, "screen" );

    return <label label={"🌣" + screen_brightness} visible={bind( brightness, 'screenAvailable' )} cssClasses={[ 'quick-view-symbol' ]}></label>
}


const Audio = () => {
    const wireplumber = AstalWp.get_default();
    if ( wireplumber ) {
        return <box orientation={Gtk.Orientation.HORIZONTAL}>
            <image iconName={bind(wireplumber.defaultSpeaker, 'volumeIcon').as( icon => icon )} cssClasses={[ 'quick-view-symbol' ]}></image>
            <image iconName={bind(wireplumber.defaultMicrophone, 'volumeIcon').as( icon => icon )} cssClasses={[ 'quick-view-symbol' ]}></image>
        </box>
    } else {
        print( '[ WirePlumber ] Could not connect, Audio support in bar will be missing' );
        return <image iconName={"action-unavailable-symbolic"}></image>;
    }
}

// cssClasses={[ 'quick-view-symbol' ]}

export default {
    QuickView
}