import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
import React, { useState, useEffect } from "react";
import { makeStyles } from "@material-ui/core/styles";
import Drawer from "@material-ui/core/Drawer";
import Avatar from "@material-ui/core/Avatar";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";
import LockOutlinedIcon from "@material-ui/icons/LockOutlined";
import ArrowForwardIcon from "@material-ui/icons/ArrowForward";
import SignIn from "./SignIn";
import CompleteSignUp from "./CompleteSignUp";
import { useAuth } from "../../utils/auth-handlers/use-auth.js";
var useStyles = makeStyles(function (theme) {
  return {
    drawer: {
      width: 500
    },
    root: {
      height: "100vh"
    },
    paper: {
      margin: theme.spacing(8, 4),
      display: "flex",
      flexDirection: "column",
      alignItems: "center"
    },
    close: {
      cursor: "pointer",
      color: theme.palette.secondary.main
    },
    avatar: {
      margin: theme.spacing(1),
      backgroundColor: theme.palette.secondary.main
    }
  };
});
export default (function (_ref) {
  var loginDrawerOpen = _ref.loginDrawerOpen,
      onClose = _ref.onClose;
  var classes = useStyles();

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

  var _useState = useState({
    signingIn: true,
    completeSignUp: false,
    user: user
  }),
      _useState2 = _slicedToArray(_useState, 2),
      state = _useState2[0],
      setState = _useState2[1];

  useEffect(function () {
    if (isLoggedIn) {
      onClose();
      toggleSignIn();
    }
  }, [isLoggedIn, onClose]);
  useEffect(function () {
    if (error === "NotAuthorizedException") {
      toggleSignIn();
    }
  }, [error, handlerErrorVersion]);

  var toggleCompleteSignUp = function toggleCompleteSignUp() {
    setState(function (prevState) {
      return _objectSpread(_objectSpread({}, prevState), {}, {
        signingIn: false,
        completeSignUp: true,
        requiredAttributes: user.challengeParam.requiredAttributes
      });
    });
  };

  var toggleSignIn = function toggleSignIn() {
    setState(function (prevState) {
      return _objectSpread(_objectSpread({}, prevState), {}, {
        signingIn: true,
        completeSignUp: false
      });
    });
  };

  var drawer = function drawer() {
    return /*#__PURE__*/React.createElement("div", {
      className: classes.drawer,
      role: "presentation"
    }, /*#__PURE__*/React.createElement(Grid, {
      container: true,
      component: "main",
      className: classes.root
    }, /*#__PURE__*/React.createElement(Grid, {
      item: true,
      xs: 12,
      sm: 12,
      md: 12,
      component: Paper,
      elevation: 6,
      square: true
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.paper
    }, /*#__PURE__*/React.createElement(Grid, {
      container: true
    }, /*#__PURE__*/React.createElement(Grid, {
      item: true,
      xs: true
    }, /*#__PURE__*/React.createElement(ArrowForwardIcon, {
      onClick: onClose,
      className: classes.close
    }))), /*#__PURE__*/React.createElement(Avatar, {
      className: classes.avatar
    }, /*#__PURE__*/React.createElement(LockOutlinedIcon, null)), state.signingIn && /*#__PURE__*/React.createElement(SignIn, {
      onRequireCompleteSignUp: function onRequireCompleteSignUp() {
        return toggleCompleteSignUp();
      }
    }), state.completeSignUp && /*#__PURE__*/React.createElement(CompleteSignUp, {
      toggleSignIn: toggleSignIn
    })))));
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Drawer, {
    anchor: "right",
    open: loginDrawerOpen,
    onClose: onClose
  }, drawer()));
});