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("shutdown now")}
                ></button>
                <button
                    cssClasses={["power-button"]}
                    child={<image iconName={"system-reboot-symbolic"}></image>}
                    onClicked={() => exec("reboot")}
                ></button>
                <button
                    cssClasses={["power-button"]}
                    child={<image iconName={"system-suspend-symbolic"}></image>}
                    onClicked={() => exec("systemctl suspend")}
                ></button>
                <button
                    cssClasses={["power-button"]}
                    child={
                        <image iconName={"system-lock-screen-symbolic"}></image>
                    }
                    onClicked={() => exec("hyprlock")}
                ></button>
                <button
                    cssClasses={["power-button"]}
                    child={<image iconName={"system-log-out-symbolic"}></image>}
                    onClicked={() => exec("hyprctl dispatch exit 0")}
                ></button>
            </box>
        );
    };

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

const Power = () => {
    const pm = PowerMenu();
    return (
        <button
            cssClasses={["PowerMenuButton"]}
            child={
                <box>
                    <image iconName={"system-shutdown-symbolic"}></image>
                    {pm}
                </box>
            }
            onClicked={() => pm.popup()}
        />
    );
};

export default Power;