"use strict";

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

exports.__esModule = true;
exports.SubscribeToNewsletter = 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 _SubscribeModal = require("./Components/SubscribeModal");

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

var SubscribeToNewsletter = function SubscribeToNewsletter(_ref) {
  var description = _ref.description,
      placeholder = _ref.placeholder,
      subscribeLabel = _ref.subscribe,
      subscribeModal = _ref.subscribeModal;

  var _useBoolean = (0, _lib.useBoolean)(),
      openModal = _useBoolean[0],
      setOpenModal = _useBoolean[1];

  var _React$useState = _react["default"].useState(''),
      inputValue = _React$useState[0],
      setInputValue = _React$useState[1];

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

  var onSubmit = function onSubmit() {
    setInputValue(control.getValues().email);
    setOpenModal.on();
  };

  return /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(Wrapper, null, /*#__PURE__*/_react["default"].createElement(Description, null, description), /*#__PURE__*/_react["default"].createElement("div", {
    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: subscribeModal.enterValidEmail
      }
    },
    as: /*#__PURE__*/_react["default"].createElement(EmailInput, {
      placeholder: placeholder,
      id: "newsletter-email",
      type: "email"
    })
  }), /*#__PURE__*/_react["default"].createElement(SubmitButton, {
    bordered: true,
    borderRadius: "small",
    variant: "secondary",
    type: "submit",
    label: subscribeLabel,
    onClick: onSubmit
  })), /*#__PURE__*/_react["default"].createElement(_SubscribeModal.SubscribeModal, {
    open: openModal,
    labels: subscribeModal,
    input: inputValue,
    handleClose: function handleClose() {
      return setOpenModal.off();
    }
  })));
};

exports.SubscribeToNewsletter = SubscribeToNewsletter;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  height: 15rem;\n  background: ", ";\n  @media (max-width: ", ") {\n    height: 20rem;\n  }\n\n  & + .footer {\n    margin-top: 0 !important;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.primary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.md.max;
});

var Wrapper = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center flex-column flex-lg-row'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  height: 100%;\n"])));

var EmailInput = (0, _styledComponents["default"])(_Common.Input).attrs({
  className: 'm-0'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-height: 4.4rem;\n  height: 4.4rem;\n\n  background: ", ";\n  width: 25rem;\n\n  &::placeholder {\n    color: ", ";\n  }\n  @media (max-width: ", ") {\n    width: 90vw;\n    margin-top: 2rem;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.palette.secondary;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.hint;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.md.max;
});
var SubmitButton = (0, _styledComponents["default"])(_Common.Button).attrs({
  className: ''
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: relative;\n  top: -0.2rem;\n  max-height: 4.4rem;\n  height: 4.4rem;\n  min-height: 0;\n  width: 100%;\n  margin-left: 1rem;\n  &:hover {\n    color: ", " !important;\n    background: ", ";\n  }\n  @media (max-width: ", ") {\n    height: 20rem;\n    margin: 1rem 0 1rem 0 !important;\n    &:hover {\n      background: ", " !important;\n    }\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.palette.primary;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.primary;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.breakpoints.md.max;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.primary;
});
var Description = (0, _styledComponents["default"])(_Common.Typography).attrs({
  as: 'h4',
  className: 'd-flex justify-content-center p-2'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  text-align: center;\n  flex-basis: 60%;\n  color: ", ";\n"])), function (_ref11) {
  var theme = _ref11.theme;
  return theme.palette.secondary;
});

var IconWrapper = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  left: 50%;\n  top: 50%;\n  transform: translate(-1rem, -1.5rem);\n  width: 2rem;\n  height: 2rem;\n  line-height: 2;\n  color: ", ";\n"])), function (_ref12) {
  var theme = _ref12.theme;
  return theme.palette.secondary;
});
//# sourceMappingURL=subscribeToNewsletter.component.js.map