component PowerMenuButton {
    in property <int> btn_width;
    in property <int> btn_height;
    in property <int> btn_border_radius;

    in property <color> btn_bg_normal;
    in property <color> btn_bg_hover;
    in property <color> btn_bg_clicked;

    in property <string> option_icon: "";
    in property <int> option_icon_height;
    in property <int> icon_font_size;
    in property <string> icon_font;
    in property <color> icon_font_color;

    in property <string> option_text: "Menu Option";
    in property <int> option_text_height;
    in property <int> option_text_font_size;
    in property <string> option_text_font;
    in property <color> option_text_color;
    
    callback menu_btn_callback();

    Rectangle {
        width: btn_width *1px;
        height: btn_height *1px;
        border-radius: btn_border_radius *1px;
        drop-shadow-color: #232323;
        drop-shadow-blur: 10px;
        drop-shadow-offset-x: 0;
        drop-shadow-offset-y: 0;
        background: touch_area.pressed ? btn_bg_clicked
                  : touch_area.has-hover ? btn_bg_hover
                  : btn_bg_normal;
        

                VerticalLayout {
            padding: 0;
            spacing: 0;
            
            Text {
                text: option_icon;
                font-size: icon_font_size *1px;
                width: btn_width *1px;
                height: option_icon_height *1px;
                vertical-alignment: center;
                horizontal-alignment: center;
                font-family: icon_font;
                color: icon_font_color;
            }
            
            Text {
                text: option_text;
                font-size: option_text_font_size *1px;
                width: btn_width *1px;
                height: option_text_height *1px;
                vertical-alignment: center;
                horizontal-alignment: center;
                font-family: option_text_font;
                color: root.option_text_color;
            }
        }

        touch_area := TouchArea {
            clicked => { menu_btn_callback(); }
        }
    }
}

