import { Theme } from "theme.slint";
import { AppState, ActiveTab } from "globals.slint";
import { ConnectionBar } from "components/connection_bar.slint";
import { StatusBar } from "components/status_bar.slint";
import { KeySelector } from "components/key_selector.slint";
import { TabKeymap } from "tabs/tab_keymap.slint";
import { TabAdvanced } from "tabs/tab_advanced.slint";
import { TabMacros } from "tabs/tab_macros.slint";
import { TabStats } from "tabs/tab_stats.slint";
import { TabSettings } from "tabs/tab_settings.slint";
import { TabFlasher } from "tabs/tab_flasher.slint";

export { AppState, Theme }
export { ConnectionBridge, KeymapBridge, SettingsBridge, StatsBridge, AdvancedBridge, MacroBridge, FlasherBridge, KeySelectorBridge } from "globals.slint";

component DarkTab inherits Rectangle {
    in property <string> title;
    in property <bool> active;
    callback clicked();

    height: 32px;
    horizontal-stretch: 1;
    border-radius: 4px;
    background: root.active ? Theme.bg-secondary : transparent;

    Text {
        text: root.title;
        color: root.active ? Theme.fg-primary : #9a9ebb;
        font-size: 13px;
        font-weight: root.active ? 700 : 400;
        horizontal-alignment: center;
        vertical-alignment: center;
    }

    Rectangle {
        y: parent.height - 2px;
        height: 2px;
        background: root.active ? Theme.accent-purple : transparent;
    }

    TouchArea {
        clicked => { root.clicked(); }
        mouse-cursor: pointer;
    }
}

export component MainWindow inherits Window {
    title: "KaSe Controller";
    preferred-width: 1000px;
    preferred-height: 700px;
    min-width: 600px;
    min-height: 450px;
    background: Theme.bg-primary;

    in-out property <int> current-tab: 0;

    VerticalLayout {
        ConnectionBar { }

        // Tab bar
        Rectangle {
            height: 34px;
            background: Theme.bg-primary;

            HorizontalLayout {
                padding-left: 8px;
                padding-right: 8px;
                spacing: 2px;

                DarkTab { title: "Keymap"; active: root.current-tab == 0; clicked => { root.current-tab = 0; AppState.tab-changed(0); } }
                DarkTab { title: "Advanced"; active: root.current-tab == 1; clicked => { root.current-tab = 1; AppState.tab-changed(1); } }
                DarkTab { title: "Macros"; active: root.current-tab == 2; clicked => { root.current-tab = 2; AppState.tab-changed(2); } }
                DarkTab { title: "Stats"; active: root.current-tab == 3; clicked => { root.current-tab = 3; AppState.tab-changed(3); } }
                DarkTab { title: "Settings"; active: root.current-tab == 4; clicked => { root.current-tab = 4; AppState.tab-changed(4); } }
                DarkTab { title: "Flash"; active: root.current-tab == 5; clicked => { root.current-tab = 5; AppState.tab-changed(5); } }
            }
        }

        // Tab content
        Rectangle {
            vertical-stretch: 1;
            background: Theme.bg-secondary;
            border-radius: 4px;

            if root.current-tab == 0 : TabKeymap { }
            if root.current-tab == 1 : TabAdvanced { }
            if root.current-tab == 2 : TabMacros { }
            if root.current-tab == 3 : TabStats { }
            if root.current-tab == 4 : TabSettings { }
            if root.current-tab == 5 : TabFlasher { }
        }

        StatusBar { }
    }

    // Modal overlay (above everything)
    KeySelector { }
}