"use strict";

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

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

exports.__esModule = true;
exports.ProductImage = 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 = _interopRequireWildcard3(require("styled-components"));

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

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

var _Components = require("./Components");

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

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

var ProductImage = function ProductImage(_ref) {
  var _metaData$assets;

  var labels = _ref.labels;

  var _useConfigState = (0, _lib.useConfigState)(),
      imagesConfig = _useConfigState.imagesConfig;

  var _useState = (0, _react.useState)(false),
      selectedImage = _useState[0],
      setSelectedImage = _useState[1];

  var _useState2 = (0, _react.useState)(true),
      isVideoPlaying = _useState2[0],
      setIsVideoPlaying = _useState2[1];

  var videoRef = (0, _react.useRef)();

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

  var images = selectedVariant == null ? void 0 : selectedVariant.images;
  var productVideo = metaData == null ? void 0 : (_metaData$assets = metaData.assets) == null ? void 0 : _metaData$assets['product-video'];
  var singleImage = (images == null ? void 0 : images.length) === 1 && images[0];
  var noImages = (images == null ? void 0 : images.length) === 0;

  var openImageModal = function openImageModal(index) {
    return function () {
      setSelectedImage(index);
    };
  };

  var hideImageModal = function hideImageModal() {
    setSelectedImage(false);
  };

  var handleVideoClick = function handleVideoClick() {
    if (!isVideoPlaying) {
      var _videoRef$current;

      videoRef == null ? void 0 : (_videoRef$current = videoRef.current) == null ? void 0 : _videoRef$current.play();
      setIsVideoPlaying(true);
    } else {
      var _videoRef$current2;

      videoRef == null ? void 0 : (_videoRef$current2 = videoRef.current) == null ? void 0 : _videoRef$current2.pause();
      setIsVideoPlaying(false);
    }
  };

  var isOdd = Boolean(((images == null ? void 0 : images.length) || 2) % 2);

  var _useWindowDimensions = (0, _lib.useWindowDimensions)(),
      width = _useWindowDimensions.width;

  return /*#__PURE__*/_react["default"].createElement(Container, null, labels == null ? void 0 : labels.map(function (label, i) {
    return /*#__PURE__*/_react["default"].createElement(LabelContainer, {
      key: label.id,
      offset: i
    }, /*#__PURE__*/_react["default"].createElement(Label, {
      textColor: label.textColor,
      background: label.backgroundColor
    }, label.name, ' '));
  }), noImages && /*#__PURE__*/_react["default"].createElement(FallbackImage, null, /*#__PURE__*/_react["default"].createElement(SingleImageWrapper, null, /*#__PURE__*/_react["default"].createElement("img", {
    src: imagesConfig.fallbackImage,
    alt: ""
  }))), singleImage && /*#__PURE__*/_react["default"].createElement(SingleImageContainer, {
    onClick: openImageModal(0)
  }, /*#__PURE__*/_react["default"].createElement(SingleImageWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
    imagesMap: singleImage,
    breakpointSizes: {
      xs: '100vw',
      sm: '100vw',
      md: '100vw',
      lg: '25vw'
    },
    defaultImageWidth: "100vw"
  }))), !singleImage && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, images && /*#__PURE__*/_react["default"].createElement(_Components.MobileCarousel, {
    openImageModal: openImageModal // Key is used to prevent carousel confusion
    // when different colors have different images count
    ,
    key: images == null ? void 0 : images.length,
    images: images,
    video: productVideo
  }), /*#__PURE__*/_react["default"].createElement(GridWrapper, null, /*#__PURE__*/_react["default"].createElement(ImageGrid, null, images == null ? void 0 : images.map(function (image, i) {
    var _image$large;

    return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
      key: i
    }, productVideo && i === 1 && /*#__PURE__*/_react["default"].createElement(GridItem, {
      isOdd: true,
      isThereVideo: true,
      onClick: handleVideoClick
    }, /*#__PURE__*/_react["default"].createElement(ImageWrapper, {
      isVideo: true,
      key: image == null ? void 0 : (_image$large = image.large) == null ? void 0 : _image$large.url
    }, /*#__PURE__*/_react["default"].createElement("video", {
      ref: videoRef,
      width: "100%",
      height: "auto",
      autoPlay: true,
      muted: true
    }, productVideo.sources.map(function (source, index) {
      return /*#__PURE__*/_react["default"].createElement("source", {
        key: index,
        src: source.url
      });
    })))), /*#__PURE__*/_react["default"].createElement(GridItem, {
      isOdd: isOdd,
      isThereVideo: Boolean(productVideo),
      onClick: openImageModal(i)
    }, /*#__PURE__*/_react["default"].createElement(ImageWrapper, null, /*#__PURE__*/_react["default"].createElement(_Common.LazyResponsiveImage, {
      imagesMap: image,
      breakpointSizes: {
        xs: '100vw',
        sm: '100vw',
        md: '100vw',
        lg: '25vw'
      },
      defaultImageWidth: "100vw"
    }))));
  })))), typeof selectedImage === 'number' && images && /*#__PURE__*/_react["default"].createElement(ImageModal, {
    images: images,
    video: productVideo,
    hide: hideImageModal,
    selectedImageIndex: selectedImage,
    axis: width >= 1024 ? 'y' : 'x'
  }));
};

