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

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

import React from 'react';
import styled from 'styled-components';
import { useForm, Controller } from 'react-hook-form';
import { useBoolean } from '@sentecacommerce-theme/lib';
import { Button, Input, Typography } from '../Common';
import { SubscribeModal } from './Components/SubscribeModal';
export var SubscribeToNewsletter = (_ref) => {
  var {
    description,
    placeholder,
    subscribe: subscribeLabel,
    subscribeModal
  } = _ref;
  var [openModal, setOpenModal] = useBoolean();
  var [inputValue, setInputValue] = React.useState('');
  var {
    control
  } = useForm({
    defaultValues: {
      email: ''
    },
    mode: 'onChange'
  });

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

  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Description, null, description), /*#__PURE__*/React.createElement("div", {
    className: "d-flex flex-column flex-lg-row"
  }, /*#__PURE__*/React.createElement(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.createElement(EmailInput, {
      placeholder: placeholder,
      id: "newsletter-email",
      type: "email"
    })
  }), /*#__PURE__*/React.createElement(SubmitButton, {
    bordered: true,
    borderRadius: "small",
    variant: "secondary",
    type: "submit",
    label: subscribeLabel,
    onClick: onSubmit
  })), /*#__PURE__*/React.createElement(SubscribeModal, {
    open: openModal,
    labels: subscribeModal,
    input: inputValue,
    handleClose: () => setOpenModal.off()
  })));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.primary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.md.max;
});
var Wrapper = styled.div.attrs({
  className: 'd-flex align-items-center flex-column flex-lg-row'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 100%;\n"])));
var EmailInput = styled(Input).attrs({
  className: 'm-0'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\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"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.secondary;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.hint;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.max;
});
var SubmitButton = styled(Button).attrs({
  className: ''
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\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"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.primary;
}, (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.breakpoints.md.max;
}, (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.palette.primary;
});
var Description = styled(Typography).attrs({
  as: 'h4',
  className: 'd-flex justify-content-center p-2'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  flex-basis: 60%;\n  color: ", ";\n"])), (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.palette.secondary;
});
var IconWrapper = styled.div(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), (_ref12) => {
  var {
    theme
  } = _ref12;
  return theme.palette.secondary;
});
//# sourceMappingURL=subscribeToNewsletter.component.js.map