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

export component SettingsView inherits Rectangle {
    in property <[BrowserConfig]> browsers;
    in property <[RememberedEntry]> remembered;
    callback back();
    callback remove-browser(string);
    callback remove-remembered(string);
    callback redetect();

    background: transparent;

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

        HorizontalLayout {
            spacing: 8px;

            Rectangle {
                width: 32px;
                border-radius: 8px;
                background: back-touch.has-hover ? Theme.surface-hover : transparent;

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

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

            VerticalLayout {
                alignment: center;

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

        HorizontalLayout {
            spacing: 8px;

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

            Rectangle {}

            Rectangle {
                width: 120px;
                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: 3;
            border-radius: 8px;
            background: Theme.surface-elevated;
            clip: true;

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

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

                        Image {
                            width: 22px;
                            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: 28px;
                            border-radius: 6px;
                            background: del-touch.has-hover ? #ef444420 : 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: 15px;
                                height: 15px;
                                source: @image-url("../icons/trash.svg");
                                colorize: del-touch.has-hover ? #ef4444 : Theme.text-muted;
                            }
                        }
                    }
                }
            }
        }

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

        Rectangle {
            vertical-stretch: 2;
            border-radius: 8px;
            background: Theme.surface-elevated;
            clip: true;

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

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

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

                            HorizontalLayout {
                                spacing: 6px;

                                Text {
                                    text: r.domain;
                                    color: Theme.text-main;
                                    font-size: 13px;
                                    font-family: "Consolas";
                                    vertical-alignment: center;
                                }

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

                        Rectangle {
                            width: 28px;
                            border-radius: 6px;
                            background: del2-touch.has-hover ? #ef444420 : 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: 15px;
                                height: 15px;
                                source: @image-url("../icons/trash.svg");
                                colorize: del2-touch.has-hover ? #ef4444 : Theme.text-muted;
                            }
                        }
                    }
                }
            }
        }
    }
}