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

T.ComboBox {
    id: control

    font: Typography.body
    implicitHeight: background.height
    padding: Dimensions.m

    background: Rectangle {
        border.color: Colors.interactive
        border.width: 1
        color: Colors.mantle
        height: 47
        radius: Dimensions.radius
    }
    contentItem: T.TextField {
        autoScroll: control.editable
        color: Colors.foreground
        enabled: control.editable
        font: Typography.body
        inputMethodHints: control.inputMethodHints
        readOnly: control.down
        selectByMouse: control.selectTextByMouse
        text: control.editable ? control.editText : control.displayText
        validator: control.validator
    }
    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: Label {
        height: control.height
        horizontalAlignment: Text.AlignHCenter
        padding: Dimensions.s
        text: "▼"
        verticalAlignment: Text.AlignVCenter
        width: contentWidth + Dimensions.s * 2
        x: control.width - width

        background: Rectangle {
            anchors.fill: parent
            border.color: Colors.interactive
            bottomRightRadius: Dimensions.radius
            color: Colors.primary
            topRightRadius: Dimensions.radius
        }
    }
    popup: T.Popup {
        width: control.width
        height: Math.min(contentItem.implicitHeight + 2, control.Window.height - topMargin - bottomMargin)
        topMargin: 6
        bottomMargin: 6
        padding: 1

        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
            }
        }
    }
}