import { BrowserConfig } from "./types.slint";
import { Theme } from "./theme.slint";
import { GradientIcon } from "./gradient-icon.slint";

export component Header inherits Rectangle {
    in property <string> url;
    callback request-drag();

    TouchArea {
        width: 100%;
        height: 100%;
        mouse-cursor: move;
        pointer-event(event) => {
            if (event.kind == PointerEventKind.down) {
                root.request-drag();
            }
        }
    }

    VerticalLayout {
        width: 100%;
        padding: Theme.spacing-md;
        padding-top: Theme.spacing-xl;
        spacing: Theme.spacing-md;

        HorizontalLayout {
            spacing: Theme.spacing-md;

            // Rectangle {
            //     width: 48px;
            //     height: 48px;
            //     border-radius: Theme.radius;
            //     background: Theme.gradient-main;

            //     Image {
            //         source: @image-url("../icons/globe.svg");
            //         colorize: white;
            //     }
            // }

            GradientIcon {
                width: 48px;
                height: 48px;
                icon: @image-url("../icons/globe.svg");
            }

            VerticalLayout {
                alignment: center;
                spacing: Theme.spacing-xs;

                Text {
                    font-family: "Segpoe UI";
                    text: "Выберите браузер";
                    color: Theme.text-main;
                    font-size: 18px;
                    font-weight: 600;
                }

                Text {
                    font-family: "Segpoe UI";
                    text: "Для открытия ссылки";
                    color: Theme.text-muted;
                    font-size: 14px;
                }
            }
        }

        Rectangle {
            height: 44px;
            border-radius: Theme.radius;
            background: Theme.surface-elevated;
            border-width: 1px;
            border-color: Theme.border-main;

            HorizontalLayout {
                padding: Theme.spacing-md;
                padding-left: Theme.spacing-lg;
                padding-right: Theme.spacing-lg;
                spacing: Theme.spacing-sm;
                alignment: start;

                Image {
                    source: @image-url("../icons/external_link.svg");
                    width: 16px;
                    colorize: Theme.text-control-muted;
                    height: 16px;
                }

                VerticalLayout {
                    padding-top: 2px;

                Text {
                    text: root.url;
                    color: Theme.text-control;
                    font-size: 14px;
                    font-family: "Consolas";
                }
                }
            }
        }
    }

    Rectangle {
        height: 1px;
        width: 100%;
        y: parent.height - self.height;
        background: Theme.border-main;
    }
}