gallery kid

import React, { useRef, useEffect } from "react";
import type { ComponentType } from "react";

export function withLightboxEffect(Component: ComponentType): ComponentType {
  return (props) => {
    const ref = useRef<HTMLDivElement | null>(null);

    useEffect(() => {
      // Function to open the clicked image in a lightbox with a fade-in transition
      const openLightbox = (imgSrc: string) => {
        const lightbox = document.createElement("div");
        lightbox.style.position = "fixed";
        lightbox.style.top = "0";
        lightbox.style.left = "0";
        lightbox.style.width = "100%";
        lightbox.style.height = "100%";
        lightbox.style.backgroundColor = "rgba(0, 0, 0, 0.9)";
        lightbox.style.display = "flex";
        lightbox.style.justifyContent = "center";
        lightbox.style.alignItems = "center";
        lightbox.style.zIndex = "9999";
        lightbox.style.opacity = "0"; // Initial opacity for fade-in effect
        lightbox.style.transition = "opacity 0.3s ease"; // Transition for the fade-in effect
        lightbox.style.cursor = "pointer";

        const lightboxImg = document.createElement("img");
        lightboxImg.src = imgSrc;
        lightboxImg.style.maxWidth = "80%";
        lightboxImg.style.maxHeight = "80%";
        lightboxImg.style.objectFit = "contain";
        lightboxImg.style.transition = "opacity 0.3s ease"; // Transition for the image fade-in effect

        lightbox.appendChild(lightboxImg);

        // Create the container for the cross image
        const crossContainer = document.createElement("div");
        crossContainer.style.position = "absolute";
        crossContainer.style.top = "20px";
        crossContainer.style.right = "20px";
        crossContainer.style.cursor = "pointer";

        // Create and add the cross image to the container
        const crossImg = document.createElement("img");
        crossImg.src = "https://i.imgur.com/GWiFAna.png"; // URL for the cross image
        crossImg.style.width = "20px";
        crossImg.style.height = "20px";
        crossContainer.appendChild(crossImg);

        // Append the cross image container to the lightbox
        lightbox.appendChild(crossContainer);
        document.body.appendChild(lightbox);

        // Apply the fade-in effect after appending to the body
        setTimeout(() => {
          lightbox.style.opacity = "1";
        }, 10); // Small timeout ensures the transition occurs

        // Close lightbox on click with a fade-out effect
        lightbox.addEventListener("click", () => {
          lightbox.style.opacity = "0";
          // Wait for the fade-out transition before removing the lightbox
          setTimeout(() => {
            document.body.removeChild(lightbox);
          }, 300); // Match the timeout to the transition duration
        });
      };

      const handleClick = (event) => {
        // Check if it's a mobile device
        if (
          !/(Android|webOS|iPhone|iPad|iPod|BlackBerry|Windows Phone)/i.test(
            navigator.userAgent
          )
        ) {
          if (event.target.tagName === "IMG") {
            openLightbox(event.target.src);
          }
        }
      };

      // Attach click event listener to the component's root element
      const currentRef = ref.current;
      if (currentRef) {
        currentRef.addEventListener("click", handleClick);
      }

      // Cleanup: Remove event listener on component unmount
      return () => {
        if (currentRef) {
          currentRef.removeEventListener("click", handleClick);
        }
      };
    }, []);

    return (
      <div ref={ref}>
        <Component {...props} />
      </div>
    );
  };
}