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

var _templateObject, _templateObject2, _templateObject3, _templateObject4;

import React from 'react';
import styled from 'styled-components';
import { useForm, Controller } from 'react-hook-form';
import { useSubscribeToNewsletter, useErrors, useBoolean, Html } from '@sentecacommerce-theme/lib';
import { Modal, FormError, Button, Input, Checkbox, Typography } from '../../Common';
export var SubscribeModal = (_ref) => {
  var {
    open,
    labels,
    input,
    handleClose
  } = _ref;
  var [isChecked, setIsChecked] = useBoolean();
  var [isSuccess, setIsSuccess] = useBoolean();
  var {
    subscribe,
    onError
  } = useSubscribeToNewsletter({
    callback: () => {
      setIsSuccess.on();
    }
  });
  var apiError = useErrors(onError, {
    default: 'Something went wrong'
  });
  var {
    handleSubmit,
    errors,
    control,
    setValue
  } = useForm({
    defaultValues: {
      email: ''
    },
    mode: 'onChange'
  });
  React.useEffect(() => {
    setValue('email', input);
  }, [input, setValue]);

  var onSubmit = (_ref2) => {
    var {
      email
    } = _ref2;
    subscribe(email);
  };

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

  return /*#__PURE__*/React.createElement(Modal, {
    maxWidth: "60rem",
    open: open,
    title: labels.title,
    handleClose: onClose
  }, !isSuccess ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Description, null, labels.description), /*#__PURE__*/React.createElement("form", {
    noValidate: true,
    className: "d-flex flex-column",
    onSubmit: handleSubmit(onSubmit),
    style: {
      maxWidth: '50rem'
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/React.createElement("span", {
    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: labels.enterValidEmail
      }
    },
    as: /*#__PURE__*/React.createElement(EmailInput, {
      placeholder: 'Your e-mail',
      id: "newsletter-email",
      type: "email"
    })
  }), /*#__PURE__*/React.createElement(SubmitButton, {
    borderRadius: "small",
    variant: isChecked ? 'primary' : 'disabled',
    type: "submit",
    disabled: !isChecked,
    label: labels.subscribe
  })), /*#__PURE__*/React.createElement(FormError, {
    errors: apiError,
    fieldName: "email"
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "email"
  }), /*#__PURE__*/React.createElement("span", {
    className: "d-flex "
  }, /*#__PURE__*/React.createElement(Checkbox, {
    isChecked: isChecked,
    onChange: () => setIsChecked.toggle(),
    size: "tiny"
  }), /*#__PURE__*/React.createElement(Description, {
    onClick: () => setIsChecked.toggle()
  }, /*#__PURE__*/React.createElement(Html, null, labels.GDPRAgreement))), /*#__PURE__*/React.createElement(SubmitButton, {
    mobile: true,
    borderRadius: "small",
    variant: isChecked ? 'primary' : 'disabled',
    type: "submit",
    disabled: !isChecked,
    label: labels.subscribe
  })))) : /*#__PURE__*/React.createElement("span", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/React.createElement(Success, null, labels.isSuccess), /*#__PURE__*/React.createElement(Button, {
    borderRadius: "small",
    label: "OK",
    onClick: onClose
  })));
};
var EmailInput = styled(Input).attrs({
  className: 'mt-4 mr-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\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"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.secondary;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.md.max;
});
var SubmitButton = styled(Button).attrs(props => {
  return {
    className: "mt-4 " + (props.mobile ? "d-flex d-lg-none" : "d-none d-lg-flex") + " justify-content-center"
  };
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.max;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.primary;
});
var Description = styled(Typography).attrs({
  variant: 5
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  max-width: 50rem;\n  & > div {\n    & > a {\n      text-decoration: underline;\n    }\n  }\n"])));
var Success = styled(Typography).attrs({
  variant: 5,
  className: 'mb-3'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=SubscribeModal.js.map