import { 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 { Theme }
export { SettingsWindow } from "./settings.slint";
export { RememberedEntry } from "./types.slint";

component CheckRow inherits Rectangle {
    in property <string> label;
    in-out property <bool> checked;
    callback toggled();

    height: 28px;
    background: transparent;

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

    HorizontalLayout {
        spacing: 12px;
        padding-left: 4px;

        Rectangle {
            width: 20px;
            border-radius: 6px;
            background: root.checked ? Theme.accent : transparent;
            border-width: 2px;
            border-color: root.checked ? Theme.accent : Theme.border-main;

            Image {
                x: (parent.width - self.width) / 2;
                y: (parent.height - self.height) / 2;
                width: 12px;
                height: 12px;
                source: @image-url("../icons/check.svg");
                colorize: #ffffff;
                visible: root.checked;
            }
        }

        Text {
            text: root.label;
            color: Theme.text-muted;
            font-size: 14px;
            vertical-alignment: center;
        }
    }
}

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

    callback launch-browser(int);
    callback toggle-remember(bool);
    callback toggle-always-ask(bool);
    callback settings-clicked();
    callback open-clicked();
    callback request-drag();
    callback esc-pressed();

    no-frame: true;
    background: transparent;
    width: 488px;
    height: 800px;
    default-font-family: "Segoe UI";
    scope := FocusScope {
        init => {
            self.focus();
        }
        key-pressed(event) => {
            if (event.text == Key.Escape) {
                root.esc-pressed();
                accept
            } else {
                reject
            }
        }
    }

    callback restore-focus();
    restore-focus => {
        scope.focus();
    }
    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;
                    request-drag => root.request-drag();
                }

                HorizontalLayout {
                    padding-left: 12px;
                    padding-right: 12px;

                    ListView {
                        vertical-stretch: 1;

                        for browser[i] in root.browser-model: BrowserItem {
                            index: i;
                            browser-icon: browser.icon;
                            emoji: browser.emoji;
                            icon-mask: browser.icon-mask;
                            browser-name: browser.name;
                            is-default: browser.is-default;
                            selected: i == root.selected-index;
                            clicked(idx) => {
                                root.launch-browser(idx);
                            }
                        }
                    }
                }

                Rectangle {
                    height: 12px;
                }

                VerticalLayout {
                    spacing: 8px;
                    padding-left: 4px;
                    padding-bottom: 8px;

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

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

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