"use client";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
//#region src/components/LightboxImage.tsx
const LightboxImage = ({ children }) => {
	const [isOpen, setIsOpen] = (0, react.useState)(false);
	const [boundingRect, setBoundingRect] = (0, react.useState)({
		x: 0,
		y: 0,
		width: 0,
		height: 0
	});
	const imageRef = (0, react.useRef)(null);
	const handleMouseUp = () => {
		setIsOpen(!isOpen);
	};
	const handleSetBoundingRect = (ref) => {
		const rect = ref.current?.getBoundingClientRect();
		if (rect) setBoundingRect({
			x: rect.x,
			y: rect.y,
			width: rect.width,
			height: rect.height
		});
	};
	(0, react.useEffect)(() => {
		handleSetBoundingRect(imageRef);
	}, [imageRef]);
	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(_emotion_react_jsx_runtime.Fragment, { children: [
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(DummyImage, {
			isOpen,
			boundingRect
		}),
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(StyledImage, {
			isOpen,
			ref: imageRef,
			boundingRect,
			onMouseDown: () => handleSetBoundingRect(imageRef),
			onMouseUp: handleMouseUp,
			children
		}),
		/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Lightbox, {
			isOpen,
			onClick: handleMouseUp
		})
	] });
};
const DummyImage = _emotion_styled.default.div`
  ${(props) => props.isOpen ? `height: ${props.boundingRect.height}px; width: ${props.boundingRect.width}px;` : ``}
`;
const StyledImage = _emotion_styled.default.div`
  display: flex;
  justify-content: start;
  align-items: center;
  z-index: ${require_styles_z_index.z.modalContainer};

  animation-duration: 0.4s;
  animation-fill-mode: forwards;
  transition: all 0.2s ease-out;

  ${(props) => props.isOpen ? `
    animation-direction: normal;
    position: fixed;
    animation-name: zoomIn;
    pointer-events: none;
  ` : `
    &:hover {
      cursor: zoom-in;
    }
  `}

  img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  @keyframes zoomIn {
    from {
      ${(props) => {
	const { x, y, width, height } = props.boundingRect;
	return `
          top: ${y}px;
          left: ${x}px;
          width: ${width}px;
          height: ${height}px;
        `;
}}
    }
    to {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 24px;
    }
  }
`;
const Lightbox = _emotion_styled.default.div`
  transition: opacity 0.2s ease-out;
  position: fixed;
  opacity: 0;
  z-index: ${require_styles_z_index.z.modalOverlay};
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  ${({ theme, isOpen }) => isOpen ? `
    opacity: 1;
    background: ${theme.bg};

    &:hover {
      cursor: zoom-out;
    }
  ` : `
    pointer-events: none;
  `}
`;
//#endregion
exports.LightboxImage = LightboxImage;
