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
            ListView {
                id: profileList
                model: profileModel.model
                property string title: "profiles"
                property string secondButt: "add"
                Label {
                    visible: profileList.count <= 0
                    text: "add a profile by clicking +"
                    anchors.centerIn: parent
                    font.pixelSize: parent.width*0.06
                }

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

                    width: profileList.width
                    Component {
                        id: component

                        Rectangle {
                            color: mouse.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: {
                                    model.remove(index)
                                }
                            }
                        }
                    }

                    swipe.left: component
                    swipe.right: component
                }
                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
                    }
                }
            }
        }

        /*-----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
            }
        }
    }
}