import QtQuick
import QtQuick.Controls

import magpie.API
import magpie.Components as Components

Column {
    signal login()
    signal success(login: string, password: string)

    spacing: 5

    Label {
        anchors.horizontalCenter: parent.horizontalCenter
        text: qsTr("Please, chose login and password")
        font {
            pixelSize: 14
        }
    }

    Grid {
        anchors.horizontalCenter: parent.horizontalCenter
        columns: 2
        columnSpacing: 10
        rowSpacing: 5
        verticalItemAlignment: Grid.AlignVCenter
        horizontalItemAlignment: Grid.AlignRight

        Label {
            text: qsTr("Login") + ":";
        }

        TextField {
            id: newLogin
        }

        Label {
            text: qsTr("Password") + ":";
        }

        TextField {
            id: newPassword
            echoMode: TextField.Password
        }
    }

    Button {
        anchors.horizontalCenter: parent.horizontalCenter
        text: qsTr("Register")
        onClicked: modal.check()
    }

    Components.Modal {
        id: modal
        function check () {
            if (inProgress)
                return;

            inProgress = true;
            status = qsTr("Registering") + " " + newLogin.text + "...";
            open()

            API.sendRegister(newLogin.text, newPassword.text, function (err, result) {
                if (!modal.inProgress)
                    return;

                modal.inProgress = false;
                if (err)
                    modal.status = err;
                else
                    modal.status = qsTr("Success");

                if (!!result) {
                    modal.close();
                    success(newLogin.text, newPassword.text);
                }
            });
        }
    }

    Row {
        anchors.horizontalCenter: parent.horizontalCenter
        spacing: 5
        topPadding: 10

        Label {
            text: qsTr("Already have an account?")
        }
        Label {
            text: qsTr("Log in") + "!"
            font {
                italic: true
                underline: true
            }

            MouseArea {
                anchors.fill: parent
                onClicked: login()
            }
        }
    }
}