"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.LoginForm = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
require("../styles/type.css");
var _UseWindowDimensions = require("../components/UseWindowDimensions");
var _Input = require("../components/Input");
var _Button = require("../components/Button");
var _Message = require("../components/Message");
var LoginForm = function LoginForm() {
  // Form data.
  var _useState = (0, _react.useState)(''),
    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
    email = _useState2[0],
    setEmail = _useState2[1];
  var _useState3 = (0, _react.useState)(''),
    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
    password = _useState4[0],
    setPassword = _useState4[1];

  // Errors.
  var _useState5 = (0, _react.useState)(''),
    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
    emailError = _useState6[0],
    setEmailError = _useState6[1];
  var _useState7 = (0, _react.useState)(''),
    _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
    passwordError = _useState8[0],
    setPasswordError = _useState8[1];

  // Loading.
  var _useState9 = (0, _react.useState)(false),
    _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
    loading = _useState10[0],
    setLoading = _useState10[1];

  // Window.
  var _useWindowDimensions = (0, _UseWindowDimensions.useWindowDimensions)(),
    width = _useWindowDimensions.width;

  // Submit form. 
  var submit = function submit() {
    // Do a fetch here normally.
    setLoading(true);
    setTimeout(function () {
      // Set errors.
      if (email.length < 1) {
        setEmailError('Email required');
      } else {
        setEmailError('');
      }
      if (password.length < 1) {
        setPasswordError('Password required');
      } else {
        setPasswordError('');
      }
      setLoading(false);
    }, 2000);
  };
  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
    style: {
      maxWidth: 400,
      marginLeft: 'auto',
      marginRight: 'auto',
      paddingTop: 36
    }
  }, /*#__PURE__*/_react.default.createElement("h3", {
    style: {
      marginBottom: 24
    }
  }, "Login"), /*#__PURE__*/_react.default.createElement("label", {
    style: {
      marginLeft: '0.4rem'
    }
  }, "Email"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Input.Input, {
    placeholder: "Enter email",
    type: "email",
    isFullWidth: true,
    disabled: loading,
    isInvalid: emailError.length > 0,
    value: email,
    onChange: function onChange(e) {
      setEmail(e.target.value);
    }
  }), emailError.length > 0 && !loading && /*#__PURE__*/_react.default.createElement(_Message.Message, {
    type: "error",
    message: emailError
  }), /*#__PURE__*/_react.default.createElement("label", {
    style: {
      marginLeft: '0.4rem'
    }
  }, "Password"), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement(_Input.Input, {
    placeholder: "Enter password",
    type: "password",
    isFullWidth: true,
    disabled: loading,
    isInvalid: passwordError.length > 0,
    value: password,
    onChange: function onChange(e) {
      setPassword(e.target.value);
    }
  }), passwordError.length > 0 && !loading && /*#__PURE__*/_react.default.createElement(_Message.Message, {
    type: "error",
    message: passwordError
  }), /*#__PURE__*/_react.default.createElement("div", {
    style: {
      display: 'flex',
      justifyContent: 'flex-end'
    }
  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
    onClick: submit,
    isLoading: loading,
    isFullWidth: width < 500
  }, "Submit"))));
};
exports.LoginForm = LoginForm;