import { ComboBox } from "std-widgets.slint";
import { Theme } from "../theme.slint";
import { SettingsBridge } from "../globals.slint";

export component TabSettings inherits Rectangle {
    background: Theme.bg-primary;

    VerticalLayout {
        padding: 20px;
        spacing: 16px;
        alignment: start;

        Text {
            text: "Settings";
            color: Theme.fg-primary;
            font-size: 20px;
            font-weight: 700;
        }

        // Keyboard layout section
        Rectangle {
            background: Theme.bg-secondary;
            border-radius: 8px;
            height: 80px;

            HorizontalLayout {
                padding: 16px;
                spacing: 12px;
                alignment: start;

                VerticalLayout {
                    alignment: center;
                    Text {
                        text: "Keyboard Layout";
                        color: Theme.fg-primary;
                        font-size: 14px;
                    }
                    Text {
                        text: "Controls how keycodes are displayed (label remapping)";
                        color: Theme.fg-secondary;
                        font-size: 11px;
                    }
                }

                Rectangle { horizontal-stretch: 1; }

                VerticalLayout {
                    alignment: center;
                    ComboBox {
                        width: 200px;
                        model: SettingsBridge.available-layouts;
                        current-index <=> SettingsBridge.selected-layout-index;
                        selected(value) => {
                            SettingsBridge.change-layout(self.current-index);
                        }
                    }
                }
            }
        }

        // About section
        Rectangle {
            background: Theme.bg-secondary;
            border-radius: 8px;

            VerticalLayout {
                padding: 16px;
                spacing: 8px;

                Text {
                    text: "About";
                    color: Theme.fg-primary;
                    font-size: 14px;
                    font-weight: 600;
                }
                Text {
                    text: "KaSe Controller v0.6.0";
                    color: Theme.fg-secondary;
                    font-size: 12px;
                }
                Text {
                    text: "Split keyboard configurator — Slint UI port";
                    color: Theme.fg-secondary;
                    font-size: 12px;
                }
                Text {
                    text: "Made with Slint";
                    color: Theme.accent-purple;
                    font-size: 11px;
                }
            }
        }

        // Spacer
        Rectangle { vertical-stretch: 1; }
    }
}