exports.ProductImage = ProductImage;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n  position: relative;\n  & img {\n    background: #f3f3f3;\n  }\n"])));

var GridWrapper = _styledComponents["default"].div.attrs({
  className: 'd-none d-lg-block pl-lg-2 ml-lg-1'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  width: 100%;\n"])));

var ImageGrid = _styledComponents["default"].div.attrs({
  className: 'row g-2'
})(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  max-width: 100%;\n"])));

var GridItem = _styledComponents["default"].div.attrs({
  className: 'col-6'
})(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  ", "\n\n  ", "\n"])), function (props) {
  return props.isOdd && !props.isThereVideo ? (0, _styledComponents.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteralLoose2["default"])(["\n          &:nth-last-child(1),\n          &:nth-last-child(2),\n          &:nth-last-child(3) {\n            width: calc(100% / 3);\n          }\n        "]))) : '';
}, function (props) {
  return props.isThereVideo && (0, _styledComponents.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteralLoose2["default"])(["\n      &:nth-last-child(1),\n      &:nth-last-child(2),\n      &:nth-last-child(3),\n      &:nth-last-child(4) {\n        width: calc(100% / 3);\n      }\n    "])));
});

var FallbackImage = _styledComponents["default"].div.attrs({
  className: 'col-6'
})(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n  width: 100%;\n"])));

var SingleImageContainer = _styledComponents["default"].div.attrs({
  className: 'pl-lg-2 ml-lg-1'
})(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteralLoose2["default"])([""])));

var sharedImageWrapperStyles = _styledComponents["default"].div(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  & img {\n    width: 100%;\n  }\n"])));

var ImageWrapper = (0, _styledComponents["default"])(sharedImageWrapperStyles).attrs({
  className: 'my-auto'
})(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background-color: ", ";\n"])), function (props) {
  return props.isVideo && '#f3f3f3';
});
var SingleImageWrapper = (0, _styledComponents["default"])(sharedImageWrapperStyles).attrs({
  className: 'm-auto'
})(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  @media (min-width: ", ") {\n    max-width: 75%;\n  }\n  @media (min-width: ", ") {\n    max-width: 50%;\n  }\n"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.breakpoints.xl.min;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.breakpoints.xxl.min;
});

var LabelContainer = _styledComponents["default"].div(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  position: absolute;\n  z-index: 1;\n  bottom: ", "rem;\n\n  @media (min-width: ", ") {\n    top: ", "rem;\n    right: 0.5rem;\n  }\n"])), function (_ref4) {
  var offset = _ref4.offset;
  return 2 + 3 * offset;
}, function (_ref5) {
  var theme = _ref5.theme;
  return theme.breakpoints.lg.min;
}, function (_ref6) {
  var offset = _ref6.offset;
  return 2 + 3 * offset;
});

var Label = _styledComponents["default"].p.attrs({
  className: 'd-flex align-items-center py-1 px-2 mb-1 '
})(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteralLoose2["default"])(["\n  background: ", ";\n  color: ", ";\n\n  line-height: 1.2;\n  font-size: 1.2rem !important;\n\n  @media (min-width: ", ") {\n    font-size: 1.4rem !important;\n  }\n"])), function (_ref7) {
  var background = _ref7.background;
  return background;
}, function (_ref8) {
  var textColor = _ref8.textColor;
  return textColor;
}, function (_ref9) {
  var theme = _ref9.theme;
  return theme.breakpoints.md.min;
});
//# sourceMappingURL=index.js.map