import { Palette, Button, VerticalBox } from "std-widgets.slint";
import { AppSize } from "globals.slint";
import { PageSystem, SystemPageData, AttrMinMax } from "pages/system.slint";
import { SideBar } from "widgets/sidebar.slint";
import { PageAbout } from "pages/about.slint";
import { PageFans } from "pages/fans.slint";
import { PageAnime, AnimePageData } from "pages/anime.slint";
import { RogItem } from "widgets/common.slint";
import { PageAura } from "pages/aura.slint";
import { Node } from "widgets/graph.slint";
export { Node }
import { FanPageData, FanType, Profile } from "types/fan_types.slint";
export { FanPageData, FanType, Profile }
import { AuraPageData, AuraDevType, LaptopAuraPower, AuraPowerState, PowerZones, AuraEffect } from "types/aura_types.slint";
export { AuraPageData, AuraDevType, LaptopAuraPower, AuraPowerState, PowerZones, AuraEffect }
import { PageAppSettings, AppSettingsPageData } from "pages/app_settings.slint";

export { AppSize, AttrMinMax, SystemPageData, AnimePageData, AppSettingsPageData }

export component MainWindow inherits Window {
    title: "ROG Control";
    always-on-top: true;
    default-font-family: "Noto Sans";
    default-font-size: 14px;
    default-font-weight: 400;
    icon: @image-url("../data/rog-control-center.png");
    in property <[bool]> sidebar_items_avilable: [true, true, true, true, true, true];
    private property <bool> show_notif;
    private property <bool> fade_cover;
    private property <bool> toast: false;
    private property <string> toast_text: "I show when something is waiting";
    callback show_toast(string);
    show_toast(text) => {
        toast = text != "";
        toast_text = text;
    }
    callback exit-app();
    callback show_notification(bool);
    show_notification(yes) => {
        show_notif = yes;
        fade_cover = yes;
    }
    callback external_colour_change();
    external_colour_change() => {
        aura.external_colour_change();
        aura.external_colour_change();
    }
    min-height: AppSize.height;
    min-width: AppSize.width;
    background: Colors.black;
    HorizontalLayout {
        padding: 0px;
        VerticalLayout {
            side-bar := SideBar {
                title: @tr("ROG");
                model: [
                    @tr("Menu1" => "System Control"),
                    @tr("Menu2" => "Keyboard Aura"),
                    @tr("Menu3" => "AniMe Matrix"),
                    @tr("Menu4" => "Fan Curves"),
                    @tr("Menu5" => "App Settings"),
                    @tr("Menu6" => "About"),
                ];
                available: root.sidebar_items_avilable;
            }

            Rectangle {
                max-height: 40px;
                width: side-bar.width;
                background: Palette.control-background;
                Text {
                    vertical-alignment: center;
                    horizontal-alignment: center;
                    text: @tr("Quit App");
                }

                TouchArea {
                    clicked => {
                        root.exit-app();
                    }
                }
            }
        }

        Rectangle {
            background: Palette.background;
            if(side-bar.current-item == 0): page := PageSystem {
                width: root.width - side-bar.width;
                height: root.height + 12px;
            }

            aura := PageAura {
                width: root.width - side-bar.width;
                visible: side-bar.current-item == 1;
            }

            if(side-bar.current-item == 2): PageAnime {
                width: root.width - side-bar.width;
            }

            fans := PageFans {
                width: root.width - side-bar.width;
                visible: side-bar.current-item == 3;
            }

            if(side-bar.current-item == 4): PageAppSettings {
                width: root.width - side-bar.width;
            }

            if(side-bar.current-item == 5): PageAbout {
                width: root.width - side-bar.width;
            }

            if toast: Rectangle {
                x: 0px;
                y: root.height - self.height;
                width: root.width - side-bar.width;
                height: 40px;
                opacity: 1.0;
                background: Palette.selection-background;
                clip: true;
                TouchArea {
                    height: 100%;
                    width: 100%;
                    clicked => {
                        toast = false;
                    }
                }

                Rectangle {
                    height: 100%;
                    width: 100%;
                    background: Palette.control-background;
                    Text {
                        color: Palette.control-foreground;
                        text: root.toast_text;
                    }
                }
            }
        }
    }

    if fade_cover: Rectangle {
        x: 0px;
        y: 0px;
        width: root.width;
        height: root.height;
        background: Colors.rgba(25,33,23,20);
        opacity: 0.7;
        TouchArea {
            height: 100%;
            width: 100%;
            clicked => {
                // toolbar-dropdown.close();
                if (show_notif) {
                    show_notif = false;
                }
                fade_cover = false;
            }
        }
    }


    // // TODO: or use Dialogue
    if show_notif: Rectangle {
        x: root.width / 8;
        y: root.height / 8;
        height: (root.height / 8) * 6;
        width: (root.width / 8) * 6;
        TouchArea {
            height: 100%;
            width: 100%;
            clicked => {
                show_notif = false;
                exit-app();
            }
        }

        // TODO: add properties to display
        Rectangle {
            height: 100%;
            width: 100%;
            background: Palette.background;
            Text {
                text: "Click here to exit";
            }
        }
    }

    if SomeError.error_message != "": Rectangle {
        x: 0px;
        y: 0px;
        width: root.width;
        height: root.height;

        //padding only has effect on layout elements
        //padding: 10px;

        background: Palette.background;
        border-color: Palette.border;
        border-width: 3px;
        border-radius: 10px;

        VerticalBox {
            RogItem {
                min-height: 50px;
                max-height: 100px;
                Text {
                    text <=> SomeError.error_message;
                    font-size: 18px;
                }
            }

            Text {
                text <=> SomeError.error_help;
                horizontal-alignment: TextHorizontalAlignment.center;
                vertical-alignment: TextVerticalAlignment.center;
            }
        }
    }
}

export global SomeError {
    in property <string> error_message: "";
    in property <string> error_help: "";
}