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

var _templateObject, _templateObject2;

import React, { useEffect, useState, useCallback } from 'react';
import { Modal, OverflowHidden } from '@sentecacommerce-theme/lib';
import { IconClose } from '../../../../../Common';
import styled from 'styled-components';
import { ProductImageCarousel } from '../ProductImageCarousel';
export var ImageModal = (_ref) => {
  var {
    hide
  } = _ref,
      rest = _objectWithoutPropertiesLoose(_ref, ["hide"]);

  var [mounted, setMounted] = useState(false);
  var handleKey = useCallback(e => {
    if (e.key === 'Escape') {
      return hide();
    }
  }, [hide]);
  useEffect(() => {
    window.addEventListener('keydown', handleKey);
    return () => {
      window.removeEventListener('keydown', handleKey);
    };
  }, [handleKey]); // Fix carousel confusion

  useEffect(() => {
    setMounted(true);
  }, []);
  return /*#__PURE__*/React.createElement(Modal, {
    open: true,
    onClose: hide,
    zIndex: 99999
  }, /*#__PURE__*/React.createElement(Container, null, mounted && /*#__PURE__*/React.createElement(ProductImageCarousel, rest)), /*#__PURE__*/React.createElement(CloseContainer, {
    onClick: hide
  }, /*#__PURE__*/React.createElement(IconClose, null)), /*#__PURE__*/React.createElement(OverflowHidden, null));
};
var Container = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  background-color: ", ";\n\n  & > div:first-child {\n    height: calc(100% - 6.6rem);\n    background-color: ", ";\n\n    @media (min-width: ", ") {\n      height: 100%;\n    }\n  }\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.disabled;
}, (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.breakpoints.lg.min;
});
var CloseContainer = styled.div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n  cursor: pointer;\n  height: 3rem;\n  width: 3rem;\n  border-radius: 50%;\n  background-color: ", ";\n  position: absolute;\n  top: 1rem;\n  right: 1rem;\n\n  & > svg {\n    width: 1rem;\n  }\n\n  &:hover {\n    background-color: ", ";\n  }\n\n  @media (min-width: ", ") {\n    top: 5.6rem;\n    right: 4rem;\n\n    height: 4rem;\n    width: 4rem;\n\n    & > svg {\n      width: 1.4rem;\n    }\n  }\n"])), (_ref5) => {
  var {
    theme
  } = _ref5;
  return theme.palette.secondary;
}, (_ref6) => {
  var {
    theme
  } = _ref6;
  return theme.palette.disabled;
}, (_ref7) => {
  var {
    theme
  } = _ref7;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map