import AstalWp from "gi://AstalWp"
import { execAsync, Variable, bind } from "astal"
import Dropdown from "./Dropdown"

const speaker = AstalWp.get_default().audio.default_speaker!
const mic = AstalWp.get_default().audio.default_microphone

const speakerIcon = Variable.derive(
    [bind(speaker, "volume"), bind(speaker, "mute")],
    (volume, mute) => {
        if (mute || volume <= 0.01) return "audio-volume-muted-symbolic"
        if (volume < 0.33) return "audio-volume-low-symbolic"
        if (volume < 0.66) return "audio-volume-medium-symbolic"
        return "audio-volume-high-symbolic"
    },
)

const micIcon = mic
    ? Variable.derive([bind(mic, "volume"), bind(mic, "mute")], (volume, mute) =>
          mute || volume <= 0.01
              ? "microphone-sensitivity-muted-symbolic"
              : "microphone-sensitivity-high-symbolic",
      )
    : null

const actions = [
    { icon: "system-lock-screen-symbolic", cmd: ["hyprlock"] },
    { icon: "weather-clear-night-symbolic", cmd: ["systemctl", "suspend"] },
    { icon: "system-log-out-symbolic", cmd: ["hyprctl", "dispatch", "exit"] },
    { icon: "system-reboot-symbolic", cmd: ["systemctl", "reboot"] },
    { icon: "system-shutdown-symbolic", cmd: ["systemctl", "poweroff"] },
]

export default function QuickSettings(gdkmonitor: Gdk.Monitor) {
    const open = Variable(false)

    const button = (
        <button
            className="quicksettings end"
            onClicked={() => open.set(!open.get())}
            onScroll={(_, e) => {
                const volume = Math.min(
                    1,
                    Math.max(0, speaker.volume - e.delta_y * 0.02),
                )
                speaker.volume = volume
            }}
        >
            <box spacing={6}>
                <icon icon={speakerIcon()} />
                {micIcon && <icon icon={micIcon()} />}
            </box>
        </button>
    )

    const popup = (
        <Dropdown gdkmonitor={gdkmonitor} target={button} open={open} width={280}>
            <box className="power-header" homogeneous>
                {actions.map((action) => (
                    <button
                        className="power-action"
                        onClicked={() => execAsync(action.cmd)}
                    >
                        <icon icon={action.icon} />
                    </button>
                ))}
            </box>
            <box className="qs-row">
                <button
                    className="qs-toggle"
                    onClicked={() => (speaker.mute = !speaker.mute)}
                >
                    <icon icon={speakerIcon()} />
                </button>
                <slider
                    className="vol-slider"
                    hexpand
                    value={bind(speaker, "volume")}
                    onDragged={(self) => (speaker.volume = self.value)}
                />
            </box>
            {mic && micIcon && (
                <box className="qs-row">
                    <button
                        className="qs-toggle"
                        onClicked={() => (mic.mute = !mic.mute)}
                    >
                        <icon icon={micIcon()} />
                    </button>
                    <slider
                        className="vol-slider"
                        hexpand
                        value={bind(mic, "volume")}
                        onDragged={(self) => (mic.volume = self.value)}
                    />
                </box>
            )}
        </Dropdown>
    )

    return { button, popup }
}