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: idContentItem.currentIndex

    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: {
                if (idPopup.visible)
                    idPopup.close()
                else
                    idPopup.open()
            }
        }
    }

    Popup {
        id: idPopup
        width: parent.width
        y: idBackGround.height
        implicitHeight: contentItem.implicitHeight
        padding: 0
        closePolicy: Popup.CloseOnPressOutsideParent
        contentItem: ListView {
            id: idContentItem
            implicitHeight: contentHeight
            width: parent.width
            model: options
            currentIndex: 0
            delegate: Item {
                id: idDelegate
                width: parent.width
                height: idBackGround.height
                Text {
                    leftPadding: 10
                    anchors.fill: parent
                    text: modelData
                    font: Fonts.h5
                    color: Colors.tertiaryEnable
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignVCenter
                }
                MouseArea {
                    anchors.fill: parent
                    onClicked: {
                        currentIndex = index
                        idPopup.close()
                    }
                }
            }
        }
        background: Rectangle {
            anchors.fill: parent
            radius: Setting.mediumRadius
            color: "transparent"
            border.color: Colors.tertiaryEnable
            border.width: 1
            clip: true
        }
    }
}