import QtQuick 2.0
import QtQuick.Controls 2.13
import QtQuick.Layouts 1.12
import QtQuick.Dialogs 1.3

import shared.controls 1.0
import shared 1.0
import shared.panels 1.0
import utils 1.0

import StatusQ.Controls 0.1
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1

import "../stores"
import "../controls"

OnboardingBasePage {
    id: root

    property string password
    property string tmpPass
    property string displayName
    function forcePswInputFocus() { confPswInput.forceActiveFocus(Qt.MouseFocusReason)}

    Column {
        id: view
        spacing: 4 * Style.current.padding
        width: 416
        anchors.centerIn: parent

        StatusBaseText {
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("Have you written down your password?")
            font.pixelSize: 22
            font.bold: true
            color: Theme.palette.directColor1
        }

        Column {
            anchors.horizontalCenter: parent.horizontalCenter
            spacing: Style.current.padding

            StatusBaseText {
                anchors.horizontalCenter: parent.horizontalCenter
                text: qsTr("You will never be able to recover your password if you lose it.")
                font.pixelSize: 12
                color: Theme.palette.dangerColor1
            }

            StatusBaseText {
                anchors.horizontalCenter: parent.horizontalCenter
                text: qsTr("If you need to, write it using pen and paper and keep in a safe place.")
                font.pixelSize: 12
                color: Theme.palette.baseColor1
            }

            StatusBaseText {
                anchors.horizontalCenter: parent.horizontalCenter
                text: qsTr("If you lose your password you will lose access to  your Status profile.")
                font.pixelSize: 12
                color: Theme.palette.baseColor1
            }
        }

        // TODO replace with StatusInput as soon as it supports password
        Input {
            id: confPswInput

            property bool showPassword: false

            width: parent.width
            enabled: !submitBtn.loading
            placeholderText: qsTr("Confirm you password (again)")
            textField.echoMode: showPassword ? TextInput.Normal : TextInput.Password
            textField.validator: RegExpValidator { regExp: /^[!-~]{0,64}$/ } // That incudes NOT extended ASCII printable characters less space and a maximum of 64 characters allowed
            keepHeight: true
            textField.rightPadding: showHideCurrentIcon.width + showHideCurrentIcon.anchors.rightMargin + Style.current.padding / 2
            onTextChanged: {
                errorTxt.text = ""
            }

            StatusFlatRoundButton {
                id: showHideCurrentIcon
                visible: confPswInput.text !== ""
                anchors.verticalCenter: parent.verticalCenter
                anchors.right: parent.right
                anchors.rightMargin: 16
                width: 24
                height: 24
                icon.name: confPswInput.showPassword ? "hide" : "show"
                icon.color: Theme.palette.baseColor1

                onClicked: confPswInput.showPassword = !confPswInput.showPassword
            }
        }

        StatusBaseText {
            id: errorTxt
            font.pixelSize: 12
            width: parent.width
            horizontalAlignment: StatusBaseText.AlignHCenter
            color: Theme.palette.dangerColor1
        }

        // Just a column filler to fit the design
        Item {
            height: Style.current.padding
            width: parent.width
        }

        StatusButton {
            id: submitBtn
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("Finalize Status Password Creation")
            enabled:!submitBtn.loading && confPswInput.text.length >= 6

            property Timer sim: Timer {
                id: pause
                interval: 20
                onTriggered: {
                    // Create account operation blocks the UI so loading = true; will never have any affect until it is done.
                    // Getting around it with a small pause (timer) in order to get the desired behavior
                    OnboardingStore.finishCreatingAccount(root.password)
                }
            }

            function checkPasswordMatches() {
                if (confPswInput.text !== root.password) {
                    errorTxt.text = qsTr("Passwords don't match")
                    return false
                }
                return true
            }

            onClicked: {
                if (!checkPasswordMatches()) {
                    return
                }

                if (OnboardingStore.accountCreated) {
                    if (root.password !== root.tmpPass) {
                        OnboardingStore.changePassword(root.tmpPass, root.password);
                        root.tmpPass = root.password;
                    } else {
                        submitBtn.loading = false
                        root.exit();
                    }
                } else {
                    root.tmpPass = root.password;
                    submitBtn.loading = true
                    OnboardingStore.setCurrentAccountAndDisplayName(root.displayName);
                    pause.start();
                }
            }

            Connections {
                target: onboardingModule
                onAccountSetupError: {
                    if (error === Constants.existingAccountError) {
                        importLoginError.title = qsTr("Keys for this account already exist")
                        importLoginError.text = qsTr("Keys for this account already exist and can't be added again. If you've lost your password, passcode or Keycard, uninstall the app, reinstall and access your keys by entering your seed phrase")
                    } else {
                        //% "Login failed"
                        importLoginError.title = qsTrId("login-failed")
                        //% "Login failed. Please re-enter your password and try again."
                        importLoginError.text = qsTrId("login-failed.-please-re-enter-your-password-and-try-again.")
                    }
                    importLoginError.open()
                }
            }

            MessageDialog {
                id: importLoginError
                //% "Login failed"
                title: qsTrId("login-failed")
                //% "Login failed. Please re-enter your password and try again."
                text: qsTrId("login-failed.-please-re-enter-your-password-and-try-again.")
                icon: StandardIcon.Critical
                standardButtons: StandardButton.Ok
                onVisibilityChanged: {
                    submitBtn.loading = false
                }
            }
        }
    }

    // Back button:
    StatusRoundButton {
        enabled: !submitBtn.loading
        anchors.left: parent.left
        anchors.leftMargin: Style.current.padding
        anchors.bottom: parent.bottom
        anchors.bottomMargin: Style.current.padding
        icon.name: "arrow-left"
        onClicked: { root.backClicked() }
    }

    Connections {
        target: startupModule
        onAppStateChanged: {
            if (state === Constants.appState.main) {
                if (!!OnboardingStore.profImgUrl) {
                    OnboardingStore.saveImage();
                    OnboardingStore.accountCreated = true;
                }
                submitBtn.loading = false
                root.exit()
            }
        }
    }

    Connections {
        target: OnboardingStore.privacyModule
        onPasswordChanged: {
            if (success) {
                submitBtn.loading = false
                root.exit();
            }
        }
    }
}