import { TimeWidget } from "time-widget.slint";
import { DateWidget } from "date-widget.slint";
import { SquareIconWidget } from "square-icon-widget.slint";

export component TopBar inherits Window {

    // Common properties
    in property<int> bar_width;
    in property<int> bar_height;
    in property<int> def_font_size;
    in property<string> def_font_fam;

    // Right side
    in property<string> current_window_title;
    in property<int> tag_icon_font_size: bar_height;
    in property <[string]> tag_icons;
    callback go_to_tag(int);

    // Time widget
    in-out property <string> time_text;
    callback show_clock();

    // Date widget
    in-out property <string> date_text;
    callback show_calendar();

    // Battery widget
    in property <string> battery_tooltip;      
    in property <string> battery_icon;  
    in property <color> battery_icon_color;
    /*in property <color> battery_bg_normal;    // Enable later. Use defaults now.
    in property <color> battery_bg_hover;
    in property <color> battery_bg_clicked;*/
    callback show_battery();

    // Volume widget
    in property <string> volume_tooltip;      
    in property <string> volume_icon;  
    /*in property <color> volume_icon_color;
    in property <color> volume_bg_normal;
    in property <color> volume_bg_hover;
    in property <color> volume_bg_clicked;*/
    callback show_volume();

    // Brightness widget
    in property <string> brightness_tooltip;      
    in property <string> brightness_icon;  
    /*in property <color> brightness_icon_color;
    in property <color> brightness_bg_normal;
    in property <color> brightness_bg_hover;
    in property <color> brightness_bg_clicked;*/
    callback show_brightness();
    
    // Wifi widget
    in property <string> wifi_tooltip;      
    in property <string> wifi_icon;  
    /*in property <color> wifi_icon_color;
    in property <color> wifi_bg_normal;
    in property <color> wifi_bg_hover;
    in property <color> wifi_bg_clicked;*/
    callback show_wifi();

    // Weather widget
    in property <string> weather_tooltip;      
    in property <string> weather_icon;  
    /*in property <color> weather_icon_color;
    in property <color> weather_bg_normal;
    in property <color> weather_bg_hover;
    in property <color> weather_bg_clicked;*/
    callback show_weather();

    // Notifications widget
    in property <string> notif_tooltip;      
    in property <string> notif_icon: "󰂚";  
    in property <int> notif_count: 0;  
    /*in property <color> notif_icon_color;
    in property <color> notif_bg_normal;
    in property <color> notif_bg_hover;
    in property <color> notif_bg_clicked;*/
    callback show_notif();

    // Power button
    in property <string> power_tooltip;      
    in property <string> power_icon: "";  
    /*in property <color> power_icon_color;
    in property <color> power_bg_normal;
    in property <color> power_bg_hover;
    in property <color> power_bg_clicked;*/
    callback show_power();

    title: "chocobar";
    width: bar_width *1px;
    height: bar_height *1px;
    always-on-top: true;
    no-frame: true;
    x: 0px;
    y: 0px;
    default-font-family: def_font_fam;
    default-font-size: def_font_size *1px;
    background: #00000000;

    Rectangle {
        x: 0px;
        y: 0px;
        width: 100%;
        height: 100%;
        background: rgba(128, 128, 128, 0.4);
        border-radius: 0px;

        HorizontalLayout {
            x: 0px;
            y: 0px;
            width: 100%;
            height: 100%;
            
            // Left side
            Rectangle {
                width: parent.width/3;
                HorizontalLayout {
                    alignment: start; // Left-align
                    padding-left: 4px;
                    padding-right: 4px;

                    // Current Window Title
                    Text {
                        width: root.width/4;
                        text: root.current_window_title;
                        vertical-alignment: center;
                        wrap: no-wrap;
                        overflow: elide;
                    }
                }
            }  
            
            // Middle
            Rectangle {
                width: parent.width/3;
                HorizontalLayout {
                    alignment: center; // Right-align
                    for ico[i] in root.tag_icons: SquareIconWidget {
                        icon_text: ico;
                        bar_height: root.bar_height;
                        icon_font_size: root.tag_icon_font_size;
                        square_btn_callback => root.go_to_tag(i);
                    }
                }
            }  
            
            // Right side
            Rectangle {
                width: parent.width/3;

                HorizontalLayout {
                    alignment: end; // Right-align

                    // SquareIconWidget - Notifications
                    SquareIconWidget {
                        bar_height: root.bar_height;
                        icon_text: root.notif_icon;
                        tooltip_text: root.notif_tooltip;
                        badge_count: root.notif_count;
                        /*icon_color: root.notif_icon_color;
                        bg_normal: root.notif_bg_normal;
                        bg_hover: root.notif_bg_hover;
                        bg_clicked: root.notif_bg_clicked;*/
                        square_btn_callback => root.show_notif();
                    }

                    // SquareIconWidget - Weather
                    SquareIconWidget {
                        bar_height: root.bar_height;
                        icon_text: root.weather_icon;
                        tooltip_text: root.weather_tooltip;
                        /*icon_color: root.weather_icon_color;
                        bg_normal: root.weather_bg_normal;
                        bg_hover: root.weather_bg_hover;
                        bg_clicked: root.weather_bg_clicked;*/
                        square_btn_callback => root.show_weather();
                    }

                    // SquareIconWidget - Wifi
                    SquareIconWidget {
                        bar_height: root.bar_height;
                        icon_text: root.wifi_icon;
                        tooltip_text: root.wifi_tooltip;
                        /*icon_color: root.wifi_icon_color;
                        bg_normal: root.wifi_bg_normal;
                        bg_hover: root.wifi_bg_hover;
                        bg_clicked: root.wifi_bg_clicked;*/
                        square_btn_callback => root.show_wifi();
                    }
                    
                    // SquareIconWidget - Brightness
                    SquareIconWidget {
                        bar_height: root.bar_height;
                        icon_text: root.brightness_icon;
                        tooltip_text: root.brightness_tooltip;
                        /*icon_color: root.brightness_icon_color;
                        bg_normal: root.brightness_bg_normal;
                        bg_hover: root.brightness_bg_hover;
                        bg_clicked: root.brightness_bg_clicked;*/
                        square_btn_callback => root.show_brightness();
                    }
                    
                    // SquareIconWidget - Volume
                    SquareIconWidget {
                        bar_height: root.bar_height;
                        icon_text: root.volume_icon;
                        tooltip_text: root.volume_tooltip;
                        /*icon_color: root.volume_icon_color;
                        bg_normal: root.volume_bg_normal;
                        bg_hover: root.volume_bg_hover;
                        bg_clicked: root.volume_bg_clicked;*/
                        square_btn_callback => root.show_volume();
                    }

                    // SquareIconWidget - Battery 
                    SquareIconWidget {
                        bar_height: root.bar_height;
                        icon_text: root.battery_icon;
                        tooltip_text: root.battery_tooltip;
                        icon_color: root.battery_icon_color;
                        icon_font_size: root.bar_height - 9;
                        /*bg_normal: root.battery_bg_normal;
                        bg_hover: root.battery_bg_hover;
                        bg_clicked: root.battery_bg_clicked;*/
                        square_btn_callback => root.show_battery();
                    }

                    DateWidget {
                        // Get from root
                        date_text: root.date_text;  
                        // Forward the widget's callback to the root's to access from Rust 
                        show_calendar => root.show_calendar();     
                    }

                    TimeWidget {
                        // Get from root  
                        time_text: root.time_text;  
                        // Forward the widget's callback to the root's to access from Rust   
                        show_clock => root.show_clock();     
                    }

                    // SquareIconWidget - Power button 
                    SquareIconWidget {
                        bar_height: root.bar_height;
                        icon_text: root.power_icon;
                        tooltip_text: root.power_tooltip;
                        /*icon_color: root.power_icon_color;
                        bg_normal: root.power_bg_normal;
                        bg_hover: root.power_bg_hover;
                        bg_clicked: root.power_bg_clicked;*/
                        square_btn_callback => root.show_power();
                    }
                }
            }
        }
    }
}