import QtQuick 2.12
import QtQuick.Controls 2.12


ComboBox {
    id: formulaire_combobox

    property bool groupe: false
    property bool actif: true
    property string prefixe_repos: ""
    property string suffixe_repos: ""

    //=============================================================================================
    // Partie au repos :
    //=============================================================================================

    anchors {
        right: parent.right
        leftMargin: 20
        verticalCenter: parent.verticalCenter
    }
    height: parent.height - 10              // Nb : la Width est donnée au moment de l'appel de Combobox
    textRole: "texte"

    //---------------------------------------------------------------------------------------------
    // Petite image dans la version repos :
    indicator: Image {
        id: icone_combo_box
        source: "/images/down.png"
        sourceSize.height: 15
        anchors {
            verticalCenter: parent.verticalCenter
            right: parent.right
            rightMargin: 20
        }
    }

    //---------------------------------------------------------------------------------------------
    // Texte au repos :
    contentItem: Rectangle {
        color: "transparent"
        anchors.fill: parent

        //-------------------------------------
        // Icone :
        Image {
            source: (formulaire_combobox.currentIndex >= 0) && (formulaire_combobox.model.get(formulaire_combobox.currentIndex).icone !== "")
                ? "/images/" + formulaire_combobox.model.get(formulaire_combobox.currentIndex).icone
                :  ""
            fillMode: Image.PreserveAspectFit
            height: parent.height * 0.6
            anchors {
                verticalCenter: parent.verticalCenter
                left: parent.left
                leftMargin: 10
            }
            visible: (formulaire_combobox.currentIndex >= 0)
                     && (formulaire_combobox.model.get(formulaire_combobox.currentIndex).icone !== "")
        }

        //-------------------------------------
        // Texte :
        Text {
            leftPadding: 10
            rightPadding: formulaire_combobox.indicator.width + formulaire_combobox.spacing
            text: prefixe_repos + formulaire_combobox.currentText + suffixe_repos
            font.pixelSize: 18
            color: couleur_blanc_casse
            wrapMode: Text.Wrap
            anchors.fill: parent
            verticalAlignment: Text.AlignVCenter
            textFormat: Text.RichText
        }
    }

    //---------------------------------------------------------------------------------------------
    // Fond au repos
    background: Rectangle {
        radius: shipheart_rayon_bouton
        color: shipheart_couleur_fond_bouton
    }


    //=============================================================================================
    // Partie dépliée :
    //=============================================================================================

    //---------------------------------------------------------------------------------------------
    // Fond :
    popup: Popup {
        y: formulaire_combobox.height - 1
        width: formulaire_combobox.width
        implicitHeight: contentItem.implicitHeight
        padding: 0

// Note : si une un warning gest émis sur cette ligne, du genre 'ListView: Binding loop detected for property "implicitHeight"', c'est que la hauteur des lignes
// de la comboxbox (lorsqu'elle est ouverte) est trop importante. Une solution est de fixer la hauteur des lignes (cf la ligne commentée (95 environ) ci-dessous)
// L'inconvénient est que toutes les lignes ont alors la même hauteur... Il semble que ce warning ne soit pas grave donc laissé en l'état pour le moment... (02/2023)

        contentItem: ListView {                                     // Listview listant les éléments dépliés
            clip: true
            implicitHeight: contentHeight
            model: formulaire_combobox.popup.visible ? formulaire_combobox.delegateModel : null
            currentIndex: formulaire_combobox.highlightedIndex

            ScrollIndicator.vertical: ScrollIndicator { }           // Scrollbar quand il y a beaucoup d'éléments dépliés
        }

        background: Rectangle {                                     // Fond de la partie dépliée
            color: "transparent"
            radius: shipheart_rayon_bouton
        }
    }

    //---------------------------------------------------------------------------------------------
    // Eléments dépliés :
    delegate: ItemDelegate {

        width: formulaire_combobox.width
height: 50
        enabled: groupe ? false : (actif ? true : false)
        contentItem: Rectangle {
            color: "transparent"
            anchors.fill: parent

            //-------------------------------------
            // Icone :
            Image {
                source: (model.icone !== "")
                    ? "/images/" + model.icone
                    :  ""
                fillMode: Image.PreserveAspectFit
                height: parent.height * 0.6
                anchors {
                    verticalCenter: parent.verticalCenter
                    left: parent.left
                    leftMargin: 10
                }
                visible: (model.icone !== "")
            }

            //-------------------------------------
            // Texte :
            Text {             // Texte des éléments dépliés
                text: model.texte
                color: groupe ? couleur_bleu_koriolan : (actif ? couleur_blanc_casse : couleur_gris_tres_pale_transparent)
                font.pixelSize: 18
                font.weight: groupe ? Font.Bold : Font.Normal
                topPadding: 5
                bottomPadding: 5
                leftPadding: groupe ? 5 : 35
                rightPadding: formulaire_combobox.indicator.width + formulaire_combobox.spacing
                wrapMode: Text.Wrap
                verticalAlignment: Text.AlignVCenter
                textFormat: Text.RichText
anchors.fill: parent
            }
        }
        background: Rectangle {                                     // Fond de chaque entrée dépliée
            border.width: model.erreur ? 2 : 1
            border.color: model.erreur ? couleur_rouge : couleur_gris_fonce
            radius: shipheart_rayon_bouton
            color: (highlightedIndex === index) ? couleur_bleu_koriolan : couleur_gris_tres_fonce

        }
        highlighted: highlightedIndex === index
    }
}