import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";

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

import React from 'react';
import styled from 'styled-components';
import { useForm, Controller } from 'react-hook-form';
import { useUIFunctions, useConfigState, useErrors, useProfile, useIsAuthenticated, useAllSubscriptions, useGlobalLabels, useSubscribeForProduct } from '@sentecacommerce-theme/lib';
import { Modal, Input, Typography, FormError, Button, IconArrowDown, IconChevronRight } from '../../';
import { SizeList, QuantityList, ConsentsList } from './Components';
export var SubscribeForProduct = (_ref) => {
  var {
    selectedVariant,
    sizes,
    setStateSizeId
  } = _ref,
      props = _objectWithoutPropertiesLoose(_ref, ["selectedVariant", "handleClose", "sizes", "setStateSizeId"]);

  var {
    closeViewById
  } = useUIFunctions();
  var {
    views
  } = useConfigState();
  var {
    productRestock
  } = useGlobalLabels();
  var {
    isAuthenticated,
    isLoading
  } = useIsAuthenticated();
  var {
    data: profileData
  } = useProfile();
  var {
    allSubscriptions,
    acceptChecked,
    clickSub,
    checkedSubs
  } = useAllSubscriptions({
    tag: 'news'
  });

  var onSuccess = () => {
    setIsSubscribed.on();
  };

  var {
    subscribe,
    isSubscribed,
    setIsSubscribed,
    error
  } = useSubscribeForProduct({
    onSuccess: onSuccess
  });
  var apiError = useErrors(error, {
    default: 'Something went wrong'
  });
  var {
    handleSubmit,
    errors,
    control,
    setValue
  } = useForm({
    defaultValues: {
      email: isAuthenticated ? profileData == null ? void 0 : profileData.email : '',
      size: '',
      quantity: '1'
    },
    mode: 'onChange'
  });
  React.useEffect(() => {
    setValue('email', profileData == null ? void 0 : profileData.email);
  }, [isLoading, setValue, profileData == null ? void 0 : profileData.email]);

  var onSubmit = (_ref2) => {
    var {
      email,
      quantity
    } = _ref2;
    return subscribe({
      email: email,
      sku: selectedVariant == null ? void 0 : selectedVariant.sku,
      quantity: quantity
    }), acceptChecked(email);
  };

  var onClose = () => {
    setIsSubscribed.off();
    closeViewById(views.subForProduct);
  };

  var sortedSizes = Object.keys(sizes).sort((a, b) => sizes[a].extra.sort - sizes[b].extra.sort);
  return /*#__PURE__*/React.createElement(Modal, _extends({
    title: "Email me if back in stock",
    open: true,
    handleClose: onClose // maxWidth="50rem"

  }, props), !isSubscribed ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("form", {
    noValidate: true,
    className: "d-flex flex-column ",
    onSubmit: handleSubmit(onSubmit)
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-flex flex-column flex-lg-row "
  }, /*#__PURE__*/React.createElement("div", {
    className: "d-flex flex-column"
  }, /*#__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: 'Please enter valid email'
      }
    },
    as: /*#__PURE__*/React.createElement(EmailInput, {
      placeholder: productRestock.placeholders.email,
      id: "restock-email",
      type: "email"
    })
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: apiError,
    fieldName: "email"
  }), /*#__PURE__*/React.createElement(FormError, {
    errors: errors,
    fieldName: "email"
  }), /*#__PURE__*/React.createElement("div", {
    className: "d-flex "
  }, /*#__PURE__*/React.createElement("span", {
    className: "flex-column mr-1 mr-lg-5",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(Description, null, productRestock.chooseSize), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "size",
    rules: {
      required: true
    },
    as: /*#__PURE__*/React.createElement(SizeSelector, null, /*#__PURE__*/React.createElement(SelectSize, {
      onChange: e => setStateSizeId(e.target.value)
    }, /*#__PURE__*/React.createElement(SizeList, {
      data: sortedSizes,
      placeholder: productRestock.placeholders.size,
      sizes: sizes
    })), /*#__PURE__*/React.createElement(IconArrowDown, null))
  })), /*#__PURE__*/React.createElement("span", {
    className: "flex-column",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(Description, null, productRestock.chooseQuantity), /*#__PURE__*/React.createElement(Controller, {
    control: control,
    name: "quantity",
    rules: {
      required: true
    },
    as: /*#__PURE__*/React.createElement(SizeSelector, null, /*#__PURE__*/React.createElement(SelectSize, null, /*#__PURE__*/React.createElement(QuantityList, {
      placeholder: productRestock.placeholders.quantity
    })), /*#__PURE__*/React.createElement(IconArrowDown, null))
  }))), /*#__PURE__*/React.createElement(ConsentsList, {
    allSubs: allSubscriptions,
    checkedSubs: checkedSubs,
    clickSub: clickSub
  })), /*#__PURE__*/React.createElement("div", {
    style: {
      width: '100%',
      height: '100%'
    },
    className: "mt-lg-auto"
  }, /*#__PURE__*/React.createElement(SubmitButton, {
    type: "submit",
    label: productRestock.button,
    icon: /*#__PURE__*/React.createElement(IconChevronRight, null),
    disabled: !!Object.keys(errors).length,
    variant: !!Object.keys(errors).length ? 'disabled' : 'primary'
  }))))) : /*#__PURE__*/React.createElement("span", {
    className: "d-flex flex-column"
  }, /*#__PURE__*/React.createElement(Success, null, productRestock.done), /*#__PURE__*/React.createElement(Button, {
    borderRadius: "small",
    label: productRestock.doneButton,
    onClick: onClose
  })));
};
var SelectSize = styled.select.attrs({
  className: 'pr-1'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  width: 100%;\n  height: 100%;\n  padding-left: 1rem;\n  height: 100%;\n  width: 100%;\n  color: ", ";\n  background: none;\n  border: 0px;\n  border-radius: 0.2rem;\n  appearance: none;\n  box-shadow: none;\n  outline: 0px;\n"])), (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var SizeSelector = styled.div.attrs({
  className: 'd-flex mr-lg-5'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n  color: ", ";\n  border: 0.1rem solid ", ";\n  width: 100%;\n  height: 4.4rem;\n  border-radius: 0.4rem;\n\n  border-color: ", ";\n\n  & svg {\n    width: 1.4rem;\n    height: 1.4rem;\n    stroke-width: 2;\n    position: absolute;\n    right: 1rem;\n    top: calc(50% - 0.8rem);\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.hint;
}, (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.disabled;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.primary;
});
var EmailInput = styled(Input).attrs({
  className: 'mb-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  max-height: 4.4rem;\n  height: 4.4rem;\n\n  // width: 40rem;\n\n  background: ", ";\n\n  &::placeholder {\n    color: ", ";\n  }\n  border-color: ", ";\n  @media (max-width: ", ") {\n    width: 100% !important;\n    margin-top: 2rem;\n  }\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.palette.secondary;
}, (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.hint;
}, (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.palette.primary;
}, (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.breakpoints.md.max;
});
var SubmitButton = styled(Button).attrs({
  className: "d-flex justify-content-center align-items-center mt-4  ml-lg-auto"
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  max-height: 5rem;\n  height: 5rem;\n  min-height: 0;\n\n  width: 100%;\n\n  & > span {\n    margin-top: 0.2rem;\n  }\n\n  @media (min-width: ", ") {\n    width: 80%;\n  }\n"])), (_ref11) => {
  var {
    theme
  } = _ref11;
  return theme.breakpoints.lg.min;
});
var Description = styled(Typography).attrs({
  variant: 5
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  max-width: 50rem;\n  ", "\n"])), (_ref12) => {
  var {
    notice,
    theme
  } = _ref12;
  return notice && "\n    align-self: flex-end;\n    font-size: 1.2rem;\n    opacity: 0.8;\n    max-width: 100%;\n    @media (min-width: " + theme.breakpoints.lg.min + ") {\n      max-width: 91%;\n    }\n  ";
});
var Success = styled(Typography).attrs({
  variant: 5,
  className: 'mb-3'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map