import { exec } from "astal";
import { Gtk } from "astal/gtk4";

const PowerMenu = (): Gtk.Popover => {
    const popover = new Gtk.Popover({ cssClasses: ["PowerMenu"] });

    const powerMenuBox = () => {
        return (
            <box>
                <button
                    cssClasses={["power-button"]}
                    child={
                        <image iconName={"system-shutdown-symbolic"}></image>
                    }
                    onClicked={() => exec("/bin/sh -c 'shutdown now'")}
                ></button>
                <button
                    cssClasses={["power-button"]}
                    child={<image iconName={"system-reboot-symbolic"}></image>}
                    onClicked={() => exec("/bin/sh -c 'reboot'")}
                ></button>
                <button
                    cssClasses={["power-button"]}
                    child={<image iconName={"system-suspend-symbolic"}></image>}
                    onClicked={() => exec("/bin/sh -c 'systemctl suspend'")}
                ></button>
            </box>
        );
    };

    popover.set_child(powerMenuBox());
    return popover;
};

const Power = () => {
    const pm = PowerMenu();
    return (
        <button
            widthRequest={0}
            hexpand={false}
            vexpand={false}
            cssClasses={["power-menu-button"]}
            child={
                <box>
                    <image iconName={"system-shutdown-symbolic"}></image>
                    {pm}
                </box>
            }
            onClicked={() => pm.popup()}
        />
    );
};

const UserMenu = (): Gtk.Popover => {
    const popover = new Gtk.Popover();

    const powerMenuBox = () => {
        return (
            <box>
                <button
                    cssClasses={["power-button"]}
                    child={
                        <image iconName={"system-lock-screen-symbolic"}></image>
                    }
                    onClicked={() => exec("/bin/sh -c 'hyprlock'")}
                ></button>
                <button
                    cssClasses={["power-button"]}
                    child={<image iconName={"system-log-out-symbolic"}></image>}
                    onClicked={() =>
                        exec("/bin/sh -c 'hyprctl dispatch exit 0'")
                    }
                ></button>
            </box>
        );
    };

    popover.set_child(powerMenuBox());
    return popover;
};

export default {
    Power,
    UserMenu
};
