import { ListView } from "std-widgets.slint";
import { Theme } from "./theme.slint";
import { BrowserConfig, RememberedEntry } from "./types.slint";

export component SettingsWindow inherits Window {
    title: "bropicker — настройки";
    width: 760px;
    height: 560px;
    background: Theme.surface-main;
    default-font-family: "Segoe UI";

    in property <[BrowserConfig]> browsers;
    in property <[RememberedEntry]> remembered;
    callback remove-browser(string);
    callback remove-remembered(string);
    callback redetect();
    callback esc-pressed();

    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 {
        padding: 20px;
        spacing: 14px;

        Text {
            text: "Настройки";
            color: Theme.text-main;
            font-size: 20px;
            font-weight: 600;
        }

        HorizontalLayout {
            spacing: 14px;

            VerticalLayout {
                spacing: 8px;

                HorizontalLayout {
                    spacing: 8px;

                    Text {
                        text: "Браузеры";
                        color: Theme.text-muted;
                        font-size: 13px;
                        vertical-alignment: center;
                    }

                    Rectangle {}

                    Rectangle {
                        width: 110px;
                        height: 26px;
                        border-radius: 8px;
                        background: redetect-touch.has-hover ? Theme.surface-hover : Theme.surface-elevated;
                        border-width: 1px;
                        border-color: Theme.border-main;

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

                        Text {
                            width: 100%;
                            height: 100%;
                            text: "Автодетект";
                            color: redetect-touch.has-hover ? Theme.text-main : Theme.text-control;
                            font-size: 12px;
                            horizontal-alignment: center;
                            vertical-alignment: center;
                        }
                    }
                }

                Rectangle {
                    vertical-stretch: 1;
                    border-radius: 12px;
                    background: Theme.surface-elevated;
                    border-width: 1px;
                    border-color: Theme.border-main;
                    clip: true;

                    ListView {
                        for b in root.browsers: Rectangle {
                            height: 56px;
                            background: transparent;

                            HorizontalLayout {
                                padding-left: 14px;
                                padding-right: 10px;
                                spacing: 12px;

                                Image {
                                    width: 26px;
                                    y: (parent.height - self.height) / 2;
                                    source: b.icon;
                                }

                                VerticalLayout {
                                    horizontal-stretch: 1;
                                    alignment: center;

                                    Text {
                                        text: b.name;
                                        color: Theme.text-main;
                                        font-size: 14px;
                                    }

                                    Text {
                                        text: b.path;
                                        color: Theme.text-hint;
                                        font-size: 11px;
                                        font-family: "Consolas";
                                        overflow: elide;
                                    }
                                }

                                Rectangle {
                                    width: 30px;
                                    border-radius: 6px;
                                    background: del-touch.has-hover ? Theme.danger-soft : transparent;

                                    del-touch := TouchArea {
                                        mouse-cursor: pointer;
                                        clicked => {
                                            root.remove-browser(b.name);
                                        }
                                    }

                                    Image {
                                        x: (parent.width - self.width) / 2;
                                        y: (parent.height - self.height) / 2;
                                        width: 16px;
                                        height: 16px;
                                        source: @image-url("../icons/trash.svg");
                                        colorize: del-touch.has-hover ? Theme.danger : Theme.text-muted;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            VerticalLayout {
                spacing: 8px;

                Text {
                    text: "Запомненные домены";
                    color: Theme.text-muted;
                    font-size: 13px;
                }

                Rectangle {
                    vertical-stretch: 1;
                    border-radius: 12px;
                    background: Theme.surface-elevated;
                    border-width: 1px;
                    border-color: Theme.border-main;
                    clip: true;

                    ListView {
                        for r in root.remembered: Rectangle {
                            height: 44px;
                            background: transparent;

                            HorizontalLayout {
                                padding-left: 14px;
                                padding-right: 10px;
                                spacing: 12px;

                                VerticalLayout {
                                    horizontal-stretch: 1;
                                    alignment: center;

                                    Text {
                                        text: r.domain;
                                        color: Theme.text-main;
                                        font-size: 14px;
                                        font-family: "Consolas";
                                    }

                                    Text {
                                        text: "→ " + r.browser;
                                        color: Theme.text-hint;
                                        font-size: 12px;
                                    }
                                }

                                Rectangle {
                                    width: 30px;
                                    border-radius: 6px;
                                    background: del2-touch.has-hover ? Theme.danger-soft : transparent;

                                    del2-touch := TouchArea {
                                        mouse-cursor: pointer;
                                        clicked => {
                                            root.remove-remembered(r.domain);
                                        }
                                    }

                                    Image {
                                        x: (parent.width - self.width) / 2;
                                        y: (parent.height - self.height) / 2;
                                        width: 16px;
                                        height: 16px;
                                        source: @image-url("../icons/trash.svg");
                                        colorize: del2-touch.has-hover ? Theme.danger : Theme.text-muted;
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}