import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
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 { useErrors, useProfile, useIsAuthenticated, useAllSubscriptions, useGlobalLabels, useBasket, useSubscribeForProduct, usePixel } from '@sentecacommerce-theme/lib';
import { Input, Typography, FormError, Button, IconChevronRight, LazyResponsiveImage } from '../../../../../Common';
import { ConsentsList } from './Components';
export var Restock = (_ref) => {
  var _variant$images;

  var {
    backToProducts,
    variant,
    setProducts,
    products
  } = _ref,
      props = _objectWithoutPropertiesLoose(_ref, ["backToProducts", "variant", "setProducts", "products"]);

  var {
    productRestock
  } = useGlobalLabels();
  var {
    pixelRemoveLineItem
  } = usePixel();
  var {
    isAuthenticated,
    isLoading
  } = useIsAuthenticated();
  var {
    data: profileData
  } = useProfile();
  var {
    subscribe,
    error,
    isSubscribed,
    setIsSubscribed
  } = useSubscribeForProduct({
    onSuccess: () => {
      setIsSubscribed.on();
    }
  });
  var {
    removeFromBasket
  } = useBasket({
    productId: variant == null ? void 0 : variant.productId,
    variantId: variant == null ? void 0 : variant.variantId,
    offerId: variant == null ? void 0 : variant.offerId
  });
  var {
    allSubscriptions,
    acceptChecked,
    clickSub,
    checkedSubs
  } = useAllSubscriptions({
    tag: 'news'
  });
  var apiError = useErrors(error, {
    default: 'Something went wrong'
  });
  var {
    handleSubmit,
    errors,
    control,
    setValue
  } = useForm({
    defaultValues: {
      email: ''
    },
    mode: 'onChange'
  });
  React.useEffect(() => {
    setValue('email', isAuthenticated ? profileData == null ? void 0 : profileData.email : '');
  }, [setValue, isLoading, profileData == null ? void 0 : profileData.email, isAuthenticated]);

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

  var removeIndex = products == null ? void 0 : products.map(item => item.productId).indexOf(variant == null ? void 0 : variant.productId);

  var handleClick = () => {
    products == null ? void 0 : products.splice(removeIndex, 1);
    setProducts(products);
    removeFromBasket();
    pixelRemoveLineItem({
      product: {
        id: variant == null ? void 0 : variant.productId,
        sku: variant == null ? void 0 : variant.sku
      },
      currencyCode: variant == null ? void 0 : variant.currencyCode
    });
    backToProducts();
    setIsSubscribed.off();
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, !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(ProductInfo, null, /*#__PURE__*/React.createElement(Image, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    breakpointSizes: {
      xs: '50vw',
      lg: '20vw',
      xl: '20vw',
      xxl: '20vw'
    },
    defaultImageWidth: "40vw",
    imagesMap: variant == null ? void 0 : (_variant$images = variant.images) == null ? void 0 : _variant$images[0]
  })), /*#__PURE__*/React.createElement("div", {
    className: "d-flex flex-column ml-2"
  }, /*#__PURE__*/React.createElement("span", {
    className: " mr-1 mr-lg-5",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(Description, {
    name: true
  }, variant == null ? void 0 : variant.name)), (variant == null ? void 0 : variant.size) && /*#__PURE__*/React.createElement("span", {
    className: " mr-1 mr-lg-5 mt-auto",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(Description, null, variant == null ? void 0 : variant.size)), (variant == null ? void 0 : variant.color) && /*#__PURE__*/React.createElement("span", {
    className: " mr-1 mr-lg-5",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(Description, null, variant == null ? void 0 : variant.color)), (variant == null ? void 0 : variant.quantity) && /*#__PURE__*/React.createElement("span", {
    className: "",
    style: {
      width: '100%'
    }
  }, /*#__PURE__*/React.createElement(Description, null, "Quantity: ", variant == null ? void 0 : variant.quantity, ' ')))), /*#__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),
    variant: !!Object.keys(errors).length ? 'disabled' : 'primary',
    disabled: !!Object.keys(errors).length
  }))))) : /*#__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: handleClick
  })));
};
var EmailInput = styled(Input).attrs({
  className: 'mb-2'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  max-height: 4.4rem;\n  height: 4.4rem;\n  // width: 40rem;\n  background: ", ";\n  &::placeholder {\n    color: ", ";\n  }\n  border-color: ", ";\n  @media (max-width: ", ") {\n    width: 100% !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.palette.primary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.md.max;
});
var ProductInfo = styled.div.attrs({
  className: 'd-flex'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  position: relative;\n"])));
var Image = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  width: 20%;\n"])));
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  width: 100%;\n  & > span {\n    margin-top: 0.2rem;\n  }\n  @media (min-width: ", ") {\n    width: 80%;\n  }\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
});
var Description = styled(Typography).attrs({
  variant: 5
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  max-width: 50rem;\n  font-weight: ", ";\n  ", "\n"])), (_ref8) => {
  var {
    name
  } = _ref8;
  return name ? '700' : '500';
}, (_ref9) => {
  var {
    notice,
    theme
  } = _ref9;
  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