import { UiRadius } from "ui_radius.slint";
import { ScrollView } from "std-widgets.slint";
import { RoundedLineEdit } from "rounded_line_edit.slint";
import { CompactButton, ImGuiCheckBox } from "common.slint";
import { GalleryStrings } from "device_strings.slint";

export struct DeviceGroupOption {
    name: string,
    selected: bool,
}

export component DeviceGroupDialog inherits Rectangle {
    in property <string> device-name;
    in property <string> device-id;
    in property <[DeviceGroupOption]> options;
    in property <string> error;
    in-out property <string> new-group;
    callback toggle-group(string);
    callback save(string);
    callback cancel();
    background: #00000040;
    TouchArea {}
    dialog := Rectangle {
        x: (parent.width - self.width) / 2;
        y: (parent.height - self.height) / 2;
        width: min(360px, parent.width - 40px);
        height: 208px + group-list.height + (root.error == "" ? 0px : 32px);
        background: white; border-radius: UiRadius.surface;
        border-width: 1px; border-color: #b2b2b2;
        TouchArea {}
        Text {
            x: 18px; y: 16px; height: 24px;
            text: GalleryStrings.tr("修改分组", "Edit groups", "Изменить группы");
            color: #24272d; font-size: 17px; font-weight: 600;
        }
        Text {
            x: 18px; y: 47px; width: parent.width - 36px; height: 18px;
            text: root.device-name; color: #30343b; font-size: 12px; overflow: elide;
        }
        Text {
            x: 18px; y: 67px; width: parent.width - 36px; height: 16px;
            text: "ID  " + root.device-id; color: #858c97; font-size: 11px;
        }
        group-list := Rectangle {
            x: 18px; y: 95px; width: parent.width - 36px;
            height: min(5, max(1, root.options.length)) * 32px + 2px;
            background: #fbfcfd; border-width: 1px; border-color: #e1e5eb; border-radius: UiRadius.surface;
            clip: true;
            ScrollView {
                x: 1px; y: 1px; width: parent.width - 2px; height: parent.height - 2px;
                viewport-width: self.width;
                VerticalLayout {
                    spacing: 0px;
                    for option[index] in root.options: Rectangle {
                        height: 32px;
                        background: row-touch.has-hover ? #eef4fc : transparent;
                        ImGuiCheckBox {
                            x: 9px; y: 6px; width: 20px; height: 20px;
                            checked: option.selected && (option.name != "" || root.new-group == "");
                        }
                        Text {
                            x: 39px; width: parent.width - 48px; height: parent.height;
                            text: option.name == "" ? GalleryStrings.tr("未分组", "Ungrouped", "Без группы") : option.name;
                            color: #30343b; font-size: 12px; overflow: elide; vertical-alignment: center;
                        }
                        row-touch := TouchArea { clicked => { root.toggle-group(option.name); } }
                    }
                }
            }
            // Keep row hover backgrounds inside the rounded list on every renderer.
            Rectangle {
                x: -UiRadius.surface; y: -UiRadius.surface;
                width: parent.width + 2 * UiRadius.surface;
                height: parent.height + 2 * UiRadius.surface;
                border-width: UiRadius.surface; border-radius: 2 * UiRadius.surface;
                border-color: white;
            }
            Rectangle {
                width: parent.width; height: parent.height;
                border-width: 1px; border-radius: UiRadius.surface;
                border-color: #e1e5eb;
            }
        }
        RoundedLineEdit {
            x: 18px; y: group-list.y + group-list.height + 12px;
            width: parent.width - 36px; height: 30px;
            text <=> root.new-group;
            placeholder-text: GalleryStrings.tr("新建分组（可选）", "New group (optional)", "Новая группа (необязательно)");
        }
        if root.error != "": Text {
            x: 18px; y: group-list.y + group-list.height + 48px;
            width: parent.width - 36px; height: 32px;
            text: root.error; color: #c53e3e; font-size: 11px; wrap: word-wrap;
        }
        HorizontalLayout {
            x: 18px; y: parent.height - 46px; width: parent.width - 36px; height: 28px;
            spacing: 10px;
            Rectangle { horizontal-stretch: 1; }
            CompactButton { width: 72px; height: 28px; text: GalleryStrings.tr("取消", "Cancel", "Отмена"); clicked => { root.cancel(); } }
            CompactButton { width: 88px; height: 28px; primary: true; text: GalleryStrings.tr("保存", "Save", "Сохранить"); clicked => { root.save(root.new-group); } }
        }
    }
}