"use strict";

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

var _interopRequireWildcard3 = require("@babel/runtime/helpers/interopRequireWildcard");

exports.__esModule = true;
exports.ProductPageComponent = void 0;

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

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

var _react = _interopRequireWildcard3(require("react"));

var _dynamic = _interopRequireDefault(require("next/dynamic"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _lib = require("@sentecacommerce-theme/lib");

var _Common = require("../../../Common");

var _VariantsSelector = require("../VariantsSelector");

var _ProductInfo = require("../ProductInfo");

var _ProductImage = require("../ProductImage");

var _ActionsWrapper = require("../ActionsWrapper");

var _ProductContent = require("../ProductContent");

var _AllSizesList = require("../AllSizesList");

var _Usp = require("../Usp");

var _ProductDescription = require("../ProductDescription");

var _router = require("next/router");

var _reactIntersectionObserver = require("react-intersection-observer");

var _Navbar = require("../../../Navbar");

var _ProductRating = require("../ProductRating");

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12;

var SelectSizeModal = (0, _dynamic["default"])(function () {
  return Promise.resolve().then(function () {
    return (0, _interopRequireWildcard2["default"])(require('../../../Common'));
  }).then(function (mod) {
    return mod.SelectSizeModal;
  });
}, {
  ssr: false
});

var ProductPageComponent = function ProductPageComponent(_ref) {
  var _selectedVariant$labe;

  var masterVariantId = _ref.masterVariantId,
      contentInside = _ref.contentInside,
      categories = _ref.categories;

  var _useSizesReducer = (0, _lib.useSizesReducer)(),
      state = _useSizesReducer.state,
      setSize = _useSizesReducer.setSize,
      clearSize = _useSizesReducer.clearSize;

  var _useUIState = (0, _lib.useUIState)(),
      displayNavbar = _useUIState.displayNavbar;

  var _useBoolean = (0, _lib.useBoolean)(),
      translateInfo = _useBoolean[0],
      setTranslateInfo = _useBoolean[1];

  var _useInView = (0, _reactIntersectionObserver.useInView)(),
      ref = _useInView[0],
      descriptionInView = _useInView[1];

  _react["default"].useEffect(function () {
    function onScroll() {
      var currentPosition = window.pageYOffset;

      if (currentPosition > 160 && displayNavbar && !descriptionInView) {
        setTranslateInfo.on();
      } else {
        setTranslateInfo.off();
      }
    }

    window.addEventListener('scroll', onScroll);
    return function () {
      return window.removeEventListener('scroll', onScroll);
    };
  }, [displayNavbar, setTranslateInfo, descriptionInView]);

  var _usePromoCode = (0, _lib.usePromoCode)(),
      hasActiveVoucher = _usePromoCode.hasActiveVoucher;

  var _useInView2 = (0, _reactIntersectionObserver.useInView)(),
      fakeElementRef = _useInView2[0],
      FooterIsInView = _useInView2[1];

  var _useGlobalLabels = (0, _lib.useGlobalLabels)(),
      infoMessages = _useGlobalLabels.infoMessages;

  var variant = (0, _router.useRouter)().query.variant;

  var _useProductState = (0, _lib.useProductState)(),
      metaData = _useProductState.metaData,
      variants = _useProductState.variants,
      selectedVariant = _useProductState.selectedVariant;

  var _useProductFunctions = (0, _lib.useProductFunctions)(),
      selectVariantById = _useProductFunctions.selectVariantById;

  (0, _react.useEffect)(function () {
    selectVariantById(variant || masterVariantId);
  }, [variants, variant]);
  (0, _lib.usePixelProductDetails)();
  (0, _lib.useRelevaOnProductPage)();

  var _useState = (0, _react.useState)(false),
      noSelectedSizeModal = _useState[0],
      setNoSelectedSizeModal = _useState[1];

  var onAddToBasket = function onAddToBasket() {
    if (!state.isSizeSelected) setNoSelectedSizeModal(true);
  };

  var LabelTypeEnum;

  (function (LabelTypeEnum) {
    LabelTypeEnum["Top"] = "top";
    LabelTypeEnum["Bottom"] = "bottom";
    LabelTypeEnum["Background"] = "background";
    LabelTypeEnum["Text"] = "text";
  })(LabelTypeEnum || (LabelTypeEnum = {}));

  var mappedLabels = selectedVariant == null ? void 0 : (_selectedVariant$labe = selectedVariant.labels) == null ? void 0 : _selectedVariant$labe.map(function (el) {
    var _el$tags$filter, _el$tags$filter$, _el$tags$filter2, _el$tags$filter2$, _el$tags$filter3;

    var backgroundColor = (_el$tags$filter = el.tags.filter(function (str) {
      return str.includes(LabelTypeEnum.Background);
    })) == null ? void 0 : (_el$tags$filter$ = _el$tags$filter[0]) == null ? void 0 : _el$tags$filter$.split('-');
    var textColor = (_el$tags$filter2 = el.tags.filter(function (str) {
      return str.includes(LabelTypeEnum.Text);
    })) == null ? void 0 : (_el$tags$filter2$ = _el$tags$filter2[0]) == null ? void 0 : _el$tags$filter2$.split('-');
    var position = (_el$tags$filter3 = el.tags.filter(function (str) {
      return str.includes(LabelTypeEnum.Top) || str.includes(LabelTypeEnum.Bottom);
    })) == null ? void 0 : _el$tags$filter3[0];
    return {
      position: position,
      textColor: textColor == null ? void 0 : textColor[textColor.length - 1],
      backgroundColor: backgroundColor == null ? void 0 : backgroundColor[backgroundColor.length - 1],
      name: el.name,
      description: el.description,
      id: el._id
    };
  });

  var descriptionRef = _react["default"].useRef(null);

  var _useScrollTo = (0, _lib.useScrollTo)(),
      scrollTo = _useScrollTo.scrollTo;

  var handleClickDescription = function handleClickDescription() {
    if (descriptionRef.current) {
      scrollTo(descriptionRef.current);
    }
  };

  return /*#__PURE__*/_react["default"].createElement(ContainerFluid, null, /*#__PURE__*/_react["default"].createElement(Container, null, /*#__PURE__*/_react["default"].createElement(_lib.ProductSEO, null), /*#__PURE__*/_react["default"].createElement(BreadcrumbsContainer, null, /*#__PURE__*/_react["default"].createElement(_Common.Breadcrumbs, {
    data: metaData == null ? void 0 : metaData.categories
  })), /*#__PURE__*/_react["default"].createElement(MobilePadding, null, /*#__PURE__*/_react["default"].createElement("div", {
    className: "mb-3"
  }, /*#__PURE__*/_react["default"].createElement(_ProductInfo.ProductInfo, {
    mobile: true
  }))), /*#__PURE__*/_react["default"].createElement(ImageListContainer, null, /*#__PURE__*/_react["default"].createElement(_ProductImage.ProductImage, {
    labels: mappedLabels
  })), /*#__PURE__*/_react["default"].createElement(InfoContainer, null, /*#__PURE__*/_react["default"].createElement(InfoText, {
    translateInfo: translateInfo,
    withPromo: !hasActiveVoucher
  }, /*#__PURE__*/_react["default"].createElement(_ProductRating.ProductRating, null), /*#__PURE__*/_react["default"].createElement(ProductInfoContainer, null, /*#__PURE__*/_react["default"].createElement(_ProductInfo.ProductInfo, null)), /*#__PURE__*/_react["default"].createElement(_VariantsSelector.VariantSelector, {
    stateSizeId: state.sizeId,
    resetSizeState: clearSize,
    renderSizes: function renderSizes() {
      return /*#__PURE__*/_react["default"].createElement(_AllSizesList.AllSizesList, {
        stateSizeId: state.sizeId,
        setStateSizeId: setSize
      });
    }
  }), /*#__PURE__*/_react["default"].createElement(_ActionsWrapper.ActionsWrapper, {
    show: !FooterIsInView && !noSelectedSizeModal,
    isSizeSelected: state.isSizeSelected,
    onAddToBasket: onAddToBasket
  }), /*#__PURE__*/_react["default"].createElement(SKU, null, infoMessages.sku, ": ", selectedVariant == null ? void 0 : selectedVariant.sku), mappedLabels == null ? void 0 : mappedLabels.map(function (el) {
    var _el$description;

    if (!((_el$description = el.description) != null && _el$description.trim())) return null;
    return /*#__PURE__*/_react["default"].createElement(LabelDescription, {
      key: el.id,
      color: el.backgroundColor
    }, /*#__PURE__*/_react["default"].createElement(LabelName, {
      color: el.backgroundColor
    }, el.name, ": "), el.description);
  }), /*#__PURE__*/_react["default"].createElement(_ProductContent.ProductContent, {
    handleClickDescription: handleClickDescription,
    isSizeSelected: state.isSizeSelected,
    renderVariantSelector: function renderVariantSelector() {
      return /*#__PURE__*/_react["default"].createElement(_VariantsSelector.VariantSelector, {
        stateSizeId: state.sizeId,
        resetSizeState: clearSize,
        renderSizes: function renderSizes() {
          return /*#__PURE__*/_react["default"].createElement(_AllSizesList.AllSizesList, {
            stateSizeId: state.sizeId,
            setStateSizeId: setSize
          });
        }
      });
    }
  }), /*#__PURE__*/_react["default"].createElement(_lib.RenderInjectedContent, {
    componentList: contentInside
  }), /*#__PURE__*/_react["default"].createElement(_Usp.Usp, null)))), /*#__PURE__*/_react["default"].createElement("span", {
    ref: ref
  }), /*#__PURE__*/_react["default"].createElement(_ProductDescription.ProductDescription, {
    descriptionRef: descriptionRef,
    content: metaData.content
  }), noSelectedSizeModal && /*#__PURE__*/_react["default"].createElement(SelectSizeModal, {
    open: noSelectedSizeModal,
    handleClose: function handleClose() {
      return setNoSelectedSizeModal(false);
    },
    title: "Select size",
    stateSizeId: state.sizeId,
    setStateSizeId: setSize,
    onAddToBag: function onAddToBag() {
      return setNoSelectedSizeModal(false);
    }
  }), /*#__PURE__*/_react["default"].createElement(FakeElement, {
    ref: fakeElementRef
  }));
};

exports.ProductPageComponent = ProductPageComponent;

var MobilePadding = _styledComponents["default"].div.attrs({
  className: 'px-4 px-lg-0'
})(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var ContainerFluid = _styledComponents["default"].div.attrs({
  className: 'container-lg-fluid mr-auto pt-4 mx-xxl-auto'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 192rem !important;\n\n  @media (max-width: ", ") {\n    margin-bottom: -30rem;\n  }\n  @media (min-width: ", ") {\n    padding-right: 20rem;\n    padding-left: 5rem;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.md.max;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.lg.min;
});

var Container = _styledComponents["default"].div.attrs({
  className: 'row g-1'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var BreadcrumbsContainer = _styledComponents["default"].span.attrs({
  className: 'd-none d-md-block'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  > ul {\n    margin-top: 0 !important;\n    padding: 0 1rem;\n  }\n  @media (max-width: ", ") {\n    margin-bottom: 1rem;\n  }\n"])), function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.md.max;
});

var ImageListContainer = _styledComponents["default"].div.attrs({
  className: 'col-12 col-lg'
})(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    max-width: calc(100% - 45rem);\n    min-width: calc(100% - 45rem);\n  }\n"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
});

var InfoContainer = _styledComponents["default"].div.attrs({
  className: 'col gx-4'
})(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  padding-left: var(--bs-gutter-x);\n  padding-right: var(--bs-gutter-x);\n  @media (min-width: ", ") {\n    max-width: 45rem;\n    min-width: 45rem;\n    padding-left: 8rem;\n    padding-right: calc(var(--bs-gutter-x) / 2);\n  }\n"])), function (_ref6) {
  var theme = _ref6.theme;
  return theme.breakpoints.lg.min;
});

var InfoText = _styledComponents["default"].div(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: sticky;\n  top: 0;\n  @media (min-width: ", ") {\n    transition: transform ", ";\n    transform: translateY(\n      ", "\n    );\n  }\n"])), function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
}, _Navbar.NAV_ANIMATION, function (props) {
  if (props.translateInfo) {
    if (props.withPromo) return _Navbar.NAV_HEIGHT_WITH_VOUCHER;
    return _Navbar.NAV_HEIGHT;
  }

  return '0';
});

var SKU = (0, _styledComponents["default"])(_Common.Typography).attrs({
  variant: '7'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  margin-top: 0.6rem;\n  color: ", ";\n"])), function (_ref8) {
  var theme = _ref8.theme;
  return theme.palette.hint;
});

var FakeElement = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  height: 30rem;\n  top: calc(100vh * 1.3);\n\n  @media (min-width: ", ") {\n    display: none;\n  }\n"])), function (_ref9) {
  var theme = _ref9.theme;
  return theme.breakpoints.lg.min;
});

var ProductInfoContainer = _styledComponents["default"].div.attrs({
  className: 'mb-3'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var LabelDescription = _styledComponents["default"].div.attrs({
  className: 'mt-3 px-2'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  min-height: 5rem;\n  background: ", ";\n  border-left: 0.5rem solid ", ";\n  border-radius: 0.4rem;\n  box-shadow: -0.3rem 0 0.6rem -0.5rem #ccc;\n"])), function (_ref10) {
  var theme = _ref10.theme;
  return theme.palette.whiteSmoke;
}, function (_ref11) {
  var color = _ref11.color;
  return color;
});

var LabelName = _styledComponents["default"].span.attrs({})(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  font-size: 1.7rem;\n  font-weight: 700;\n  width: fit-content;\n"])));
//# sourceMappingURL=index.js.map