import QtQuick
import QtQuick.Templates as T
import QtQuick.Controls
import QtQuick.Controls.impl

T.ComboBox {
    id: control

    font: Typography.body
    implicitHeight: implicitContentHeight + topInset + bottomInset

    background: Rectangle {
        border.color: Colors.interactive
        border.width: 1
        color: Colors.mantle
        height: parent.height
        radius: Dimensions.radius
        width: parent.width
    }
    contentItem: T.TextField {
        autoScroll: control.editable
        color: Colors.foreground
        enabled: control.editable
        font: Typography.body
        implicitHeight: Typography.body.pointSize + topPadding + bottomPadding
        inputMethodHints: control.inputMethodHints
        padding: Dimensions.m
        readOnly: control.down
        selectByMouse: control.selectTextByMouse
        text: control.editable ? control.editText : control.displayText
        validator: control.validator
        width: control.width - indicator.width
    }
    delegate: MenuItem {
        id: menuItem

        required property int index
        required property var model

        highlighted: control.highlightedIndex === index
        hoverEnabled: control.hoverEnabled
        text: model[control.textRole]
        width: control.width

        background: Rectangle {
            color: menuItem.down || menuItem.highlighted ? Colors.primary : "transparent"
            height: menuItem.height
            width: menuItem.width
        }
    }
    indicator: Rectangle {
        id: indicator

        border.color: Colors.interactive
        bottomRightRadius: Dimensions.radius
        color: Colors.primary
        height: control.height
        topRightRadius: Dimensions.radius
        width: 20 + Dimensions.s * 2
        x: control.width - width
        y: 0
        z: 2

        IconLabel {
            anchors.fill: parent
            bottomPadding: Dimensions.s
            icon.color: Colors.foreground
            icon.source: "qrc:/images/ChevronDown.svg"
            leftPadding: Dimensions.s
            rightPadding: Dimensions.s
            topPadding: Dimensions.s
        }
        MouseArea {
            anchors.fill: parent
            cursorShape: Qt.PointingHandCursor

            onPressed: () => {
                control.popup.visible = true;
                control.popup.focus = true
            }
        }
    }
    popup: T.Popup {
        bottomMargin: 6
        height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
        padding: 1
        topMargin: 6
        width: control.width

        background: Rectangle {
            border.color: Colors.interactive
            color: Colors.mantle
            radius: Dimensions.radius
        }
        contentItem: ListView {
            clip: true
            currentIndex: control.highlightedIndex
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null

            T.ScrollBar.vertical: ScrollBar {
            }
            highlight: Rectangle {
                color: Colors.primary
                opacity: Colors.highlightOpacity
            }
        }
    }
}