import QtQuick
import QtQuick.Controls
import QtQuick.Layouts

import API

Page {
    signal pickServer(address: string)

    title: qsTr("Welcome")

    Column {
        anchors.centerIn: parent
        spacing: 10

        Label {
            anchors.horizontalCenter: parent.horizontalCenter
            text: qsTr("Welcome to Magpie!")
            font {
                pixelSize: 22
                bold: true
            }
        }

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

            Label {
                horizontalAlignment: Label.AlignRight
                text: qsTr("Current server:")
            }
            Label {
                horizontalAlignment: Label.AlignLeft
                text: API.state === API.NoServer ? qsTr("choose") : API.address
                font {
                    italic: true
                    underline: true
                }

                MouseArea {
                    anchors.fill: parent
                    onClicked: pickServer(API.address)
                }
            }
        }

        Row {
            id: forms
            property bool registering: false

            visible: API.state === API.NotAuthenticated
            anchors.horizontalCenter: parent.horizontalCenter
            topPadding: 10

            Column {
                visible: forms.registering === false
                spacing: 10

                Label {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: qsTr("Please, log in to your account")
                    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: login
                    }

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

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

                Button {
                    anchors.horizontalCenter: parent.horizontalCenter
                    text: qsTr("Login")
                    onClicked: function () {
                        console.log("Not implemented");
                    }
                }

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

                    Label {
                        text: qsTr("Don't have account?")
                    }
                    Label {
                        text: qsTr("Sign up") + "!"
                        font {
                            italic: true
                            underline: true
                        }

                        MouseArea {
                            anchors.fill: parent
                            onClicked: forms.registering = true
                        }
                    }
                }
            }

            Column {
                visible: forms.registering === true
                spacing: 10

                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: API.sendRegister(newLogin.text, newPassword.text, function (err, result) {
                        if (err)
                            console.error("err")

                        console.log(result);
                    })
                }

                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: forms.registering = false
                        }
                    }
                }
            }
        }
    }
}