import FadeInSection from "@/components/FadeInSection";
import Image from "next/image";
import { useEffect, useState } from "react";
import {
  backgroundIntroduction,
  backgroundIntroductionPortrait,
  imageIntroduction,
  imageIntroductionInvite,
  imageIntroductionTitle,
} from "./constant/constant";

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

export default function Introduction({
  height,
  portrait,
  width,
}: Readonly<IntroductionProps>) {
  const widthPercentageInvite = 0.73;
  const widthPercentagePicture = 0.82;
  const widthPercentageTitle = 0.92;
  const [widthInvite, setWidthInvite] = useState(width);
  const [widthPicture, setWidthPicture] = 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
      setWidthInvite(width * widthPercentageInvite);
      setWidthPicture(width * widthPercentagePicture);
      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 relative"
      } h-screen w-full overflow-hidden`}
      style={{
        backgroundImage: `url(${
          portrait ? backgroundIntroductionPortrait : backgroundIntroduction
        })`,
      }}
    >
      {portrait ? (
        <>
          <FadeInSection>
            <Image
              alt="Introduction Title"
              height={widthTitle}
              width={widthTitle}
              src={imageIntroductionTitle}
            />
          </FadeInSection>
          <div className="flex items-center justify-end -mr-[5vw] z-10 w-full">
            <FadeInSection>
              <Image
                alt="Introduction Invite"
                height={widthInvite}
                width={widthInvite}
                src={imageIntroductionInvite}
              />
            </FadeInSection>
          </div>
          <FadeInSection
            style={{
              bottom: "7vh",
              left: 0,
              marginLeft: "-6vw",
              position: "absolute",
              zIndex: 0,
            }}
          >
            <Image
              alt="Introduction Picture"
              height={widthPicture}
              width={widthPicture}
              src={imageIntroduction}
            />
          </FadeInSection>
        </>
      ) : (
        <></>
      )}
    </div>
  );
}