import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
import React, { useState } from 'react';
import { useForm, Controller } from 'react-hook-form';
import { FormError, Button, Input, InputLabel as Label, LockIcon } from '../../../..';
import { useErrors, useGlobalLabels, useLogin, useReleva } from '@sentecacommerce-theme/lib';
import { CTA, UnderlineCTA } from '../Styled';
import { SocialLogin } from '../SocialLogin';
export var LoginForm = (_ref) => {
  var {
    handleClose,
    openForgotPassword
  } = _ref;
  var {
    changeBasket
  } = useReleva();
  var [mutate, {
    isLoading,
    error
  }] = useLogin({
    onSuccess: () => {
      changeBasket();
      handleClose();
    }
  });
  var {
    errorMessages
  } = useGlobalLabels();
  /* 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 [serverError,,] = useState('');

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

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

  var {
    handleSubmit,
    errors,
    control
  } = useForm({
    defaultValues: {
      email: '',
      password: ''
    },
    mode: 'onChange'
  });
  var hasErrors = !Object.keys(errors).length;
  var {
    buttons,
    commonMessages,
    forms,
    forgotPassword
  } = useGlobalLabels();
  return /*#__PURE__*/React.createElement("form", {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__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(UnderlineCTA, {
    className: "pt-1",
    onClick: openForgotPassword
  }, forgotPassword.forgotYourPass), /*#__PURE__*/React.createElement(CTA, {
    className: "mt-4"
  }, /*#__PURE__*/React.createElement(Button, {
    iconPosition: "right",
    fullWidth: true,
    icon: /*#__PURE__*/React.createElement(LockIcon, null),
    variant: hasErrors ? 'primary' : 'disabled',
    disabled: isLoading
  }, buttons.login)), /*#__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"
  }), serverError && /*#__PURE__*/React.createElement(FormError, {
    center: true,
    text: serverError
  }), /*#__PURE__*/React.createElement(SocialLogin, {
    handleClose: handleClose
  }));
};
//# sourceMappingURL=index.js.map