import QtQuick
import QtQuick.Layouts 2.15
import QtQuick.Controls 2.15

Window {
    id: window
    width: 1280
    height: 720
    visible: true
    flags: Qt.Window
    title: qsTr("Hello World")

    Image {
        id: image
        opacity: 0.296
        visible: true
        anchors.fill: parent
        horizontalAlignment: Image.AlignHCenter
        verticalAlignment: Image.AlignVCenter
        source: "images/GovuztTW8AAHqBf.jpeg"
        focus: false
        activeFocusOnTab: false
        state: ""
        layer.enabled: false
        antialiasing: false
        clip: false
        transformOrigin: Item.Center
        scale: 1
        mirror: false
        mipmap: false
        cache: true
        autoTransform: true
        asynchronous: false
        sourceSize.height: 0
        sourceSize.width: 0
        fillMode: Image.Stretch
    }

    Button {
        id: button
        x: 440
        y: 105
        width: 335
        height: 170
        hoverEnabled: false
        anchors.centerIn: parent
        opacity: 1
        background: Image {
            id: buttonImage
            source: "images/Play_Button/Play_Active.svg"
        }

        Connections {
            target: button
            function onPressed() { buttonImage.source = "images/Play_Button/Play_pressed.svg" }
        }

        Connections {
            target: button
            function onReleased() { buttonImage.source = "images/Play_Button/Play_Active.svg" }
        }
    }

    ComboBox {
        id: profileBox
        width: 117
        height: 42
        anchors.left: button.right
        anchors.bottom: button.top
        anchors.leftMargin: -335
        anchors.bottomMargin: -218
        editable: false
        leftPadding: -30

        model: ["First","Second","Third"]


        delegate: ItemDelegate {
            id: delegate

            required property var model
            required property int index

            width: profileBox.width
            contentItem: Text {
                text: delegate.model[profileBox.textRole]
                color: "#ffffff"
                font: profileBox.font
                elide: Text.ElideRight
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter


            }
            highlighted: profileBox.highlightedIndex === index
            background: Rectangle{
                color: delegate.highlighted ? "#91B315" : "#232323"
                radius: 5

            }
        }
        indicator: Image {
            id: dropDownArrow
            visible: true
            horizontalAlignment: Image.AlignRight
            anchors.leftMargin: 10
            anchors.left: parent.left
            anchors.verticalCenter: parent.verticalCenter
            source: profileBox.down ? "images/Profile_Box/Asset_23.svg" : "images/Profile_Box/Asset_24.svg"
            transformOrigin: Item.Center
            sourceSize.height: 10
            sourceSize.width: 10
            fillMode: Image.PreserveAspectFit
            autoTransform: true
            width: 10
            height: 10
        }

        /*indicator: Canvas {
            id: canvas
            y: profileBox.topPadding + (profileBox.availableHeight - height) / 2
            width: 12
            height: 8
            anchors.left: parent.left
            anchors.leftMargin: 117
            contextType: "2d"

            onPaint: {
                context.reset();
                context.moveTo(0, 0);
                context.lineTo(width, 0);
                context.lineTo(width / 2, height);
                context.closePath();
                context.fillStyle = profileBox.pressed ? "#ffffff" : "#232323";
                context.fill();
            }
        }*/

        Connections {
            target: profileBox
            function onActivated() { canvas.requestPaint(); }
        }

        Connections {
            target: profileBox
            function onActivated() { dropDownArrow.visible = true }
        }
        contentItem: Text {
            leftPadding: 0
            rightPadding: profileBox.indicator.width + profileBox.spacing

            text: profileBox.displayText
            font: profileBox.font
            color: profileBox.pressed ? "#ffffff" : "#ffffff"
            verticalAlignment: Text.AlignVCenter
            elide: Text.ElideRight
            horizontalAlignment: Text.AlignHCenter

        }

        background: Rectangle {
            implicitWidth: 120
            implicitHeight: 40
            border.color: profileBox.pressed ? "#ffffff" : "#232323"
            border.width: profileBox.visualFocus ? 2 : 1
            color: profileBox.down ? "#91B315" : "#232323"
            radius: 6
        }

        popup: Popup {
            y: profileBox.height - 1
            width: profileBox.width
            height: Math.min(contentItem.implicitHeight, profileBox.Window.height - topMargin - bottomMargin)
            padding: 1

            contentItem: ListView {
                rotation: 0
                clip: true
                implicitHeight: contentHeight
                model: profileBox.popup.visible ? profileBox.delegateModel : null
                currentIndex: profileBox.highlightedIndex



                ScrollIndicator.vertical: ScrollIndicator {
                    parent: ListView.parent
                    anchors.top: ListView.top
                    anchors.left: ListView.right
                    anchors.bottom: ListView.bottom

                    /*background: Rectangle{
                        opacity: 0.5
                        color: "#91B315"
                    }*/

                }
            }

            background: Rectangle {
                border.color: "#232323"
                color: "#232323"
                radius: 6
            }
        }

    }

    ComboBox {
        id: versionBox
        width: 210
        height: 42
        anchors.right: button.right
        anchors.bottom: button.top
        anchors.bottomMargin: -218
        popup: Popup {
            y: versionBox.height - 1
            width: versionBox.width
            height: Math.min(contentItem.implicitHeight, versionBox.Window.height - topMargin - bottomMargin)
            padding: 1
            contentItem: ListView {
                rotation: 0
                model: versionBox.popup.visible ? versionBox.delegateModel : null
                implicitHeight: contentHeight
                currentIndex: versionBox.highlightedIndex
                clip: true
                ScrollIndicator.vertical: ScrollIndicator {
                    anchors.left: ListView.right
                    anchors.top: ListView.top
                    anchors.bottom: ListView.bottom
                    parent: ListView.parent
                }
            }
            background: Rectangle {
                color: "#232323"
                radius: 6
                border.color: "#232323"
            }
        }
        model: ["Version 1","Version 2","Version 3"]
        leftPadding: -30
        indicator: Image {
            id: dropDownArrow1
            width: 10
            height: 10
            visible: true
            anchors.verticalCenter: parent.verticalCenter
            anchors.left: parent.left
            anchors.leftMargin: 10
            horizontalAlignment: Image.AlignRight
            source: versionBox.down ? "images/Profile_Box/Asset_23.svg" : "images/Profile_Box/Asset_24.svg"
            transformOrigin: Item.Center
            sourceSize.width: 10
            sourceSize.height: 10
            fillMode: Image.PreserveAspectFit
            autoTransform: true
        }
        editable: false
        delegate: ItemDelegate {
            id: delegate1
            width: versionBox.width
            required property var model
            required property int index
            highlighted: versionBox.highlightedIndex === index
            contentItem: Text {
                color: "#ffffff"
                text: delegate1.model[versionBox.textRole]
                elide: Text.ElideRight
                horizontalAlignment: Text.AlignLeft
                verticalAlignment: Text.AlignVCenter
                font: versionBox.font
            }
            background: Rectangle {
                color: delegate1.highlighted ? "#91B315" : "#232323"
                radius: 5
            }
        }
        Connections {
            target: versionBox
            function onActivated() { canvas.requestPaint(); }
        }

        Connections {
            target: versionBox
            function onActivated() { dropDownArrow1.visible = true }
        }
        contentItem: Text {
            color: versionBox.pressed ? "#ffffff" : "#ffffff"
            text: versionBox.displayText
            elide: Text.ElideRight
            horizontalAlignment: Text.AlignLeft
            verticalAlignment: Text.AlignVCenter
            rightPadding: versionBox.indicator.width + versionBox.spacing
            leftPadding: 56
            font: versionBox.font
        }
        background: Rectangle {
            color: versionBox.down ? "#91B315" : "#232323"
            radius: 6
            border.color: versionBox.pressed ? "#ffffff" : "#232323"
            border.width: versionBox.visualFocus ? 2 : 1
            implicitWidth: 120
            implicitHeight: 40
        }
    }

}