import QtQuick 2.9
import QtMultimedia 5.8
import QtQuick.Window 2.2
import QtQuick.Controls 2.2
import QtQuick.Layouts 1.3
import com.itsblue.speedclimbingstopwatch 1.0


Popup {
    id: root
    x: startButt.x
    y: startButt.y
    width: startButt.width
    height: startButt.height
    modal: true
    dim: false

    enter: Transition {
        NumberAnimation { properties: "scale"; from: 0; to: 1; duration: 300; easing.type: Easing.Linear }
    }

    exit: Transition {
        NumberAnimation { properties: "scale"; from: 1; to: 0; duration: 300; easing.type: Easing.Linear }
    }

    background: Rectangle {
        radius: width * 0.5
        color: "white"
        border.color: "grey"
        border.width: 1

        Label {
            id: head_text
            text: profiles_stack.currentItem.title
            font.pixelSize: headlineUnderline.width * 0.1
            anchors {
                horizontalCenter: parent.horizontalCenter
                top: parent.top
                topMargin: headlineUnderline.anchors.topMargin / 2 - height / 2
            }
        }

        Rectangle {
            id: headlineUnderline
            height: 1
            width: parent.width
            color: "grey"
            anchors {
                top: parent.top
                left: parent.left
                right: parent.right
                topMargin: parent.height * 0.15
                rightMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
                leftMargin: parent.radius - Math.sqrt(Math.pow(parent.radius,2)-Math.pow(parent.radius-anchors.topMargin,2))
            }
        }

        ProgressCircle {
            id: prog
            property string text: "connecting.."
            anchors.fill: parent
            opacity: 0
            lineWidth: 5

            arcBegin: 0
            arcEnd: 0

            Timer {
                id: prog_refresh
                running: false
                interval: 1
                repeat: true
                onTriggered: {
                    prog.arcEnd = 360 * ( _cppBuzzerConn.get("connection_progress") / 100 )
                }
            }

            Label {
                id: content
                text: parent.text
                anchors.centerIn: parent
                font.pixelSize: parent.width * 0.1

            }
        }

        Button {
            id: head_back

            anchors {
                left: parent.left
                leftMargin: parent.width * 0.17
                top:parent.top
                topMargin: parent.height * 0.01
            }
            height: parent.height * 0.13
            width:height

            background: Rectangle {
                radius: width * 0.5
                color: head_back.pressed ? "lightgrey":"white"
                border.color: "grey"
                border.width: 1
                Image {
                    anchors.fill: parent
                    anchors.margins: parent.width * 0.2
                    source: "qrc:/graphics/icons/back_black.png"
                }
            }

            onClicked: profiles_stack.depth > 1 ? profiles_stack.pop():root.close()

            Behavior on opacity {
                NumberAnimation {
                    duration: 100
                }
            }
        }

        Button {
            id: head_add

            anchors {
                right: parent.right
                rightMargin: parent.width * 0.17
                top:parent.top
                topMargin: parent.height * 0.01
            }
            height: parent.height * 0.13
            width:height

            background: Rectangle {
                radius: width * 0.5
                color: parent.pressed ? "lightgrey":"white"
                border.color: "grey"
                border.width: 1
                Label {
                    anchors {
                        top: parent.top
                        topMargin: parent.height/2 - height*0.55
                        left: parent.left
                        leftMargin: parent.width/2 - width/2
                    }
                    opacity:  profiles_stack.currentItem.secondButt === "add" ? 1:0
                    text: "+"
                    font.pixelSize: parent.height
                }

                Image {
                    anchors.fill: parent
                    anchors.margins: parent.width * 0.2
                    source: "qrc:/graphics/icons/ok_black.png"
                    opacity: profiles_stack.currentItem.secondButt === "ok" ? 1:0
                }
            }

            onClicked: {
                switch(profiles_stack.currentItem.secondButt){
                case "add":
                    profiles_stack.push(addProfileComp)
                    break
                case "ok":
                    if(profileModel.model.append(profiles_stack.currentItem.newProfileName)){
                        profiles_stack.pop()
                    }
                }

            }

            Behavior on opacity {
                NumberAnimation {
                    duration: 100
                }
            }
        }
    }

    ListView{
        id: profileModel
        model: SqlProfileModel{}
    }

    StackView {
        id: profiles_stack
        property int text_pixelSize: headlineUnderline.width * 0.08
        initialItem: profileListComp
        width: headlineUnderline.width



        anchors  {
            top: parent.top
            left: parent.left
            leftMargin: ( parent.width - headlineUnderline.width ) / 2
            topMargin: headlineUnderline.anchors.topMargin * 1.2
            bottom: parent.bottom
            bottomMargin: headlineUnderline.anchors.topMargin
        }

        Behavior on opacity {
            NumberAnimation {duration: 200}
        }

        /*-----List of all profiles-----*/
        Component {
            id: profileListComp
            Tumbler {
                id: control
                property string title: "profiles"
                property string secondButt: "add"
                model: SqlProfileModel{}
                delegate: Text {
                    text: model.name
                    color: control.visualFocus ? control.palette.highlight : control.palette.text
                    font: control.font
                    opacity: 1.0 - Math.abs(Tumbler.displacement) / (control.visibleItemCount / 2)
                    horizontalAlignment: Text.AlignHCenter
                    verticalAlignment: Text.AlignVCenter
                }
            }

            /*
            ListView {
                id: profileList
                model: profileModel.model
                property string title: "profiles"
                property string secondButt: "add"

                Label {
                    opacity: profileList.count <= 0 ? 1:0
                    text: "add a profile by clicking +"
                    anchors.centerIn: parent
                    font.pixelSize: parent.width*0.06
                    Behavior on opacity {
                        NumberAnimation {
                            duration: 200
                            easing.type: Easing.InOutQuad
                        }
                    }
                }

                delegate: SwipeDelegate {
                    id: swipeDelegate
                    text: model.name
                    width: profileList.width

                    font.pixelSize: profiles_stack.text_pixelSize

                    function remove() {
                        removeAnim.start()
                    }

                    background: Rectangle {
                        color: pressed ? Qt.darker("white", 1.1):"white"

                    }

                    Rectangle {
                        color: "grey"
                        height: 1
                        width: parent.width * 0.9
                        visible: index > 0
                        anchors {
                            horizontalCenter: parent.horizontalCenter
                            top: parent.top
                        }
                    }

                    NumberAnimation {
                        id: removeAnim
                        target: swipeDelegate
                        property: "height"
                        to: 0
                        easing.type: Easing.InOutQuad
                        onStopped: profileModel.model.remove(index)
                    }

                    Component {
                        id: component

                        Rectangle {
                            color: mouseAr.pressed ? "#333" : "#444"
                            width: parent.width
                            height: parent.height
                            clip: true


                            Label {
                                text: qsTr("Press me!")
                                color: "#21be2b"
                                anchors.centerIn: parent
                            }

                            MouseArea {
                                id: mouseAr
                                anchors.fill: parent
                                onClicked: {
                                    swipeDelegate.remove()
                                }
                            }
                        }
                    }

                    swipe.transition: Transition {
                        SmoothedAnimation { velocity: 3; easing.type: Easing.InOutCubic }
                    }

                    swipe.left: Row {
                        anchors.left: parent.left
                        height: parent.height

                        Label {
                            id: moveLabel
                            text: qsTr("Move")
                            color: "white"
                            verticalAlignment: Label.AlignVCenter
                            padding: 12
                            height: parent.height

                            SwipeDelegate.onClicked: console.log("Moving...")

                            background: Rectangle {
                                color: moveLabel.SwipeDelegate.pressed ? Qt.darker("#ffbf47", 1.1) : "#ffbf47"
                            }
                        }
                        Label {
                            id: deleteLabel
                            text: qsTr("Delete")
                            color: "white"
                            verticalAlignment: Label.AlignVCenter
                            padding: 12
                            height: parent.height

                            SwipeDelegate.onClicked: console.log("Deleting...")

                            background: Rectangle {
                                color: deleteLabel.SwipeDelegate.pressed ? Qt.darker("tomato", 1.1) : "tomato"
                            }
                        }
                    }
                }
                ScrollIndicator.vertical: ScrollIndicator { }
            }
            */
        }

        /*-----Option to add a profile-----*/
        Component {
            id: addProfileComp
            Column {
                property string title: "add profile"
                property string secondButt: "ok"
                property string newProfileName: ""
                TextField {
                    width: parent.width
                    placeholderText: "name"
                    onTextChanged: {
                        parent.newProfileName = text
                    }
                    Keys.onReturnPressed: {
                        if(profileModel.model.append(text)){
                            profiles_stack.pop()
                        }
                    }
                }
            }
        }

        /*-----Custom animations-----*/

        pushEnter: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
        pushExit: Transition {
            NumberAnimation {
                property: "opacity"
                from: 1
                to: 0
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }

        popExit: Transition {
            NumberAnimation {
                property: "opacity"
                from: 1
                to: 0
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
        popEnter: Transition {
            NumberAnimation {
                property: "opacity"
                from: 0
                to: 1
                duration: 200
                easing.type: Easing.InOutQuad
            }
        }
    }
}