"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.SubscribeModal = void 0;

var _taggedTemplateLiteralLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteralLoose"));

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _reactHookForm = require("react-hook-form");

var _lib = require("@sentecacommerce-theme/lib");

var _Common = require("../../Common");

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

var SubscribeModal = function SubscribeModal(_ref) {
  var open = _ref.open,
      labels = _ref.labels,
      input = _ref.input,
      handleClose = _ref.handleClose;

  var _useBoolean = (0, _lib.useBoolean)(),
      isChecked = _useBoolean[0],
      setIsChecked = _useBoolean[1];

  var _useBoolean2 = (0, _lib.useBoolean)(),
      isSuccess = _useBoolean2[0],
      setIsSuccess = _useBoolean2[1];

  var _useSubscribeToNewsle = (0, _lib.useSubscribeToNewsletter)({
    callback: function callback() {
      setIsSuccess.on();
    }
  }),
      subscribe = _useSubscribeToNewsle.subscribe,
      onError = _useSubscribeToNewsle.onError;

  var apiError = (0, _lib.useErrors)(onError, {
    "default": 'Something went wrong'
  });

  var _useForm = (0, _reactHookForm.useForm)({
    defaultValues: {
      email: ''
    },
    mode: 'onChange'
  }),
      handleSubmit = _useForm.handleSubmit,
      errors = _useForm.errors,
      control = _useForm.control,
      setValue = _useForm.setValue;

  _react["default"].useEffect(function () {
    setValue('email', input);
  }, [input, setValue]);

  var onSubmit = function onSubmit(_ref2) {
    var email = _ref2.email;
    subscribe(email);
  };

  var onClose = function onClose() {
    setIsSuccess.off();
    setIsChecked.off();
    handleClose();
  };

  return /*#__PURE__*/_react["default"].createElement(_Common.Modal, {
    maxWidth: "60rem",
    open: open,
    title: labels.title,
    handleClose: onClose
  }, !isSuccess ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(Description, null, labels.description), /*#__PURE__*/_react["default"].createElement("form", {
    noValidate: true,
    className: "d-flex flex-column",
    onSubmit: handleSubmit(onSubmit),
    style: {
      maxWidth: '50rem'
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-flex flex-column flex-lg-row"
  }, /*#__PURE__*/_react["default"].createElement(_reactHookForm.Controller, {
    control: control,
    name: "email",
    rules: {
      required: true,
      pattern: {
        value: /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/i,
        message: labels.enterValidEmail
      }
    },
    as: /*#__PURE__*/_react["default"].createElement(EmailInput, {
      placeholder: 'Your e-mail',
      id: "newsletter-email",
      type: "email"
    })
  }), /*#__PURE__*/_react["default"].createElement(SubmitButton, {
    borderRadius: "small",
    variant: isChecked ? 'primary' : 'disabled',
    type: "submit",
    disabled: !isChecked,
    label: labels.subscribe
  })), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: apiError,
    fieldName: "email"
  }), /*#__PURE__*/_react["default"].createElement(_Common.FormError, {
    errors: errors,
    fieldName: "email"
  }), /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-flex "
  }, /*#__PURE__*/_react["default"].createElement(_Common.Checkbox, {
    isChecked: isChecked,
    onChange: function onChange() {
      return setIsChecked.toggle();
    },
    size: "tiny"
  }), /*#__PURE__*/_react["default"].createElement(Description, {
    onClick: function onClick() {
      return setIsChecked.toggle();
    }
  }, /*#__PURE__*/_react["default"].createElement(_lib.Html, null, labels.GDPRAgreement))), /*#__PURE__*/_react["default"].createElement(SubmitButton, {
    mobile: true,
    borderRadius: "small",
    variant: isChecked ? 'primary' : 'disabled',
    type: "submit",
    disabled: !isChecked,
    label: labels.subscribe
  })))) : /*#__PURE__*/_react["default"].createElement("span", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/_react["default"].createElement(Success, null, labels.isSuccess), /*#__PURE__*/_react["default"].createElement(_Common.Button, {
    borderRadius: "small",
    label: "OK",
    onClick: onClose
  })));
};

exports.SubscribeModal = SubscribeModal;
var EmailInput = (0, _styledComponents["default"])(_Common.Input).attrs({
  className: 'mt-4 mr-2'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-height: 4.4rem;\n  height: 4.4rem;\n  width: 50rem !important;\n\n  background: ", ";\n  width: 25rem;\n\n  &::placeholder {\n    color: ", ";\n  }\n  @media (max-width: ", ") {\n    width: 90vw !important;\n    margin-top: 2rem;\n  }\n"])), function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.secondary;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.hint;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.md.max;
});
var SubmitButton = (0, _styledComponents["default"])(_Common.Button).attrs(function (props) {
  return {
    className: "mt-4 " + (props.mobile ? "d-flex d-lg-none" : "d-none d-lg-flex") + " justify-content-center"
  };
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n\n  max-height: 4.4rem;\n  height: 4.4rem;\n  min-height: 0;\n  max-width: 50rem;\n  min-width: 16rem;\n\n  @media (max-width: ", ") {\n    height: 20rem;\n    margin: 1rem 0 1rem 0 !important;\n    &:hover {\n      background: ", " !important;\n    }\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.md.max;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.primary;
});
var Description = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 5
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 50rem;\n  & > div {\n    & > a {\n      text-decoration: underline;\n    }\n  }\n"])));
var Success = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: 5,
  className: 'mb-3'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])([""])));
//# sourceMappingURL=SubscribeModal.js.map