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
    }

    delegate: T.ItemDelegate {
        width: control.width
        height: implicitContentHeight + topPadding + bottomPadding
        padding: Dimensions.s
        leftPadding: control.leftPadding
        contentItem: Label {
            text: control.textRole ? model[control.textRole] : modelData
            color: Colors.foreground
            elide: Text.ElideRight
            verticalAlignment: Text.AlignVCenter
        }
        highlighted: control.highlightedIndex === index
    }
    indicator: Label {
        x: control.width - width
        height: control.height
        width: contentWidth + Dimensions.s * 2
        text: "▼"
        verticalAlignment: Text.AlignVCenter
        horizontalAlignment: Text.AlignHCenter
        padding: Dimensions.s

        background:  Rectangle {
            anchors.fill: parent
            color: Colors.primary
            topRightRadius: Dimensions.radius
            bottomRightRadius: Dimensions.radius
            border.color: Colors.interactive
        }
    }

    popup: T.Popup {
        y: control.height
        z: 2
        width: control.width
        contentItem: ListView {
            clip: true
            implicitHeight: contentHeight
            model: control.popup.visible ? control.delegateModel : null
            currentIndex: control.highlightedIndex

            highlight: Rectangle {
                color: Colors.primary
                opacity: Colors.highlightOpacity
            }

            ScrollIndicator.vertical: ScrollIndicator {}
        }

        background: Rectangle {
            color: Colors.mantle
            border.color: Colors.interactive
            radius: Dimensions.radius
        }
    }
}