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 <box visible>
        <button cssClasses={['PowerMenuButton']} child={<image iconName={"system-shutdown-symbolic"}></image>} onClicked={() => pm.popup()}/>
        { pm }
    </box>
}


export default Power;