// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial


import { Palette, Typography, Elevation, Icons } from "styling.slint";
import { ListItem } from "components.slint";
import { ComboBoxBase } from "../common/combobox-base.slint";

export component ComboBox {
    callback selected <=> i-base.selected;

    in property <[string]> model <=> i-base.model;
    in property <bool> enabled <=> i-base.enabled;
    out property <bool> has-focus <=> i-base.has-focus;
    in-out property <int> current-index <=> i-base.current-index;
    in-out property <string> current-value <=> i-base.current-value;

    min-width: max(160px, i-layout.min-width);
    min-height: max(22px, i-layout.min-height);
    horizontal-stretch: 1;
    vertical-stretch: 0;
    forward-focus: i-base;

    i-base := ComboBoxBase {
        width: 100%;
        height: 100%;

        show-popup => {
            i-popup.show();
        }
    }

    i-background := Rectangle {
        width: 100%;
        height: 100%;
        border-radius: 4px;
        border-width: 1px;
        border-color: Palette.outline;
    }

    i-layout := HorizontalLayout {
        padding-left: 16px;
        padding-right: 12px;
        spacing: 16px;

        i-label := Text {
            text <=> root.current-value;
            color: Palette.on-surface;
            vertical-alignment: center;
            // FIXME after Roboto font can be loaded
            // font-family: Typography.body-large.font;
            font-size: Typography.body-large.font-size;
            font-weight: Typography.body-large.font-weight;
        }

        i-icon := Image {
            width: 24px;
            height: 24px;
            y: (parent.height - self.height) / 2;
            source: Icons.expand-more;
            colorize: Palette.on-surface;
        }
    }

    i-popup := PopupWindow {
        x: 0;
        y: root.height;
        width: root.width;

        i-popup-container := Rectangle {
            background: Palette.surface;
            drop-shadow-color: Palette.shadow;
            drop-shadow-blur: Elevation.level2;
            drop-shadow-offset-y: 1px;
            border-radius: 4px;
        }

        VerticalLayout {
            for value[index] in root.model: ListItem {
                text: value;
                selected: index == root.current-index;

                clicked => {
                    i-base.select(index);
                }
            }
        }
    }

    states [
        disabled when !root.enabled : {
            i-background.border-color: Palette.on-surface;
            i-background.opacity: 0.38;
            i-label.opacity: 0.38;
            i-icon.opacity: 0.38;
        }
        focused when root.has-focus : {
            i-background.border-width: 2px;
            i-background.border-color: Palette.primary;
            i-label.color: Palette.primary;
            i-icon.colorize: Palette.primary;
        }
    ]
}