"use strict";

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

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

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

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

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

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

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

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

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

var _ProductImageCarousel = require("../ProductImageCarousel");

var _templateObject, _templateObject2;

var ImageModal = function ImageModal(_ref) {
  var hide = _ref.hide,
      rest = (0, _objectWithoutPropertiesLoose2["default"])(_ref, ["hide"]);

  var _useState = (0, _react.useState)(false),
      mounted = _useState[0],
      setMounted = _useState[1];

  var handleKey = (0, _react.useCallback)(function (e) {
    if (e.key === 'Escape') {
      return hide();
    }
  }, [hide]);
  (0, _react.useEffect)(function () {
    window.addEventListener('keydown', handleKey);
    return function () {
      window.removeEventListener('keydown', handleKey);
    };
  }, [handleKey]); // Fix carousel confusion

  (0, _react.useEffect)(function () {
    setMounted(true);
  }, []);
  return /*#__PURE__*/_react["default"].createElement(_lib.Modal, {
    open: true,
    onClose: hide,
    zIndex: 99999
  }, /*#__PURE__*/_react["default"].createElement(Container, null, mounted && /*#__PURE__*/_react["default"].createElement(_ProductImageCarousel.ProductImageCarousel, rest)), /*#__PURE__*/_react["default"].createElement(CloseContainer, {
    onClick: hide
  }, /*#__PURE__*/_react["default"].createElement(_Common.IconClose, null)), /*#__PURE__*/_react["default"].createElement(_lib.OverflowHidden, null));
};

exports.ImageModal = ImageModal;

var Container = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (_ref2) {
  var theme = _ref2.theme;
  return theme.palette.secondary;
}, function (_ref3) {
  var theme = _ref3.theme;
  return theme.palette.disabled;
}, function (_ref4) {
  var theme = _ref4.theme;
  return theme.breakpoints.lg.min;
});

var CloseContainer = _styledComponents["default"].div.attrs({
  className: 'd-flex align-items-center justify-content-center'
})(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteralLoose2["default"])(["\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"])), function (_ref5) {
  var theme = _ref5.theme;
  return theme.palette.secondary;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.palette.disabled;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.breakpoints.lg.min;
});
//# sourceMappingURL=index.js.map