import React, { useCallback, useRef, useEffect } from 'react';
import { createPortal } from 'react-dom';

const Lightbox = ({ items, currentUrl, setCurrentUrl }) => {
  const currentItem = items.find((item) => item.url === currentUrl);
  const goToNextItem = useCallback(() => {
    const currentIndex = items.findIndex((item) => item.url === currentUrl);
    const nextItem = items.at((currentIndex + 1) % items.length);
    if (nextItem) {
      setCurrentUrl(nextItem.url);
    }
  }, [currentUrl]);
  const goToPreviousItem = useCallback(() => {
    const currentIndex = items.findIndex((item) => item.url === currentUrl);
    const previousItem = items.at((currentIndex - 1) % items.length);
    if (previousItem) {
      setCurrentUrl(previousItem.url);
    }
  }, [currentUrl]);
  const innerRef = useRef(null);
  useEffect(() => {
    const keydownListener = (e) => {
      if (!currentUrl || !currentItem) {
        return;
      }
      if (e.key === "Escape") {
        e.preventDefault();
        e.stopPropagation();
        setCurrentUrl(void 0);
      }
      if (e.key === "ArrowRight") {
        e.preventDefault();
        e.stopPropagation();
        goToNextItem();
      }
      if (e.key === "ArrowLeft") {
        e.preventDefault();
        e.stopPropagation();
        goToPreviousItem();
      }
    };
    window.addEventListener("keydown", keydownListener);
    return () => {
      window.removeEventListener("keydown", keydownListener);
    };
  }, [currentUrl, currentItem]);
  if (!currentUrl || !currentItem) {
    return null;
  }
  return /* @__PURE__ */ React.createElement(React.Fragment, null, createPortal(
    /* @__PURE__ */ React.createElement("div", {
      className: "absolute top-0 left-0 w-screen h-screen bg-[rgba(0,0,0,0.9)] text-white flex justify-center items-center z-[999999]",
      onClick: (e) => {
        if (e.target !== innerRef.current) {
          setCurrentUrl(void 0);
        }
      }
    }, currentItem.type === "photo" && /* @__PURE__ */ React.createElement("img", {
      className: "cursor-pointer max-w-[90vw] max-h-[90vh]",
      src: currentUrl,
      onClick: () => {
        window.open(currentUrl, "_blank");
      },
      ref: innerRef
    }), currentItem.type === "video" && new URL(currentUrl).hostname.replace("www.", "").startsWith("youtube.com") && /* @__PURE__ */ React.createElement("iframe", {
      width: "560",
      height: "315",
      src: currentUrl.replace("watch?v=", "embed/")
    })),
    document.body
  ));
};

export { Lightbox as L };
//# sourceMappingURL=Lightbox-883afe8f.js.map
