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

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

import React, { useEffect, useState } from 'react';
import dynamic from 'next/dynamic';
import styled from 'styled-components';
import { useProductFunctions, useProductState, useSizesReducer, useGlobalLabels, ProductSEO, useUIState, usePromoCode, useBoolean, RenderInjectedContent, useRelevaOnProductPage, usePixelProductDetails, useScrollTo, useLabelsQuery } from '@sentecacommerce-theme/lib';
import { Breadcrumbs, Typography } from '../../../Common';
import { VariantSelector } from '../VariantsSelector';
import { ProductInfo } from '../ProductInfo';
import { ProductImage } from '../ProductImage';
import { ActionsWrapper } from '../ActionsWrapper';
import { ProductContent } from '../ProductContent';
import { AllSizesList } from '../AllSizesList';
import { Usp } from '../Usp';
import { ProductDescription } from '../ProductDescription';
import { useRouter } from 'next/router';
import { useInView } from 'react-intersection-observer';
import { NAV_ANIMATION, NAV_HEIGHT, NAV_HEIGHT_WITH_VOUCHER } from '../../../Navbar';
import { ProductRating } from '../ProductRating';
import { mapLabels } from '../../../utils';
var SelectSizeModal = dynamic(() => import('../../../Common').then(mod => mod.SelectSizeModal), {
  ssr: false
});
export var ProductPageComponent = (_ref) => {
  var {
    masterVariantId,
    contentInside,
    categories
  } = _ref;
  var {
    state,
    setSize,
    clearSize
  } = useSizesReducer();
  var {
    displayNavbar
  } = useUIState();
  var [translateInfo, setTranslateInfo] = useBoolean();
  var [ref, descriptionInView] = useInView();
  React.useEffect(() => {
    function onScroll() {
      var currentPosition = window.pageYOffset;

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

    window.addEventListener('scroll', onScroll);
    return () => window.removeEventListener('scroll', onScroll);
  }, [displayNavbar, setTranslateInfo, descriptionInView]);
  var {
    hasActiveVoucher
  } = usePromoCode();
  var [fakeElementRef, FooterIsInView] = useInView();
  var {
    infoMessages
  } = useGlobalLabels();
  var {
    variant
  } = useRouter().query;
  var {
    metaData,
    variants,
    selectedVariant
  } = useProductState();
  var labelKeys = selectedVariant == null ? void 0 : selectedVariant.labels;
  var {
    data: labels
  } = useLabelsQuery({
    labels: labelKeys
  });
  var mappedLabels = React.useMemo(() => mapLabels({
    labels: (labels == null ? void 0 : labels.results) || []
  }), [labels == null ? void 0 : labels.results]);
  var {
    selectVariantById
  } = useProductFunctions();
  useEffect(() => {
    selectVariantById(variant || masterVariantId);
  }, [variants, variant]);
  usePixelProductDetails();
  useRelevaOnProductPage();
  var [noSelectedSizeModal, setNoSelectedSizeModal] = useState(false);

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

  var descriptionRef = React.useRef(null);
  var {
    scrollTo
  } = useScrollTo();

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

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

    if (!((_el$description = el.description) != null && _el$description.trim())) return null;
    return /*#__PURE__*/React.createElement(LabelDescription, {
      key: el._id,
      color: el.backgroundColor
    }, /*#__PURE__*/React.createElement(LabelName, {
      color: el.backgroundColor
    }, el.name, ": "), /*#__PURE__*/React.createElement(LabelContent, null, el.description));
  }), /*#__PURE__*/React.createElement(ProductContent, {
    handleClickDescription: handleClickDescription,
    isSizeSelected: state.isSizeSelected,
    renderVariantSelector: () => /*#__PURE__*/React.createElement(VariantSelector, {
      stateSizeId: state.sizeId,
      resetSizeState: clearSize,
      renderSizes: () => /*#__PURE__*/React.createElement(AllSizesList, {
        stateSizeId: state.sizeId,
        setStateSizeId: setSize
      })
    })
  }), /*#__PURE__*/React.createElement(RenderInjectedContent, {
    componentList: contentInside
  }), /*#__PURE__*/React.createElement(Usp, null)))), /*#__PURE__*/React.createElement("span", {
    ref: ref
  }), /*#__PURE__*/React.createElement(ProductDescription, {
    descriptionRef: descriptionRef,
    content: metaData.content
  }), noSelectedSizeModal && /*#__PURE__*/React.createElement(SelectSizeModal, {
    open: noSelectedSizeModal,
    handleClose: () => setNoSelectedSizeModal(false),
    title: "Select size",
    stateSizeId: state.sizeId,
    setStateSizeId: setSize,
    onAddToBag: () => setNoSelectedSizeModal(false)
  }), /*#__PURE__*/React.createElement(FakeElement, {
    ref: fakeElementRef
  }));
};
var MobilePadding = styled.div.attrs({
  className: 'px-4 px-lg-0'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose([""])));
var ContainerFluid = styled.div.attrs({
  className: 'container-lg-fluid mr-auto pt-4 mx-xxl-auto'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\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"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.md.max;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.lg.min;
});
var Container = styled.div.attrs({
  className: 'row g-1'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose([""])));
var BreadcrumbsContainer = styled.span.attrs({
  className: 'd-none d-md-block'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  > ul {\n    margin-top: 0 !important;\n    padding: 0 1rem;\n  }\n  @media (max-width: ", ") {\n    margin-bottom: 1rem;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.max;
});
var ImageListContainer = styled.div.attrs({
  className: 'col-12 col-lg'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    max-width: calc(100% - 45rem);\n    min-width: calc(100% - 45rem);\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.breakpoints.lg.min;
});
var InfoContainer = styled.div.attrs({
  className: 'col gx-4'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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"])), (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.breakpoints.lg.min;
});
var InfoText = styled.div(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  position: sticky;\n  top: 0;\n  @media (min-width: ", ") {\n    transition: transform ", ";\n    transform: translateY(\n      ", "\n    );\n  }\n"])), (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
}, NAV_ANIMATION, props => {
  if (props.translateInfo) {
    if (props.withPromo) return NAV_HEIGHT_WITH_VOUCHER;
    return NAV_HEIGHT;
  }

  return '0';
});
var SKU = styled(Typography).attrs({
  variant: '7'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose(["\n  margin-top: 0.6rem;\n  color: ", ";\n"])), (_ref8) => {
  var {
    theme
  } = _ref8;
  return theme.palette.hint;
});
var FakeElement = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  height: 30rem;\n  top: calc(100vh * 1.3);\n\n  @media (min-width: ", ") {\n    display: none;\n  }\n"])), (_ref9) => {
  var {
    theme
  } = _ref9;
  return theme.breakpoints.lg.min;
});
var ProductInfoContainer = styled.div.attrs({
  className: 'mb-3'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose([""])));
var LabelDescription = styled.div.attrs({
  className: 'mt-3 px-2'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\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"])), (_ref10) => {
  var {
    theme
  } = _ref10;
  return theme.palette.whiteSmoke;
}, (_ref11) => {
  var {
    color
  } = _ref11;
  return color;
});
var LabelName = styled.span.attrs({})(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  font-size: 1.5rem;\n  font-weight: 700;\n  width: fit-content;\n"])));
var LabelContent = styled.span(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  font-size: 1.5rem;\n"])));
//# sourceMappingURL=index.js.map