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

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

import React, { useState, useRef } from 'react';
import dynamic from 'next/dynamic';
import styled, { css } from 'styled-components';
import { useProductState, useWindowDimensions, useConfigState } from '@sentecacommerce-theme/lib';
import { LazyResponsiveImage } from '../../../Common';
import { MobileCarousel } from './Components';
var ImageModal = dynamic(() => import('./Components/ImageModal').then(mod => mod.ImageModal), {
  ssr: false
});
export var ProductImage = (_ref) => {
  var _metaData$assets;

  var {
    labels
  } = _ref;
  var {
    imagesConfig
  } = useConfigState();
  var [selectedImage, setSelectedImage] = useState(false);
  var [isVideoPlaying, setIsVideoPlaying] = useState(true);
  var videoRef = useRef();
  var {
    selectedVariant,
    metaData
  } = useProductState();
  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 = index => () => {
    setSelectedImage(index);
  };

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

  var 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 {
    width
  } = useWindowDimensions();
  return /*#__PURE__*/React.createElement(Container, null, labels == null ? void 0 : labels.map((label, i) => {
    if (label.isIcon) {
      return /*#__PURE__*/React.createElement(LabelIcon, {
        key: label._id,
        position: label.location,
        src: label.icon
      });
    }

    return /*#__PURE__*/React.createElement(LabelContainer, {
      key: label._id,
      appearance: label.appearance,
      position: label.location
    }, /*#__PURE__*/React.createElement(Label, null, label.name, " "));
  }), noImages && /*#__PURE__*/React.createElement(FallbackImage, null, /*#__PURE__*/React.createElement(SingleImageWrapper, null, /*#__PURE__*/React.createElement("img", {
    src: imagesConfig.fallbackImage,
    alt: ""
  }))), singleImage && /*#__PURE__*/React.createElement(SingleImageContainer, {
    onClick: openImageModal(0)
  }, /*#__PURE__*/React.createElement(SingleImageWrapper, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
    imagesMap: singleImage,
    breakpointSizes: {
      xs: '100vw',
      sm: '100vw',
      md: '100vw',
      lg: '25vw'
    },
    defaultImageWidth: "100vw"
  }))), !singleImage && /*#__PURE__*/React.createElement(React.Fragment, null, images && /*#__PURE__*/React.createElement(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.createElement(GridWrapper, null, /*#__PURE__*/React.createElement(ImageGrid, null, images == null ? void 0 : images.map((image, i) => {
    var _image$large;

    return /*#__PURE__*/React.createElement(React.Fragment, {
      key: i
    }, productVideo && i === 1 && /*#__PURE__*/React.createElement(GridItem, {
      isOdd: true,
      isThereVideo: true,
      onClick: handleVideoClick
    }, /*#__PURE__*/React.createElement(ImageWrapper, {
      isVideo: true,
      key: image == null ? void 0 : (_image$large = image.large) == null ? void 0 : _image$large.url
    }, /*#__PURE__*/React.createElement("video", {
      ref: videoRef,
      width: "100%",
      height: "auto",
      autoPlay: true,
      muted: true
    }, productVideo.sources.map((source, index) => /*#__PURE__*/React.createElement("source", {
      key: index,
      src: source.url
    }))))), /*#__PURE__*/React.createElement(GridItem, {
      isOdd: isOdd,
      isThereVideo: Boolean(productVideo),
      onClick: openImageModal(i)
    }, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(LazyResponsiveImage, {
      imagesMap: image,
      breakpointSizes: {
        xs: '100vw',
        sm: '100vw',
        md: '100vw',
        lg: '25vw'
      },
      defaultImageWidth: "100vw"
    }))));
  })))), typeof selectedImage === 'number' && images && /*#__PURE__*/React.createElement(ImageModal, {
    images: images,
    video: productVideo,
    hide: hideImageModal,
    selectedImageIndex: selectedImage,
    axis: width >= 1024 ? 'y' : 'x'
  }));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  width: 100%;\n  position: relative;\n  & img {\n    background: #f3f3f3;\n  }\n"])));
var GridWrapper = styled.div.attrs({
  className: 'd-none d-lg-block pl-lg-2 ml-lg-1'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  width: 100%;\n"])));
var ImageGrid = styled.div.attrs({
  className: 'row g-2'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  max-width: 100%;\n"])));
var GridItem = styled.div.attrs({
  className: 'col-6'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n"])), props => props.isOdd && !props.isThereVideo ? css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n          &:nth-last-child(1),\n          &:nth-last-child(2),\n          &:nth-last-child(3) {\n            width: calc(100% / 3);\n          }\n        "]))) : '', props => props.isThereVideo && css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\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 = styled.div.attrs({
  className: 'col-6'
})(_templateObject7 || (_templateObject7 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  width: 100%;\n"])));
var SingleImageContainer = styled.div.attrs({
  className: 'pl-lg-2 ml-lg-1'
})(_templateObject8 || (_templateObject8 = _taggedTemplateLiteralLoose([""])));
var sharedImageWrapperStyles = styled.div(_templateObject9 || (_templateObject9 = _taggedTemplateLiteralLoose(["\n  height: 100%;\n  display: flex;\n  align-items: center;\n\n  & img {\n    width: 100%;\n  }\n"])));
var ImageWrapper = styled(sharedImageWrapperStyles).attrs({
  className: 'my-auto'
})(_templateObject10 || (_templateObject10 = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n"])), props => props.isVideo && '#f3f3f3');
var SingleImageWrapper = styled(sharedImageWrapperStyles).attrs({
  className: 'm-auto'
})(_templateObject11 || (_templateObject11 = _taggedTemplateLiteralLoose(["\n  @media (min-width: ", ") {\n    max-width: 75%;\n  }\n  @media (min-width: ", ") {\n    max-width: 50%;\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.breakpoints.xl.min;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.breakpoints.xxl.min;
});
var LabelContainer = styled.div(_templateObject12 || (_templateObject12 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 1;\n  ", "\n  ", "\n"])), props => props.appearance, props => props.position);
var Label = styled.p.attrs({
  className: 'd-flex align-items-center py-1 px-2 justify-content-center '
})(_templateObject13 || (_templateObject13 = _taggedTemplateLiteralLoose(["\n  line-height: 1.2;\n  font-size: 1.2rem !important;\n\n  @media (min-width: ", ") {\n    font-size: 1.4rem !important;\n  }\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.md.min;
});
var LabelIcon = styled.img(_templateObject14 || (_templateObject14 = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  z-index: 1;\n  ", "\n"])), props => props.position);
//# sourceMappingURL=index.js.map