import QtQuick 2.13
import QtQml 2.13
import QtQuick.Layouts 1.13
import QtQuick.Controls 2.13

import "../"
import "../aCommon"

Item {
    id: root
    height: 38
    width: 400

    property var listOfObj: []
    property var options: ["High", "Low", "Medium"]
    property var currentText: options[currentIndex]
    property int currentIndex: 0

    property var stateOfComponent: Setting.Enable

    Rectangle {

        id: idBackGround
        anchors.fill: parent
        radius: Setting.mediumRadius
        color: "transparent"
        border.color: Colors.tertiaryEnable
        border.width: 1
        clip: true

        Text {
            leftPadding: 10
            anchors.fill: parent
            text: currentText
            font: Fonts.h5
            color: Colors.tertiaryEnable
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: Text.AlignVCenter
        }

        UImage {
            width: 16
            height: 16
            anchors.right: parent.right
            anchors.rightMargin: 10
            anchors.verticalCenter: parent.verticalCenter
            color: Colors.tertiaryEnable
            source: "qrc:/SepantaUiKit/icons/downArrow.svg"
        }
        MouseArea {
            anchors.fill: parent
            onPressed: {

                idPopup.open()
            }
        }
    }

    Popup {
        id: idPopup
        width: parent.width
        height: 500
        y: 0
        contentItem: ListView {
            implicitHeight: idBackGround.height
            model: options
        }

        background: Rectangle {
            radius: Setting.mediumRadius
            color: "transparent"
            border.color: Colors.tertiaryEnable
            border.width: 1
            clip: true
        }
    }

    // ComboBox {
    //     id: control
    //     anchors.fill: parent
    //     model: options
    //     font: Fonts.h5

    //     popup: Popup {
    //         y: control.height - 1
    //         width: control.width
    //         implicitHeight: contentItem.implicitHeight
    //         padding: 1

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

    //         background: Rectangle {
    //             anchors.fill: parent
    //             radius: Setting.mediumRadius
    //             color: "transparent"
    //             border.color: Colors.tertiaryEnable
    //             border.width: 1
    //             clip: true
    //         }
    //     }

    // }
}