/*
 * AdvoTracker - Hotline tackingtool for Advocats
 *
 * Copyright (c) 2017 Ralf Zerres <ralf.zerres@networkx.de>
 *
 * AdvoTracker is free software; you can redistribute it and/or modify it
 * under the terms of the GNU Lesser General Public License as published by
 * the Free Software Foundation; either version 2.1 of the License, or
 * (at your option) any later version.
 *
 * AdvoTracker is distributed in the hope that it will be useful, but
 * WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
 * Lesser General Public License for more details.
 *
 * You should have received a copy of the GNU Lesser General Public License
 * along with AdvoTracker; If not, see <http://www.gnu.org/licenses/>.
 */

import QtQuick 2.10
import QtQuick.Controls 2.3
import QtQuick.Controls.Material 2.2
import QtQuick.Layouts 1.3
import QtGraphicalEffects 1.0

// adapted project module
import de.networkx.AdvoTracker 1.0 as Nwx

Page {
    id: pageNewUser
    property alias pageNewUser: pageNewUser
    leftPadding: 26
    rightPadding: 26
    topPadding: 18
    bottomPadding: 18

    ColumnLayout {
        id: columnUser
        width: parent.width
        visible: true
        spacing: 8

        Rectangle {
            id: imageRoot;
            anchors.horizontalCenter: parent.horizontalCenter
            width: 96
            height: 96
            radius: 48

            // apply rounded corners mask
            layer.enabled: true
            layer.effect: OpacityMask {
                maskSource: Rectangle {
                    x: imageRoot.x; y: imageRoot.y
                    width: imageRoot.width
                    height: imageRoot.height
                    radius: imageRoot.radius
                }
            }

            Image {
                id: imageLogin
                opacity: 1
                smooth: false
                anchors.fill: parent
                source: "/images/background.jpg"
            }
        }

        RowLayout {
            id: rowUserName
            spacing: 5
            //width: 300
            /*
            anchors.left: imageRoot.left
            anchors.leftMargin: -((rowUserName.width / 2) - (image.width / 2))
            anchors.bottom: imageRoot.bottom
            anchors.bottomMargin: -64
            */

            Nwx.Label {
                id: labelUser
                //width: 200
                text: qsTr("User")
                Layout.minimumWidth: 200
                Layout.preferredWidth: 150
                Layout.alignment: Qt.AlignRight | Qt.AlignBaseline
                //font.pointSize: 12
                //horizontalAlignment: Text.AlignLeft
            }

            Nwx.TextField {
                id: userName
                width: rowUserName - 100
                renderType: Text.NativeRendering
                Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline
                Layout.preferredWidth: rowUserName - 100
                Layout.minimumWidth: 150
                placeholderText: qsTr("User Name")
                Keys.onReturnPressed: userPassword.forceActiveFocus()
                onEditingFinished: {
                    // Assign password rows
                    if (userName.text != null) {
                        // TODO: Verify if user is known
                        //confirmResult.text = qsTr("Check if username already exists.");
                        rowUserPassword.opacity = 1
                    } else {
                        confirmResult.text = qsTr("Please enter a username.");
                        confirmResult.opacity = 1;
                        confirmResult.color = "#6f1a32";
                    }
                }
            }
        }

        RowLayout {
            id: rowUserPassword
            //width: 300
            //anchors.topMargin: 16
            //anchors.top: rowUserName.bottom
            //anchors.left: rowUserName.left
            spacing: 4
            opacity: 0

            Nwx.Label {
                id: labelPassword
                y: 10
                //width: 200
                text: qsTr("Password")
                Layout.minimumWidth: 200
                Layout.preferredWidth: 150
                Layout.alignment: Qt.AlignRight | Qt.AlignBaseline
                //horizontalAlignment: Text.AlignLeft
            }

            Nwx.TextField {
                id: userPassword
                width: rowUserPassword - 150
                renderType: Text.NativeRendering
                Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline
                Layout.preferredWidth: rowUserPassword - 100
                Layout.minimumWidth: 150
                horizontalAlignment: Text.AlignLeft
                //text: qsTr("Enter your password")
                placeholderText: qsTr("Your Password")
                echoMode:TextInput.Password
                Keys.onReturnPressed: confirmPassword.forceActiveFocus()
                passwordMaskDelay: 1000
                onEditingFinished: {
                    // Assign password rows
                    if (userPassword.text.length < 5) {
                        rowConfirmPassword.opacity = 1;
                    } else {
                        confirmResult.text = qsTr("Please enter a valid password.");
                        confirmResult.opacity = 1;
                        confirmResult.color = "#6f1a32";
                        userPassword.forceActiveFocus();
                    }
                }
             }
        }

        RowLayout {
            id: rowConfirmPassword
            //width: 300
            //anchors.topMargin: 16
            //anchors.top: rowUserPassword.bottom
            //anchors.left: rowUserPassword.left
            spacing: 4
            opacity: 0

             // Confirm password stuff
             Nwx.Label {
                 id: labelConfirmPassword
                 anchors.right: confirmPassword.left
                 y: 10
                 text: qsTr("Confirm password")
                 Layout.minimumWidth: 200
                 Layout.preferredWidth: 150
                 Layout.alignment: Qt.AlignRight | Qt.AlignBaseline
                 //horizontalAlignment: Text.AlignLeft
             }

             Nwx.TextField {
                 id: confirmPassword
                 placeholderText: qsTr("Confirm the password")
                 width: rowUserPassword - 150
                 //anchors.left: labelConfirmPassword.left
                 renderType: Text.NativeRendering
                 Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline
                 Layout.preferredWidth: rowConfirmPassword - 100
                 Layout.minimumWidth: 150
                 font.pointSize: 12
                 horizontalAlignment: Text.AlignLeft
                 echoMode: TextInput.Password
                 Keys.onReturnPressed: buttonApply.forceActiveFocus()
                 onEditingFinished: {
                     if (userPassword.text !== confirmPassword.text) {
                         confirmResult.text = qsTr("Given passwords do not match.");
                         confirmResult.opacity = 1;
                         confirmResult.color = "#6f1a32";
                         loginDialog.opacity = 0
                     } else {
                         confirmResult.text = qsTr("Password confirmed.");
                         confirmResult.opacity = 1.0;
                         confirmResult.color = "#00ff00";
                         loginDialog.opacity = 1.0
                     }
                }
            }

            // Your text color box
            Text {
                id: confirmResult
                Layout.alignment: Qt.AlignLeft | Qt.AlignBaseline
                font.pointSize: 12
                text: qsTr("Result");
                font.wordSpacing: -1
                renderType: Text.NativeRendering
                //font.capitalization: Font.SmallCaps
                clip: false
                opacity: 0
                property color property0: "#00ff00"
                Layout.fillWidth: true
            }
        }

        Column {
            id: loginDialog
            antialiasing: false
            //anchors.bottom: rowConfirmPassword.top
            //anchors.bottomMargin: -130
            //anchors.horizontalCenter: imageRoot.horizontalCenter
            spacing: 8
            opacity: 0

            RowLayout {
                spacing: 10
                Button {
                    id: buttonApply
                    text: qsTr("Apply")
                    antialiasing: true

                    signal qmlSignal(var anObject)
                    
                    onPressed:  {
                        /*
                        // Checks whether the password and its confirmation are the same.
                        if (userPassword.text === confirmPassword.text) {
                            confirmResult.text = qsTr("Password confirmed.");
                            confirmResult.opacity = 1;
                            confirmResult.color = "#00ff00";
                        } else {
                            confirmResult.text = qsTr("Given passwords do not match.");
                            confirmResult.opacity = 1;
                            confirmResult.color = "#ff0000";
                        }
                        */
                        //stack.push({item:"qrc:/pages/StackLayout.qml"});
                        //_cppApi.cppSlot("Hello")
                        _myClass.cppSlot("Apply")
                    } // onPressed
                }
                Button {
                    id: buttonClear
                    text: qsTr("Clear")
                    antialiasing: true

                    signal qmlSignal(var anObject)

                    onPressed: {
                        // Reset all dialog Fields
                        userName.clear(),
                        userPassword.clear(),
                        confirmPassword.clear(),
                        confirmResult.opacity = 0,
                        loginDialog.opacity = 0,
                        rowUserPassword.opacity = 0,
                        rowConfirmPassword.opacity = 0;

                        //clearButton.qmlSignal(clearButton)
                        _myClass.cppSlot("Clear")
                    }
                }
            }
        }
    }
}