import QtQuick 2.15
import QtQuick.Controls 2.15 as QQC2
import "fauxcyrillic.js" as Faux


// Selettore a tendina etichettato in stile costruttivista.
Column {

    FontLoader {
        id: themeFont
        source: "assets/fonts/RussoOne-Regular.ttf"
    }

    id: comboWrap
    property string label: ""
    property alias model: combo.model
    property alias textRole: combo.textRole
    property alias currentIndex: combo.currentIndex
    property alias currentText: combo.currentText
    signal activated(int index)
    width: parent.width
    spacing: 4

    Text {
        text: Faux.apply(comboWrap.label)
        color: "#f0dfba"
        font.family: themeFont.name
        font.pixelSize: 12
        font.bold: true
        font.letterSpacing: 2
    }

    QQC2.ComboBox {
        id: combo
        width: comboWrap.width
        height: 40
        font.family: themeFont.name
        font.pixelSize: 16
        font.bold: true
        onActivated: comboWrap.activated(index)

        background: Rectangle {
            color: "#cc101012"
            border.color: combo.hovered ? "#d83a28" : "#66f0dfba"
            border.width: 1
        }

        contentItem: Text {
            leftPadding: 10
            rightPadding: 10
            text: combo.displayText
            color: "#f0dfba"
            font: combo.font
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
        }

        indicator: Item { width: 0; height: 0 }

        delegate: QQC2.ItemDelegate {
            width: combo.width
            height: 34
            highlighted: combo.highlightedIndex === index

            contentItem: Text {
                text: combo.textRole ? model[combo.textRole] : modelData
                color: combo.highlightedIndex === index ? "#f6f1e5" : "#f0dfba"
                font: combo.font
                verticalAlignment: Text.AlignVCenter
                leftPadding: 10
            }

            background: Rectangle {
                color: combo.highlightedIndex === index ? "#d83a28" : "#e6101012"
            }
        }

        popup: QQC2.Popup {
            y: combo.height + 2
            width: combo.width
            implicitHeight: contentItem.implicitHeight
            padding: 1

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: combo.popup.visible ? combo.delegateModel : null
                currentIndex: combo.highlightedIndex
            }

            background: Rectangle {
                color: "#e6101012"
                border.color: "#66f0dfba"
                border.width: 1
            }
        }
    }
}