import _regeneratorRuntime from "@babel/runtime/regenerator";
import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { Fragment, useState, useEffect } from "react";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";
import FormControlLabel from "@material-ui/core/FormControlLabel";
import Checkbox from "@material-ui/core/Checkbox";
import { makeStyles } from "@material-ui/core/styles";
import isEmpty from "lodash/isEmpty";
import { styled } from "@material-ui/core/styles";
import { useTranslation } from "react-i18next";
import * as colors from "@material-ui/core/colors";
import { useAuth } from "../../utils/auth-handlers/use-auth.js";
var ErrorText = styled("div")({
  padding: 16,
  color: colors.red[500]
});
var useStyles = makeStyles(function (theme) {
  return {
    form: {
      width: "100%",
      marginTop: theme.spacing(1)
    },
    submit: {
      margin: theme.spacing(3, 0, 2)
    }
  };
});
export default (function (_ref) {
  var onRequireCompleteSignUp = _ref.onRequireCompleteSignUp;

  var _useAuth = useAuth(),
      user = _useAuth.user,
      login = _useAuth.login,
      error = _useAuth.error,
      handlerErrorVersion = _useAuth.handlerErrorVersion;

  var classes = useStyles();

  var _useState = useState(),
      _useState2 = _slicedToArray(_useState, 2),
      errorMessage = _useState2[0],
      setErrorMessage = _useState2[1];

  var _useTranslation = useTranslation(),
      t = _useTranslation.t;

  var _useState3 = useState({
    username: "",
    password: "",
    notAuthorizedException: false
  }),
      _useState4 = _slicedToArray(_useState3, 2),
      state = _useState4[0],
      setState = _useState4[1];

  useEffect(function () {
    if (Boolean(user) && user.challengeName) {
      onRequireCompleteSignUp();
    }
  }, [user, onRequireCompleteSignUp]);
  useEffect(function () {
    if (error === "NotAuthorizedException") {
      setState(function (prevState) {
        return _objectSpread(_objectSpread({}, prevState), {}, {
          notAuthorizedException: true
        });
      });
    }
  }, [error, handlerErrorVersion, setState]);

  var handleSignInClick = function handleSignInClick() {
    if (isEmpty(state.username) || isEmpty(state.password)) {
      setState(function (prevState) {
        return _objectSpread(_objectSpread({}, prevState), {}, {
          notAuthorizedException: true
        });
      });
    } else {
      SignInAWS(state.username, state.password);
    }
  };

  var handleTextFieldChange = function handleTextFieldChange(event) {
    event.persist();
    setState(function (prevState) {
      var _objectSpread2;

      return _objectSpread(_objectSpread({}, prevState), {}, (_objectSpread2 = {}, _defineProperty(_objectSpread2, event.target.name, event.target.value), _defineProperty(_objectSpread2, "notAuthorizedException", false), _objectSpread2));
    });
  };

  function SignInAWS(_x, _x2) {
    return _SignInAWS.apply(this, arguments);
  }

  function _SignInAWS() {
    _SignInAWS = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(username, password) {
      return _regeneratorRuntime.wrap(function _callee$(_context) {
        while (1) {
          switch (_context.prev = _context.next) {
            case 0:
              setErrorMessage(null);

              try {
                login(username, password);
              } catch (e) {
                setErrorMessage(e.toString());
              }

            case 2:
            case "end":
              return _context.stop();
          }
        }
      }, _callee);
    }));
    return _SignInAWS.apply(this, arguments);
  }

  return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Typography, {
    component: "h1",
    variant: "h5"
  }, t("sign-in")), errorMessage && /*#__PURE__*/React.createElement(ErrorText, null, errorMessage), /*#__PURE__*/React.createElement("form", {
    className: classes.form,
    noValidate: true
  }, /*#__PURE__*/React.createElement(TextField, {
    error: state.notAuthorizedException,
    variant: "outlined",
    margin: "normal",
    required: true,
    fullWidth: true,
    id: "username",
    label: t("username"),
    name: "username",
    autoComplete: "username",
    helperText: state.notAuthorizedException ? "The username or password is incorrect." : "",
    autoFocus: true,
    onChange: handleTextFieldChange
  }), /*#__PURE__*/React.createElement(TextField, {
    error: state.notAuthorizedException,
    variant: "outlined",
    margin: "normal",
    required: true,
    fullWidth: true,
    name: "password",
    label: t("password"),
    type: "password",
    id: "password",
    autoComplete: "current-password",
    value: state.password,
    onChange: handleTextFieldChange
  }), /*#__PURE__*/React.createElement(FormControlLabel, {
    control: /*#__PURE__*/React.createElement(Checkbox, {
      value: "remember",
      color: "primary"
    }),
    label: t("remember-me")
  }), /*#__PURE__*/React.createElement(Button, {
    onClick: handleSignInClick,
    fullWidth: true,
    variant: "contained",
    color: "primary",
    className: classes.submit
  }, t("sign-in"))));
});