import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";

var _templateObject, _templateObject2, _templateObject3;

import React, { useEffect, useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { authApi, useGlobalLabels } from '@sentecacommerce-theme/lib';
import styled from 'styled-components';
import { CTA, UnderlineCTA, FooterContainer } from '../Styled';
import { Typography, Button, FormError, Input } from '../../../..';
export var ForgotPassword = (_ref) => {
  var {
    goBack
  } = _ref;
  var [serverError,,] = useState('');
  var [showSuccess, setShowSuccess] = useState(false);
  var [email, setEmail] = useState('');
  var {
    buttons,
    forms,
    forgotPassword
  } = useGlobalLabels();

  var onSuccess = () => {
    setShowSuccess(true);
  };

  var [mutate, {
    isLoading,
    data
  }] = authApi.useRequestResetPasswordToken({
    onSuccess
  }); // TODO: remove after email is sent

  useEffect(() => {
    if (data) {
      setTimeout(() => {
        window.location.href = "/resetpassword?token=" + data.value;
      }, 1000);
    }
  }, [data]);

  var onSubmit = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator(function* (_ref2) {
      var {
        email
      } = _ref2;
      setEmail(email);
      mutate({
        email
      });
    });

    return function onSubmit(_x) {
      return _ref3.apply(this, arguments);
    };
  }();

  var {
    handleSubmit,
    errors,
    control
  } = useForm({
    defaultValues: {
      email: ''
    },
    mode: 'onSubmit',
    reValidateMode: 'onChange'
  });
  var hasErrors = !Object.keys(errors).length;

  if (showSuccess) {
    return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(Title, null, forgotPassword.title), /*#__PURE__*/React.createElement(Text, null, forgotPassword.receiveLinkMsg), /*#__PURE__*/React.createElement(EmailContainer, null, email), /*#__PURE__*/React.createElement(CTA, null, /*#__PURE__*/React.createElement(Button, {
      fullWidth: true,
      variant: "primary",
      onClick: goBack
    }, forgotPassword.backToLogin)));
  }

  return /*#__PURE__*/React.createElement("form", {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/React.createElement(Title, null, forgotPassword.title), /*#__PURE__*/React.createElement(Text, null, forgotPassword.enterEmailMsg), /*#__PURE__*/React.createElement(Controller, {
    placeholder: "Email address",
    control: control,
    name: "email",
    rules: {
      required: forms.requiredField,
      pattern: {
        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
        message: forms.invalidEmail
      }
    },
    as: /*#__PURE__*/React.createElement(Input, {
      id: "login-email"
    })
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "email"
  }), /*#__PURE__*/React.createElement(CTA, {
    className: "mt-4"
  }, /*#__PURE__*/React.createElement(Button, {
    iconPosition: "right",
    fullWidth: true,
    variant: hasErrors ? 'primary' : 'disabled',
    disabled: isLoading
  }, buttons.reset)), serverError && /*#__PURE__*/React.createElement(FormError, {
    center: true,
    text: serverError
  }), /*#__PURE__*/React.createElement(FooterContainer, null, forgotPassword.orReturn, " ", /*#__PURE__*/React.createElement(UnderlineCTA, {
    onClick: goBack
  }, forgotPassword.logIn), "."));
};
var Title = styled(Typography).attrs({
  as: 'h6',
  variant: '4'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  font-weight: 600;\n  text-align: center;\n"])));
var Text = styled(Typography).attrs({
  as: 'h6',
  variant: '6',
  color: 'hint',
  className: 'my-3 mx-auto'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  line-height: 1.4;\n\n  max-width: 26rem;\n"])));
var EmailContainer = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  font-weight: 500;\n"])));
//# sourceMappingURL=index.js.map