import { SystemDropdown, RogItem, SystemToggle, SystemToggleVert } from "../widgets/common.slint";
import { Palette, Button, ComboBox, VerticalBox, GroupBox } from "std-widgets.slint";
import { StyleMetrics, Slider, HorizontalBox, TextEdit, SpinBox, LineEdit, ScrollView } from "std-widgets.slint";
import { ColourSlider } from "../widgets/colour_picker.slint";
import { AuraPageData, AuraDevType, AuraDevTuf, AuraDevRog1, PowerZones, KbAuraPowerState, AuraPowerDev, AuraEffect } from "../types/aura_types.slint";
import { AuraPowerGroup } from "../widgets/aura_power.slint";

export component PageAura inherits Rectangle {
    property <bool> show_fade_cover: false;
    property <bool> show_aura_power: false;
    callback external_colour_change();
    external_colour_change() => {
        c1.colourbox = AuraPageData.led_mode_data.colour1;
        c1.final_colour = AuraPageData.led_mode_data.colour1;
        c1.external_colour_change();
        c2.colourbox = AuraPageData.led_mode_data.colour2;
        c2.final_colour = AuraPageData.led_mode_data.colour2;
        c2.external_colour_change();
    }
    VerticalLayout {
        padding: 10px;
        spacing: 10px;
        alignment: LayoutAlignment.start;
        HorizontalLayout {
            spacing: 10px;
            SystemDropdown {
                text: @tr("Brightness");
                current_index <=> AuraPageData.brightness;
                    current_value: AuraPageData.brightness_names[self.current-index];
                model <=> AuraPageData.brightness_names;
                    selected => {
                    AuraPageData.set_brightness(AuraPageData.brightness)
                }
            }

            SystemDropdown {
                width: parent.width * 1px / 2px;
                text: @tr("Aura mode");
                current_index <=> AuraPageData.current_available_mode;
                    current_value: AuraPageData.available_mode_names[self.current-index];
                model <=> AuraPageData.available_mode_names;
                    selected => {
                    AuraPageData.led_mode_data.mode = AuraPageData.current_available_mode;
                    self.current_value = AuraPageData.available_mode_names[self.current-index];
                    AuraPageData.set_led_mode(AuraPageData.current_available_mode);
                }
            }
        }

        RogItem {
            HorizontalLayout {
                spacing: 10px;
                VerticalBox {
                    Text {
                        text: @tr("Colour 1");
                        vertical-alignment: TextVerticalAlignment.center;
                        horizontal-alignment: TextHorizontalAlignment.center;
                    }

                    HorizontalBox {
                        c1 := ColourSlider {
                            final_colour <=> AuraPageData.color1;
                        colourbox <=> AuraPageData.colorbox1;
                        set_hex_from_colour(c1) => {
                                return AuraPageData.set_hex_from_colour(c1);
                            }
                            hex_to_colour(s) => {
                                return AuraPageData.set_hex_to_colour(s);
                            }
                        }
                    }
                }

                VerticalBox {
                    Text {
                        text: @tr("Colour 2");
                        vertical-alignment: TextVerticalAlignment.center;
                        horizontal-alignment: TextHorizontalAlignment.center;
                    }

                    HorizontalBox {
                        c2 := ColourSlider {
                            final_colour <=> AuraPageData.color2;
                        colourbox <=> AuraPageData.colorbox2;
                        set_hex_from_colour(c1) => {
                                return AuraPageData.set_hex_from_colour(c1);
                            }
                            hex_to_colour(s) => {
                                return AuraPageData.set_hex_to_colour(s);
                            }
                        }
                    }
                }
            }
        }

        HorizontalLayout {
            spacing: 10px;
            RogItem {
                padding: 0px;
                VerticalBox {
                    Text {
                        text: @tr("Zone");
                        vertical-alignment: TextVerticalAlignment.center;
                        horizontal-alignment: TextHorizontalAlignment.center;
                    }

                    ComboBox {
                        current_index <=> AuraPageData.zone;
                                current_value: AuraPageData.zone_names[self.current-index];
                        model <=> AuraPageData.zone_names;
                                selected => {
                            AuraPageData.led_mode_data.zone = self.current-index;
                        }
                    }
                }
            }

            RogItem {
                padding: 0px;
                VerticalBox {
                    Text {
                        text: @tr("Direction");
                        vertical-alignment: TextVerticalAlignment.center;
                        horizontal-alignment: TextHorizontalAlignment.center;
                    }

                    ComboBox {
                        current_index <=> AuraPageData.direction;
                                current_value: AuraPageData.direction_names[self.current-index];
                        model <=> AuraPageData.direction_names;
                                selected => {
                            AuraPageData.led_mode_data.direction = self.current-index;
                        }
                    }
                }
            }

            RogItem {
                padding: 0px;
                VerticalBox {
                    Text {
                        text: @tr("Speed");
                        vertical-alignment: TextVerticalAlignment.center;
                        horizontal-alignment: TextHorizontalAlignment.center;
                    }

                    ComboBox {
                        current_index <=> AuraPageData.speed;
                                current_value: AuraPageData.speed_names[self.current-index];
                        model <=> AuraPageData.speed_names;
                                selected => {
                            AuraPageData.led_mode_data.speed = self.current-index;
                        }
                    }
                }
            }
        }

        HorizontalBox {
            Button {
                text: @tr("Power Settings");
                clicked => {
                    root.show_fade_cover = true;
                    root.show_aura_power = true;
                }
            }

            Button {
                text: @tr("Apply Aura");
                clicked => {
                    AuraPageData.led_mode_data.mode = AuraPageData.led_mode;
                    AuraPageData.led_mode_data.colour1 = AuraPageData.color1;
                    AuraPageData.led_mode_data.colour2 = AuraPageData.color2;
                    AuraPageData.set_led_mode_data(AuraPageData.led_mode_data);
                }
            }
        }
    }

    if root.show_fade_cover: Rectangle {
        width: 100%;
        height: 100%;
        background: Palette.background;
        opacity: 0.8;
        TouchArea {
            height: 100%;
            width: 100%;
        }
    }

    if root.show_aura_power && AuraPageData.aura_type == AuraDevType.New: Rectangle {
        width: 100%;
        height: 100%;
        opacity: 1;
        ScrollView {
            VerticalLayout {
                padding: 30px;
                padding-top: 10px;
                spacing: 10px;
                for power in AuraPageData.supported_power_zones: gr := HorizontalLayout {
                    if power == PowerZones.Keyboard: zone1 := AuraPowerGroup {
                        group-title: @tr("Keyboard");
                        boot_checked: AuraPageData.led_power.rog.keyboard.boot;
                        boot_toggled => {
                            AuraPageData.led_power.rog.keyboard.boot = zone1.boot_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        awake_checked: AuraPageData.led_power.rog.keyboard.awake;
                        awake_toggled => {
                            AuraPageData.led_power.rog.keyboard.awake = zone1.awake_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        sleep_checked: AuraPageData.led_power.rog.keyboard.sleep;
                        sleep_toggled => {
                            AuraPageData.led_power.rog.keyboard.sleep = zone1.sleep_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        shutdown_checked: AuraPageData.led_power.rog.keyboard.shutdown;
                        shutdown_toggled => {
                            AuraPageData.led_power.rog.keyboard.shutdown = zone1.shutdown_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                    }

                    if power == PowerZones.Logo: zone2 := AuraPowerGroup {
                        group-title: @tr("Lid Logo");
                        boot_checked: AuraPageData.led_power.rog.logo.boot;
                        boot_toggled => {
                            AuraPageData.led_power.rog.logo.boot = zone2.boot_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        awake_checked: AuraPageData.led_power.rog.logo.awake;
                        awake_toggled => {
                            AuraPageData.led_power.rog.logo.awake = zone2.awake_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        sleep_checked: AuraPageData.led_power.rog.logo.sleep;
                        sleep_toggled => {
                            AuraPageData.led_power.rog.logo.sleep = zone2.sleep_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        shutdown_checked: AuraPageData.led_power.rog.logo.shutdown;
                        shutdown_toggled => {
                            AuraPageData.led_power.rog.logo.shutdown = zone2.shutdown_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                    }

                    if power == PowerZones.Lightbar: zone3 := AuraPowerGroup {
                        group-title: @tr("Lightbar");
                        boot_checked: AuraPageData.led_power.rog.lightbar.boot;
                        boot_toggled => {
                            AuraPageData.led_power.rog.lightbar.boot = zone3.boot_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        awake_checked: AuraPageData.led_power.rog.lightbar.awake;
                        awake_toggled => {
                            AuraPageData.led_power.rog.lightbar.awake = zone3.awake_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        sleep_checked: AuraPageData.led_power.rog.lightbar.sleep;
                        sleep_toggled => {
                            AuraPageData.led_power.rog.lightbar.sleep = zone3.sleep_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        shutdown_checked: AuraPageData.led_power.rog.lightbar.shutdown;
                        shutdown_toggled => {
                            AuraPageData.led_power.rog.lightbar.shutdown = zone3.shutdown_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                    }

                    if power == PowerZones.Lid: zone4 := AuraPowerGroup {
                        group-title: @tr("Lid Zone");
                        boot_checked: AuraPageData.led_power.rog.lid.boot;
                        boot_toggled => {
                            AuraPageData.led_power.rog.lid.boot = zone4.boot_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        awake_checked: AuraPageData.led_power.rog.lid.awake;
                        awake_toggled => {
                            AuraPageData.led_power.rog.lid.awake = zone4.awake_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        sleep_checked: AuraPageData.led_power.rog.lid.sleep;
                        sleep_toggled => {
                            AuraPageData.led_power.rog.lid.sleep = zone4.sleep_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        shutdown_checked: AuraPageData.led_power.rog.lid.shutdown;
                        shutdown_toggled => {
                            AuraPageData.led_power.rog.lid.shutdown = zone4.shutdown_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                    }

                    if power == PowerZones.RearGlow: zone5 := AuraPowerGroup {
                        group-title: @tr("Rear Glow");
                        boot_checked: AuraPageData.led_power.rog.rear-glow.boot;
                        boot_toggled => {
                            AuraPageData.led_power.rog.rear-glow.boot = zone5.boot_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        awake_checked: AuraPageData.led_power.rog.rear-glow.awake;
                        awake_toggled => {
                            AuraPageData.led_power.rog.rear-glow.awake = zone5.awake_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        sleep_checked: AuraPageData.led_power.rog.rear-glow.sleep;
                        sleep_toggled => {
                            AuraPageData.led_power.rog.rear-glow.sleep = zone5.sleep_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                        shutdown_checked: AuraPageData.led_power.rog.rear-glow.shutdown;
                        shutdown_toggled => {
                            AuraPageData.led_power.rog.rear-glow.shutdown = zone5.shutdown_checked;
                            AuraPageData.set_led_power(AuraPageData.led_power);
                        }
                    }
                }
            }
        }

        Button {
            x: root.width - self.width - 6px;
            y: 6px;
            text: "X";
            height: 40px;
            clicked => {
                root.show_aura_power = false;
                root.show_fade_cover = false;
            }
        }
    }

    if root.show_aura_power && AuraPageData.aura_type == AuraDevType.Old: Rectangle {
        width: 100%;
        height: 100%;
        opacity: 1;
        ScrollView {
            VerticalLayout {
                padding: 30px;
                padding-top: 10px;
                spacing: 10px;
                Rectangle {
                    border-radius: 20px;
                    background: Palette.control-background;
                    VerticalBox {
                        spacing: 10px;
                        alignment: LayoutAlignment.start;
                        Text {
                            font-size: 18px;
                            color: Palette.control-foreground;
                            horizontal-alignment: TextHorizontalAlignment.center;
                            text: @tr("Keyboard");
                        }

                        HorizontalBox {
                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Boot");
                            }

                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Awake");
                            }

                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Sleep");
                            }

                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Shutdown");
                            }
                        }
                    }
                }
            }
        }

        Button {
            x: root.width - self.width - 6px;
            y: 6px;
            text: "X";
            height: 40px;
            clicked => {
                root.show_aura_power = false;
                root.show_fade_cover = false;
            }
        }
    }

    if root.show_aura_power && AuraPageData.aura_type == AuraDevType.Tuf: Rectangle {
        width: 100%;
        height: 100%;
        opacity: 1;
        ScrollView {
            VerticalLayout {
                padding: 30px;
                padding-top: 10px;
                spacing: 10px;
                Rectangle {
                    border-radius: 20px;
                    background: Palette.control-background;
                    VerticalBox {
                        spacing: 10px;
                        alignment: LayoutAlignment.start;
                        Text {
                            font-size: 18px;
                            color: Palette.control-foreground;
                            horizontal-alignment: TextHorizontalAlignment.center;
                            text: @tr("Keyboard");
                        }

                        HorizontalBox {
                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Boot");
                            }

                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Awake");
                            }

                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Sleep");
                            }

                            SystemToggleVert {
                                max-height: 42px;
                                text: @tr("Shutdown");
                            }
                        }
                    }
                }
            }
        }

        Button {
            x: root.width - self.width - 6px;
            y: 6px;
            text: "X";
            height: 40px;
            clicked => {
                root.show_aura_power = false;
                root.show_fade_cover = false;
            }
        }
    }
}