import { Theme } from "./theme.slint";

export component BrowserItem inherits Rectangle {
    in property <int> index;
    in property <image> browser-icon;
    in property <string> emoji;
    in property <bool> icon-mask;
    in property <string> browser-name;
    in property <bool> is-default;
    in property <bool> selected;
    callback clicked(int);

    height: 84px;
    background: transparent;

    panel := Rectangle {
        y: 4px;
        height: 76px;
        border-radius: 12px;
        background: touch.has-hover ? Theme.surface-hover
            : root.selected ? Theme.surface-elevated
            : Theme.surface-item;
        border-width: root.selected ? 2px : 1px;
        border-color: root.selected ? Theme.accent-ring : transparent;

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

        HorizontalLayout {
            padding: 14px;
            spacing: 16px;

            Rectangle {
                width: 48px;
                vertical-stretch: 0;
                border-radius: 12px;
                background: Theme.surface-elevated;

                if root.emoji != "": Text {
                    width: 100%;
                    height: 100%;
                    text: root.emoji;
                    font-size: 26px;
                    horizontal-alignment: center;
                    vertical-alignment: center;
                }

                if root.emoji == "" && root.icon-mask: Image {
                    x: (parent.width - self.width) / 2;
                    y: (parent.height - self.height) / 2;
                    width: 30px;
                    height: 30px;
                    source: root.browser-icon;
                    colorize: Theme.text-muted;
                }

                if root.emoji == "" && !root.icon-mask: Image {
                    x: (parent.width - self.width) / 2;
                    y: (parent.height - self.height) / 2;
                    width: 30px;
                    height: 30px;
                    source: root.browser-icon;
                }
            }

            VerticalLayout {
                alignment: center;

                HorizontalLayout {
                    spacing: 8px;
                    alignment: start;

                    Text {
                        text: root.browser-name;
                        color: Theme.text-main;
                        font-size: 16px;
                        font-weight: 500;
                        vertical-alignment: center;
                    }

                    if root.is-default: Rectangle {
                        height: 22px;
                        border-radius: 11px;
                        background: Theme.accent-soft;

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

                            Text {
                                text: "По умолчанию";
                                color: #60a5fa;
                                font-size: 12px;
                                vertical-alignment: center;
                            }
                        }
                    }
                }
            }

            VerticalLayout {
                width: 20px;
                alignment: center;

                Image {
                    width: 16px;
                    height: 16px;
                    source: @image-url("../icons/check.svg");
                    colorize: Theme.accent;
                    visible: root.selected;
                }

                Text {
                    text: "›";
                    color: Theme.text-muted;
                    font-size: 16px;
                    visible: !root.selected;
                }
            }
        }
    }
}