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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import Link from 'next/link';
import Router from 'next/router';
import styled from 'styled-components';
import { useForm, Controller } from 'react-hook-form';
import { useLogin, useGlobalLabels, useErrors, useReleva } from '@sentecacommerce-theme/lib';
import { Input, Button, LockIcon, InputLabel as Label, FormError } from '../..';
import { Typography } from '../../';
export var LoginForm = () => {
  var {
    forms,
    commonMessages,
    buttons,
    errorMessages,
    forgotPassword
  } = useGlobalLabels();
  var {
    changeBasket
  } = useReleva();
  var [mutate, {
    isLoading,
    error
  }] = useLogin({
    onSuccess: () => {
      changeBasket();
      Router.push('/');
    }
  });
  /* eslint-disable */

  var apiErrors = useErrors(error, {
    invalid_client: errorMessages == null ? void 0 : errorMessages.somethingWentWrong,
    invalid_credentials: errorMessages.invalidCredentials,
    default: errorMessages == null ? void 0 : errorMessages.somethingWentWrong
  });
  /* eslint-enable*/

  var onSubmit = /*#__PURE__*/function () {
    var _ref2 = _asyncToGenerator(function* (_ref) {
      var {
        email,
        password
      } = _ref;
      mutate({
        email,
        password
      });
    });

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

  var {
    handleSubmit,
    control,
    errors
  } = useForm({
    defaultValues: {
      email: '',
      password: ''
    },
    mode: 'onChange'
  });
  return /*#__PURE__*/React.createElement("form", {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/React.createElement(FormWrap, null, /*#__PURE__*/React.createElement(Label, null, commonMessages.emailAddress, /*#__PURE__*/React.createElement(Controller, {
    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(Label, null, commonMessages.password, /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "password",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/React.createElement(Input, {
      id: "login-pass",
      type: "password"
    })
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "password"
  })), /*#__PURE__*/React.createElement(ErrorWrapper, null, /*#__PURE__*/React.createElement(FormError, {
    errors: apiErrors,
    fieldName: "invalid_client"
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: apiErrors,
    fieldName: "invalid_credentials"
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: apiErrors,
    fieldName: "default"
  })), /*#__PURE__*/React.createElement(Link, {
    href: "/forgotpassword"
  }, /*#__PURE__*/React.createElement(ForgotPassword, null, forgotPassword.forgotYourPass))), /*#__PURE__*/React.createElement(ButtonWrap, null, /*#__PURE__*/React.createElement(Button, {
    iconPosition: "right",
    disabled: isLoading,
    fullWidth: true,
    icon: /*#__PURE__*/React.createElement(LockIcon, null)
  }, buttons.login)));
};
var FormWrap = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  min-height: 32rem;\n"])));
var ForgotPassword = styled(Typography).attrs({
  as: 'p',
  variant: 7
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  text-decoration: underline;\n  color: ", ";\n  cursor: pointer;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.primary;
});
var ErrorWrapper = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  min-height: 3.5rem;\n\n  div {\n    margin-top: none;\n  }\n"])));
var ButtonWrap = styled.div.attrs({
  className: 'd-flex justify-content-center justify-content-lg-end'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  padding-top: 1rem;\n\n  button {\n    max-width: 27.3rem;\n  }\n"])));
//# sourceMappingURL=index.js.map