export struct MenuOption {
    icon: string,
    text: string,
    op_id: string,
}

export struct ButtonStyle {
    btn_width: int,
    btn_height: int,
    btn_border_radius: int,

    btn_bg_normal: color,
    btn_bg_hover: color,
    btn_bg_clicked: color,

    option_icon_height: int,
    icon_font_size: int,
    icon_font: string,
    icon_font_color: color,

    option_text_height: int,
    option_text_font_size: int,
    option_text_font: string,
    option_text_color: color,
}

component PowerMenuButton {
    in property <string> option_icon: "";
    in property <string> option_text: "Menu Option";
    in property <ButtonStyle> button_style;
    
    callback menu_btn_callback();

    Rectangle {
        width: button_style.btn_width *1px;
        height: button_style.btn_height *1px;
        border-radius: button_style.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 ? button_style.btn_bg_clicked
                  : touch_area.has-hover ? button_style.btn_bg_hover
                  : button_style.btn_bg_normal;
                  
        VerticalLayout {
            padding: 0;
            spacing: 0;
            
            Text {
                text: option_icon;
                font-size: button_style.icon_font_size *1px;
                width: button_style.btn_width *1px;
                height: button_style.option_icon_height *1px;
                vertical-alignment: center;
                horizontal-alignment: center;
                font-family: button_style.icon_font;
                color: button_style.icon_font_color;
            }
            
            Text {
                text: option_text;
                font-size: button_style.option_text_font_size *1px;
                width: button_style.btn_width *1px;
                height: button_style.option_text_height *1px;
                vertical-alignment: center;
                horizontal-alignment: center;
                font-family: button_style.option_text_font;
                color: button_style.option_text_color;
            }
        }

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

export component PowerMenu inherits Window {
    callback request_close();

    in property <int> screen_width;
    in property <int> screen_height;
    in property <color> screen_bg;

    in property <ButtonStyle> button_style;

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

    in property <int> menu_width;
    in property <int> menu_height;
    in property <int> menu_pos_x;
    in property <int> menu_pos_y;

    in property <color> menu_bg;

    in property <[MenuOption]> options;
    callback option_clicked(string);

    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;

        // Close upon clicking outside the menu
        TouchArea {
            x: 0;
            y: 0;
            width: 100%;
            height: 100%;

            clicked => {
                request_close();
            }
        }

        // 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;
            
            TouchArea {
                // Empty. Prevent close-on-click inside the menu.
            }

            // Buttons
            HorizontalLayout {
                padding: menu_padding_x *1px;
                spacing: menu_spacing *1px;
                
                for opt in options : PowerMenuButton {
                    option_icon: opt.icon;
                    option_text: opt.text;
                    button_style: root.button_style;
                    
                    menu_btn_callback => {
                        root.option_clicked(opt.op_id);
                    }
                }
            }
        }
    }
}