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: options_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.025
            }
            height: parent.height * 0.1
            width:height

            background: Rectangle {
                radius: width * 0.5
                color: "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: {
                 options_stack.depth > 1 ? options_stack.pop():root.close()
            }

            onPressedChanged: {
                if(pressed){
                    background.color = "lightgrey"
                }
                else {
                    background.color = "white"
                }
            }
            Behavior on opacity {
                NumberAnimation {
                    duration: 100
                }
            }
        }
    }

    ListView {
        id: profileList
        anchors  {
            top: parent.top
            left: parent.left
            leftMargin: ( parent.width - headlineUnderline.width ) / 2
            right: parent.right
            rightMargin: headlineUnderline.anchors.rightMargin
            topMargin: headlineUnderline.anchors.topMargin
            bottom: parent.bottom
        }
        model:SqlProfileModel{}

        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 { }
    }
}