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
};