import QtQuick 2.2
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.3

Item {
    ToolBar {
        id: otpTimeout
            anchors.right: parent.right
            anchors.left: parent.left
            ColumnLayout {
                anchors.fill: parent
                RowLayout {
                    id: actionTools
                    Layout.alignment: Qt.AlignRight
                    ToolButton {
                        id: addItem
                        icon.name: "list-add"
                        ToolTip.text: qsTr("Add Item")
                        ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
                        ToolTip.visible: down
                        onClicked: {
                            otpTimeout.parent.parent.changeFrame("additem.qml")
                        }
                    }
                    ToolButton {
                        id: addQRItem
                        icon.name: "insert-image"
                        ToolTip.text: qsTr("Add Item by QR")
                        ToolTip.delay: Qt.styleHints.mousePressAndHoldInterval
                        ToolTip.visible: down
                    }
                }
                ProgressBar {
                    id: timeout
                    Layout.fillWidth: true
                    visible: true
                }
                Timer {
                    id: timeoutTimer
                    repeat: true
                    signal stopTOTP
                    onTriggered: {
                        if(timeout.value > 0) {
                            timeout.value = timeout.value - 1
                        } else {
                            timeoutTimer.stop()
                            stopTOTP()
                        }
                    }
                }
            }
    }
    ListView {
        id: otpList
        anchors.top: otpTimeout.bottom
        anchors.right: parent.right
        anchors.left: parent.left
        anchors.bottom: parent.bottom
        Component {
            id: otpDelegate
            Rectangle {
                id: rect
                width: parent.parent.width
                height: 50
                radius: 4
                antialiasing: true
                border {
                    width: 2
                    color: "grey"
                }
                MouseArea {
                anchors.fill: parent
                    onClicked: {
                        if(display.OTPType == "TOTP") {
                            if(!timeoutTimer.running) {
                                timeout.to = display.timeout
                                timeout.value = display.timeout
                                otpCode.text = display.getOTPCode()
                                timeoutTimer.start()
                                timeoutTimer.stopTOTP.connect(removeCode)
                            } else {
                                timeoutTimer.stop()
                                timeout.value = 0
                                otpCode.text = ""
                            }
                        }
                    }
                    function removeCode() {
                        otpCode.text = ""
                        timeoutTimer.stopTOTP.disconnect(removeCode)
                    }
                }
                RowLayout {
                    anchors.verticalCenter: parent.verticalCenter
                    anchors.left: parent.left
                    anchors.leftMargin: 20
                    anchors.right: parent.right
                    anchors.rightMargin: 20
                    Text {
                        id: otpName
                        text: display.name
                    }
                    Text {
                        id: otpCode
                        Layout.alignment: Qt.AlignRight
                    }
                }
            }
        }
        model: otpListModel
        delegate: otpDelegate
    }
}