import QtQuick 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Material 2.12
import QtQuick.Layouts 1.12

import LibreHub 1.0

Page {
  anchors.fill: parent;
  visible: !API.is_authenticated;
  ColumnLayout {
    anchors.centerIn: parent;
    Label{
      Layout.alignment: Qt.AlignHCenter;
      text: `Authentication${(API.server_info && API.is_connection_secured)? " @" + API.server_info.name : ""}`
    }

    // Server connection
    RowLayout {
      visible: !API.is_connection_secured;
      TextField {
        Layout.fillWidth: true;
        id: ip_addr_input;
        placeholderText: "Input ip addres"
        enabled: !API.is_connected;
      }
      TextField {
        id: port_input;
        placeholderText: "33333";
        enabled: !API.is_connected;
      }
    }

    Button {
      visible: !API.is_connection_secured;
      Layout.fillWidth: true;
      text: API.is_connected? "Disconnect" : "Connect";
      onClicked: {
        if(API.is_connected) {
          API.disconnect();
        } else {
          if(port_input.text.length)
            return API.connect(ip_addr_input.text, parseInt(port_input.text));
          return API.connect(ip_addr_input.text, 33333);
        }
      }
    }
    // Server connection

    RowLayout{
      visible: API.is_connection_secured;
      Layout.fillWidth: true;
      ToolButton {
        Layout.fillWidth: true;
        text: "Authentication";
        background: Rectangle {
          color: (auth_swipe.currentIndex == 0)? app_root.accent : parent.hovered? app_root.text_color : "#00000000";
        }
        onClicked: auth_swipe.currentIndex = 0;
      }
      ToolButton {
        Layout.fillWidth: true;
        text: "Registration";
        background: Rectangle {
          color: (auth_swipe.currentIndex == 1)? app_root.accent : parent.hovered? app_root.text_color : "#00000000";
        }
        onClicked: auth_swipe.currentIndex = 1;
      }
      ToolButton {
        Layout.fillWidth: true;
        text: "Disconnect";
        onClicked: API.disconnect();
      }
    }

    SwipeView {
      visible: API.is_connection_secured;
      id: auth_swipe
      clip: true;
      Layout.fillWidth: true;
      ColumnLayout {
        TextField {
          Layout.fillWidth: true;
          id: a_login_input;
          enabled: API.is_connection_secured && auth_swipe.currentIndex == 0;
          placeholderText: "Your login";
        }

        TextField {
          Layout.fillWidth: true;
          id: a_password_input;
          enabled: API.is_connection_secured && auth_swipe.currentIndex == 0;
          echoMode: TextInput.Password;
          placeholderText: "Your password"
        }
        Button {
          Layout.fillWidth: true;
          enabled: API.is_connection_secured &&
                   auth_swipe.currentIndex == 0 &&
                   a_login_input.length &&
                   a_password_input.length >= 8;
          text: "Authenticate";
          onClicked: API.authenticate(a_login_input.text, a_password_input.text);
        }
      }

      ColumnLayout {
        TextField {
          Layout.fillWidth: true;
          id: r_login_input;
          enabled: API.is_connection_secured && auth_swipe.currentIndex == 1;
          placeholderText: "Your login";
        }

        TextField {
          Layout.fillWidth: true;
          id: r_password_input;
          echoMode: TextInput.Password;
          enabled: API.is_connection_secured && auth_swipe.currentIndex == 1;
          placeholderText: "Your password"
        }

        TextField {
          Layout.fillWidth: true;
          id: r_password_confirm;
          echoMode: TextInput.Password;
          enabled: API.is_connection_secured && auth_swipe.currentIndex == 1;
          placeholderText: "Repeat your password"
        }

        TextField {
          Layout.fillWidth: true;
          id: r_email_input;
          enabled: API.is_connection_secured && auth_swipe.currentIndex == 1;
          placeholderText: "Your email"
        }

        Text {
          visible: !r_login_input.length ||
                   r_password_input.text.length < 8 ||
                   r_password_input.text != r_password_confirm.text;
          color: "red"
          text:
              ((r_login_input.length)?"":"Enter your login\n") +
              ((r_password_input.text.length >= 8)?"":"Password length must be 8 characters or more\n") +
              ((r_password_input.text == r_password_confirm.text)?"":"Password not equal password confirmation\n");
        }

        Button {
          Layout.fillWidth: true;
          enabled: API.is_connection_secured &&
                   auth_swipe.currentIndex == 1 &&
                   r_login_input.length &&
                   r_password_input.text.length >= 8 &&
                   r_password_input.text == r_password_confirm.text;
          text: "Registerate"
          onClicked: API.registerate(r_login_input.text, r_password_input.text, r_email_input.text);
        }
      }
    }
  }
}
