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

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

import React, { useState } from 'react';
import styled from 'styled-components';
import { Controller, useForm } from 'react-hook-form';
import { useResetPassword, useGlobalLabels } from '@sentecacommerce-theme/lib';
import { useRouter } from 'next/router';
import { Button, FormError, Input, InputLabel, IconDistrictLogo } from '../Common';
export var ResetPassword = (_ref) => {
  var {
    labels
  } = _ref;
  var router = useRouter();
  var [mutate, {
    isLoading
  }] = useResetPassword({
    onSuccess: () => router.push('/')
  });
  var [serverError,,] = useState('');

  var onSubmit = /*#__PURE__*/function () {
    var _ref3 = _asyncToGenerator(function* (_ref2) {
      var {
        password
      } = _ref2;
      mutate({
        newPassword: password,
        tokenValue: router.query.token
      });
    });

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

  var {
    handleSubmit,
    errors,
    control
  } = useForm({
    defaultValues: {
      password: ''
    },
    mode: 'onSubmit',
    reValidateMode: 'onChange'
  });
  var hasErrors = !Object.keys(errors).length;
  var {
    forms
  } = useGlobalLabels();
  return /*#__PURE__*/React.createElement(Container, {
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/React.createElement(Center, null, /*#__PURE__*/React.createElement(LogoContainer, null, /*#__PURE__*/React.createElement(IconDistrictLogo, null)), /*#__PURE__*/React.createElement(Title, null, labels.title), /*#__PURE__*/React.createElement(LabelCon, null, /*#__PURE__*/React.createElement(InputLabel, null, labels.enterNewPass))), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "password",
    rules: {
      required: forms.requiredField
    },
    as: /*#__PURE__*/React.createElement(Input, {
      placeholder: "Password",
      id: "new-pass",
      type: "password"
    })
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "password"
  }), serverError && /*#__PURE__*/React.createElement(FormError, {
    center: true,
    text: serverError
  }), /*#__PURE__*/React.createElement(ButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
    fullWidth: true,
    variant: hasErrors ? 'primary' : 'disabled',
    disabled: isLoading
  }, labels.updatePassword)));
};
var Title = styled.h3.attrs({
  className: 'mb-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var Container = styled.form.attrs({
  className: 'container-fluid mt-5 mx-auto'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  max-width: 450px;\n  min-height: calc(100vh - 300px);\n"])));
var LabelCon = styled.div.attrs({
  className: 'mb-4'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.light;
});
var ButtonContainer = styled.div.attrs({
  className: 'mt-5'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  & [data-btn] {\n    font-size: 14px !important;\n    padding: 0 !important;\n    min-height: 4.4rem !important;\n  }\n"])));
var Center = styled.div.attrs({})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n\n  & svg {\n    height: 2.4rem;\n  }\n"])));
var LogoContainer = styled.div.attrs({
  className: 'mb-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=resetPassword.component.js.map