import Gtk from "gi://Gtk?version=3.0"
import { execAsync, Variable } from "astal"
import Dropdown from "./Dropdown"

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

function PowerRow(action: (typeof actions)[number]) {
    return (
        <button
            className="power-row"
            onClicked={() => execAsync(action.cmd)}
        >
            <box>
                <icon icon={action.icon} />
                <label label={action.label} halign={Gtk.Align.START} hexpand />
            </box>
        </button>
    )
}

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

    const button = (
        <button
            className="power"
            onClicked={() => open.set(!open.get())}
        >
            <icon icon="system-shutdown-symbolic" />
        </button>
    )

    const popup = (
        <Dropdown gdkmonitor={gdkmonitor} target={button} open={open} width={180}>
            {actions.map((action) => PowerRow(action))}
        </Dropdown>
    )

    return { button, popup }
}