import { useEffect, useState } from "react";
import FadeInSection from "./FadeInSection";
import Image from "next/image";
import {
  backgroundGallery,
  backgroundGalleryPortrait,
  gallery1,
  gallery2,
  gallery3,
  gallery4,
  gallery5,
  gallery6,
  imageGallery1,
  imageGallery2,
  imageGallery3,
  imageGalleryTitle,
} from "./constant/constant";

interface GalleryProps {
  height: number;
  portrait: boolean;
  width: number;
}

export default function Gallery({
  height,
  portrait,
  width,
}: Readonly<GalleryProps>) {
  const heightPercentagePicture = 0.2;
  const widthPercentagePicture1 = 1.1;
  const widthPercentagePicture2 = 1.1;
  const widthPercentagePicture3 = 1.1;
  const widthPercentageTitle = 0.94;
  const [heightPicture, setHeightPicture] = useState(height);
  const [open, setOpen] = useState(false);
  const [picture, setPicture] = useState("");
  const [widthPicture1, setWidthPicture1] = useState(width);
  const [widthPicture2, setWidthPicture2] = useState(width);
  const [widthPicture3, setWidthPicture3] = useState(width);
  const [widthTitle, setWidthTitle] = useState(width);

  useEffect(() => {
    function handleResize() {
      // if (!portrait && height * 0.5 < (width * 4.5) / 16)
      //   setHeightTo(height * 0.5);
      // // Assuming a 16:9 aspect ratio for the image
      // else setHeightTo((width * 4.5) / 16); // Assuming a 16:9 aspect ratio for the image
      // setHeightToPortrait((width * 9) / 16); // Assuming a 16:9 aspect ratio for the image
      setHeightPicture(height * heightPercentagePicture);
      setWidthPicture1(width * widthPercentagePicture1);
      setWidthPicture2(width * widthPercentagePicture2);
      setWidthPicture3(width * widthPercentagePicture3);
      setWidthTitle(width * widthPercentageTitle);
      // setWidthTitle(width * 0.45); // Assuming the title image should be half the screen width
    }

    handleResize();

    // Tambahkan event listener saat komponen dipasang (mount)
    window.addEventListener("resize", handleResize);

    // Hapus event listener saat komponen dilepas (unmount) untuk mencegah memory leak
    return () => {
      window.removeEventListener("resize", handleResize);
    };
  }, [height, portrait, width]);

  function handlePicture(picture: string) {
    setPicture(picture);
    setOpen(true);
  }

  return (
    <div
      className={`bg-center bg-cover flex ${
        portrait && "flex-col items-center justify-center relative"
      } h-screen overflow-hidden w-full`}
      style={{
        backgroundImage: `url(${
          portrait ? backgroundGalleryPortrait : backgroundGallery
        })`,
      }}
    >
      {portrait ? (
        <>
          <FadeInSection>
            <Image
              alt="Gallery Title"
              height={widthTitle}
              width={widthTitle}
              src={imageGalleryTitle}
            />
          </FadeInSection>
          <FadeInSection
            style={{
              height: heightPicture,
              width: widthPicture1,
              position: "relative",
              zIndex: 20,
            }}
          >
            <Image
              alt="Gallery Picture 1"
              height={widthPicture1}
              width={widthPicture1}
              src={imageGallery1}
            />
            <div
              className="absolute flex top-0 left-0 right-0"
              style={{ height: heightPicture }}
            >
              <div className="grow"></div>
              <button
                className="grow"
                onClick={() => handlePicture(gallery1)}
                style={{ width: "20vw" }}
                type="button"
              ></button>
              <button
                className="grow"
                onClick={() => handlePicture(gallery2)}
                style={{ width: "20vw" }}
                type="button"
              ></button>
            </div>
          </FadeInSection>
          <FadeInSection
            style={{
              height: heightPicture,
              width: widthPicture2,
              position: "relative",
              zIndex: 20,
            }}
          >
            <Image
              alt="Gallery Picture 2"
              className="-ml-2"
              height={widthPicture2}
              width={widthPicture2}
              src={imageGallery2}
            />
            <div
              className="absolute flex top-0 left-0 right-0"
              style={{ height: heightPicture, marginTop: "3vh" }}
            >
              <div className="grow"></div>
              <button
                className="grow"
                onClick={() => handlePicture(gallery3)}
                style={{ width: "20vw" }}
                type="button"
              ></button>
              <button
                className="grow"
                onClick={() => handlePicture(gallery4)}
                style={{ width: "20vw" }}
                type="button"
              ></button>
            </div>
          </FadeInSection>
          <FadeInSection
            style={{
              height: heightPicture,
              width: widthPicture3,
              position: "relative",
              zIndex: 20,
            }}
          >
            <Image
              alt="Gallery Picture 3"
              height={widthPicture3}
              width={widthPicture3}
              src={imageGallery3}
            />
            <div
              className="absolute flex top-0 left-0 right-0"
              style={{ height: heightPicture, marginTop: "3vh" }}
            >
              <button
                className="grow"
                onClick={() => handlePicture(gallery5)}
                style={{ width: "30vw" }}
                type="button"
              ></button>
              <button
                className="grow"
                onClick={() => handlePicture(gallery6)}
                style={{ width: "22vw" }}
                type="button"
              ></button>
              <div className="grow"></div>
            </div>
          </FadeInSection>
        </>
      ) : (
        <></>
      )}
      {open && (
        <div className="fixed flex h-screen w-screen items-center justify-center p-2 top-0 z-30">
          <button
            className="fixed h-screen w-screen bg-black/50 top-0 left-0"
            onClick={() => setOpen(false)}
            style={{ cursor: "default" }}
            type="button"
          />
          <button
            className="animate-zoom rounded-xl overflow-hidden"
            onClick={(event) => event.stopPropagation()}
            style={{ cursor: "default" }}
            type="button"
          >
            <Image
              alt="Gallery Fullscreen"
              className="max-w-[90vw] max-h-[90vh] rounded-lg shadow-lg"
              height={height}
              width={width}
              src={picture}
            />
          </button>
        </div>
      )}
    </div>
  );
}