import { Button, CheckBox, ListView } from "std-widgets.slint";
import { BrowserItem } from "./browser_item.slint";
import { Header } from "./header.slint";
import { Footer } from "./footer.slint";
import { BrowserConfig } from "./types.slint";
import { Theme } from "theme.slint";

export component MainWindow inherits Window {
    in property <[BrowserConfig]> browser-model: [];
    in property <string> current-url: "";
    in-out property <bool> remember-choice: false;
    in-out property <bool> always-ask: true;
    in property <int> selected-index: 0;

    callback browser-selected(BrowserConfig);
    callback toggle-remember(bool);
    callback toggle-always-ask(bool);
    callback settings-clicked();
    callback open-clicked();
    callback request-drag();

    // no-frame: true;
    background: transparent;
    width: 488px;
    height: 800px;
    default-font-family: "Segoe UI";

    VerticalLayout {
        alignment: start;
        width: 488px;
        height: 800px;

        padding: Theme.spacing-xl;

        Rectangle {
            max-width: 448px;
            width: 100%;
            height: 760px;
            border-radius: Theme.radius-lg;
            clip: true;
            background: Theme.surface-main;
            border-width: 1px;
            border-color: Theme.border-main;

            VerticalLayout {

                Header {
                    url: current-url;
                }

                // ListView {
                //     max-height: 400px;

                //     for browser[i] in root.browser-model: BrowserItem {
                //         browser: browser;
                //         selected: i == root.selected-index;
                //     }
                // }

                //     spacing: 12px;
                //     padding-left: 4px;

                //     CheckBox {
                //         text: "Запомнить выбор для " + root.current-url;
                //         checked <=> root.remember-choice;
                //         toggled => {
                //             root.toggle-remember(root.remember-choice);
                //         }
                //     }

                //     CheckBox {
                //         text: "Всегда спрашивать";
                //         checked <=> root.always-ask;
                //         toggled => {
                //             root.toggle-always-ask(root.always-ask);
                //         }
                //     }
                // }

                Rectangle {
                    vertical-stretch: 1;
                }

                Footer {
                    settings-clicked => root.settings-clicked();
                    open-clicked => root.open-clicked();
                }
            }
        }
    }
}