import { useEffect, useState } from "react";
import FadeInSection from "./FadeInSection";
import Image from "next/image";
import {
  backgroundGuestAttire,
  backgroundGuestAttirePortrait,
  imageGuestAttire,
  imageGuestAttireStars,
  imageGuestAttireTitle,
} from "./constant/constant";

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

export default function GuestAttire({
  height,
  portrait,
  width,
}: Readonly<GuestAttireProps>) {
  const widthPercentagePicture = 0.75;
  const widthPercentageStars = 0.67;
  const widthPercentageTitle = 0.74;
  const [widthPicture, setWidthPicture] = useState(width);
  const [widthStars, setWidthStars] = 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
      setWidthPicture(width * widthPercentagePicture);
      setWidthStars(width * widthPercentageStars);
      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]);

  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 ? backgroundGuestAttirePortrait : backgroundGuestAttire
        })`,
      }}
    >
      {portrait ? (
        <>
          <FadeInSection>
            <Image
              alt="Guest Attire Title"
              className="mr-4"
              height={widthTitle}
              width={widthTitle}
              src={imageGuestAttireTitle}
            />
          </FadeInSection>
          <FadeInSection>
            <Image
              alt="Guest Attire Stars"
              height={widthStars}
              width={widthStars}
              src={imageGuestAttireStars}
            />
          </FadeInSection>
          <FadeInSection>
            <Image
              alt="Guest Attire Picture"
              height={widthPicture}
              width={widthPicture}
              src={imageGuestAttire}
            />
          </FadeInSection>
        </>
      ) : (
        <></>
      )}
    </div>
  );
}