import { Theme, AnimationPresets } from "../theme.slint";
import { IconChevronDown } from "icons.slint";

export struct DropdownItem {
    label: string,
    value: string,
    disabled: bool,
}

/// NeonDropdown — menú desplegable contextual con fade-in animation
export component NeonDropdown {
    in property <string> label: "Select...";
    in property <[DropdownItem]> items;
    in-out property <int> selected-index: -1;
    in property <bool> enabled: true;
    callback selected(int);

    property <bool> is-open: false;
    property <string> display-text: root.selected-index >= 0 ? root.items[root.selected-index].label : root.label;

    VerticalLayout {
        spacing: 2px;
        // Trigger button
        Rectangle {
            min-height: 36px;
            min-width: 120px;
            background: root.enabled ? (trigger.has-hover ? Theme.bg-hover : Theme.bg-surface) : Theme.bg-elevated;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: root.is-open ? Theme.border-focus : Theme.border;
            opacity: root.enabled ? 1.0 : 0.4;
            HorizontalLayout {
                padding-left: Theme.sp-3;
                padding-right: Theme.sp-2;
                spacing: Theme.sp-2;
                alignment: start;
                Text {
                    text: root.display-text;
                    font-size: Theme.font-base;
                    color: root.selected-index >= 0 ? (root.enabled ? Theme.text-primary : Theme.text-dim) : Theme.text-dim;
                    horizontal-stretch: 1;
                    vertical-alignment: center;
                }
                Rectangle {
                    width: 16px; height: 16px;
                    IconChevronDown { color: root.enabled ? Theme.text-muted : Theme.text-dim; size: 12px; x: 2px; y: 2px; }
                }
            }
            trigger := TouchArea {
                clicked => { if (root.enabled) { root.is-open = !root.is-open; } }
                enabled: root.enabled;
                mouse-cursor: root.enabled ? MouseCursor.pointer : MouseCursor.default;
            }
        }
        // Popup menu — overlay with fade-in
        Rectangle {
            visible: root.is-open;
            opacity: root.is-open ? 1.0 : 0.0;
            animate opacity { duration: AnimationPresets.scale-in; }
            width: 100%;
            border-radius: Theme.radius-md;
            border-width: 1px;
            border-color: Theme.border;
            background: Theme.bg-elevated;
            VerticalLayout {
                padding: Theme.sp-1;
                spacing: 2px;
                for item[idx] in root.items : Rectangle {
                    min-height: 32px;
                    background: idx == root.selected-index ? Theme.bg-selected : (mi.has-hover ? Theme.bg-hover : transparent);
                    border-radius: Theme.radius-sm;
                    HorizontalLayout {
                        padding-left: Theme.sp-3;
                        padding-right: Theme.sp-3;
                        alignment: start;
                        Text {
                            text: item.label;
                            font-size: Theme.font-sm;
                            color: item.disabled ? Theme.text-dim : (idx == root.selected-index ? Theme.neon-cyan : Theme.text-primary);
                            opacity: item.disabled ? 0.4 : 1.0;
                            horizontal-stretch: 1;
                            vertical-alignment: center;
                        }
                    }
                    mi := TouchArea {
                        enabled: !item.disabled && root.enabled;
                        clicked => {
                            root.selected-index = idx;
                            root.selected(idx);
                            root.is-open = false;
                        }
                        mouse-cursor: MouseCursor.pointer;
                    }
                }
            }
        }
    }
}