export component PowerMenu inherits Window {
    in property <int> screen_width: 1920;
    in property <int> screen_height: 1080;
    in property <color> screen_bg: #a3a3a320;

    in property <int> btn_width: 120;
    in property <int> btn_height: 120;
    in property <int> btn_border_radius: 20;

    in property <color> btn_bg_normal: #91919175;
    in property <color> btn_bg_hover: #92929284;
    in property <color> btn_bg_clicked: #9b9b9bab;

    in property <int> option_icon_height: (btn_height/100) * 75;
    in property <int> icon_font_size: (option_icon_height/100) * 80;
    in property <string> icon_font: "IosevkaTermSlab Nerd Font Mono";
    in property <color> icon_font_color: #ffffff;

    in property <int> option_text_height: (btn_height/100) * 25;
    in property <int> option_text_font_size: (option_text_height/100) * 45;
    in property <string> option_text_font: "IosevkaTermSlab Nerd Font Mono";
    in property <color> option_text_color: #ffffff;

    in property <int> menu_padding_x: 20;
    in property <int> menu_padding_y: menu_padding_x;
    in property <int> menu_spacing: menu_padding_x;
    in property <int> menu_border_radius: menu_padding_x;

    in property <int> menu_width: (btn_width*4 + menu_spacing*3 + menu_padding_x*2);
    in property <int> menu_height: (btn_height + menu_padding_y*2);
    in property <int> menu_pos_x: (screen_width - menu_width)/2;
    in property <int> menu_pos_y: (screen_height - menu_height)/2;

    in property <color> menu_bg: #7a7a7a28;

    in property <string> ico_lockscreen: "";
    in property <string> ico_logout: "";
    in property <string> ico_reboot: "";
    in property <string> ico_poweroff: "";

    in property <string> text_lockscreen: "Lock screen";
    in property <string> text_logout: "Log Out";
    in property <string> text_reboot: "Reboot";
    in property <string> text_poweroff: "Power Off";

    no-frame: true;
    always-on-top: true;
    background: transparent;
    width: screen_width *1px;
    height: screen_height *1px;

    // Power menu screen
    Rectangle {
        width: 100%;
        height: 100%;
        x: 0;
        y:0;
        background: screen_bg;

        // Menu pop-up
        Rectangle {
            background: menu_bg;
            border-radius: menu_border_radius *1px;
            width: menu_width *1px;
            height: menu_height * 1px;
            x: menu_pos_x *1px;
            y: menu_pos_y *1px;
            
            // Buttons
            HorizontalLayout {
                padding: menu_padding_x *1px;
                spacing: menu_spacing *1px;
                
                // Lock screen
                PowerMenuButton {
                    option_icon: ico_lockscreen;
                    option_text: text_lockscreen;
                    
                    btn_width: root.btn_width;
                    btn_height: root.btn_height;
                    btn_border_radius: root.btn_border_radius;
                    
                    btn_bg_normal: root.btn_bg_normal;
                    btn_bg_hover: root.btn_bg_hover;
                    btn_bg_clicked: root.btn_bg_clicked;
                    
                    option_icon_height: root.option_icon_height;
                    icon_font_size: root.icon_font_size;
                    icon_font: root.icon_font;
                    icon_font_color: root.icon_font_color;
                    
                    option_text_height: root.option_text_height;
                    option_text_font_size: root.option_text_font_size;
                    option_text_font: root.option_text_font;
                    option_text_color: root.option_text_color;

                }
                
                // Log out
                PowerMenuButton {
                    option_icon: ico_logout;
                    option_text: text_logout;
                    
                    btn_width: root.btn_width;
                    btn_height: root.btn_height;
                    btn_border_radius: root.btn_border_radius;
                    
                    btn_bg_normal: root.btn_bg_normal;
                    btn_bg_hover: root.btn_bg_hover;
                    btn_bg_clicked: root.btn_bg_clicked;
                    
                    option_icon_height: root.option_icon_height;
                    icon_font_size: root.icon_font_size;
                    icon_font: root.icon_font;
                    icon_font_color: root.icon_font_color;
                    
                    option_text_height: root.option_text_height;
                    option_text_font_size: root.option_text_font_size;
                    option_text_font: root.option_text_font;
                    option_text_color: root.option_text_color;
                }
                
                // Reboot
                PowerMenuButton {
                    option_icon: ico_reboot;
                    option_text: text_reboot;
                    
                    btn_width: root.btn_width;
                    btn_height: root.btn_height;
                    btn_border_radius: root.btn_border_radius;
                    
                    btn_bg_normal: root.btn_bg_normal;
                    btn_bg_hover: root.btn_bg_hover;
                    btn_bg_clicked: root.btn_bg_clicked;
                    
                    option_icon_height: root.option_icon_height;
                    icon_font_size: root.icon_font_size;
                    icon_font: root.icon_font;
                    icon_font_color: root.icon_font_color;
                    
                    option_text_height: root.option_text_height;
                    option_text_font_size: root.option_text_font_size;
                    option_text_font: root.option_text_font;
                    option_text_color: root.option_text_color;
                }
                
                // Power off
                PowerMenuButton {
                    option_icon: ico_poweroff;
                    option_text: text_poweroff;
                    
                    btn_width: root.btn_width;
                    btn_height: root.btn_height;
                    btn_border_radius: root.btn_border_radius;
                    
                    btn_bg_normal: root.btn_bg_normal;
                    btn_bg_hover: root.btn_bg_hover;
                    btn_bg_clicked: root.btn_bg_clicked;
                    
                    option_icon_height: root.option_icon_height;
                    icon_font_size: root.icon_font_size;
                    icon_font: root.icon_font;
                    icon_font_color: root.icon_font_color;
                    
                    option_text_height: root.option_text_height;
                    option_text_font_size: root.option_text_font_size;
                    option_text_font: root.option_text_font;
                    option_text_color: root.option_text_color;
                }
            }
        }
    }
}