import { useEffect, useState } from "react";
import FadeInSection from "./FadeInSection";
import Image from "next/image";
import WishesForm from "./forms/WishesForm";
import {
  backgroundWishes,
  backgroundWishesPortrait,
  imageWishesFooter,
  imageWishesTitle,
} from "./constant/constant";

interface WishesProps {
  height: number;
  id: number;
  name: string;
  portrait: boolean;
  width: number;
}

export default function Wishes({
  height,
  id,
  name,
  portrait,
  width,
}: Readonly<WishesProps>) {
  const widthPercentageFooter = 0.91;
  const widthPercentageTitle = 0.81;
  const [widthFooter, setWidthFooter] = 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
      setWidthFooter(width * widthPercentageFooter);
      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-size-[100%_100%] flex flex-col h-screen items-center justify-between relative"
      style={{
        backgroundImage: `url(${
          portrait ? backgroundWishesPortrait : backgroundWishes
        })`,
      }}
    >
      <FadeInSection>
        <Image
          alt="Wishes Title"
          height={widthTitle}
          width={widthTitle}
          src={imageWishesTitle}
        />
      </FadeInSection>
      <WishesForm id={id} name={name} />
      {/* <FadeInSection> */}
      <Image
        alt="Wishes Footer"
        height={widthFooter}
        width={widthFooter}
        src={imageWishesFooter}
      />
      {/* </FadeInSection> */}
    </div>
  );
}