"use client";

import FadeInSection from "@/components/FadeInSection";
import Image from "next/image";
import { useEffect, useState } from "react";
import {
  backgroundCover,
  backgroundCoverPortrait,
  imageTitle,
  imageTo,
} from "./constant/constant";

interface CoverProps {
  height: number;
  name?: string;
  person?: number;
  portrait: boolean;
  setOpen: (value: boolean) => void;
  width: number;
}

export default function Cover({
  height,
  name,
  person,
  portrait,
  setOpen,
  width,
}: Readonly<CoverProps>) {
  const widthPercentageTitle = 0.84;
  const widthPercentageTo = 0.89;
  const [isOpen, setIsOpen] = useState(false);
  const [heightTo, setHeightTo] = useState(0);
  const [heightToPortrait, setHeightToPortrait] = useState(0);
  const [widthTitle, setWidthTitle] = useState(width);
  const [widthTo, setWidthTo] = 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 * widthPercentageTitle * 9) / 16); // Assuming a 16:9 aspect ratio for the image
      setWidthTitle(width * widthPercentageTitle);
      setWidthTo(width * widthPercentageTo);
    }

    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]);

  useEffect(() => setOpen(isOpen), [setOpen, isOpen]);

  return (
    <button
      className={`absolute bg-center bg-cover flex ${
        portrait ? "flex-col items-center justify-between" : "justify-end"
      } h-screen w-full overflow-hidden transition-transform duration-1000 ${
        isOpen ? "-translate-y-full" : "translate-y-0"
      }`}
      onClick={() => setIsOpen(true)}
      style={{
        backgroundImage: `url(${
          portrait ? backgroundCoverPortrait : backgroundCover
        })`,
      }}
      type="button"
    >
      {portrait ? (
        <>
          <FadeInSection>
            <Image
              alt="Title"
              className="mt-[4vh] ml-[3vw]"
              height={widthTitle}
              width={widthTitle}
              src={imageTitle}
            />
          </FadeInSection>
          <FadeInSection>
            <div
              className="bg-center bg-contain bg-no-repeat flex items-center justify-center ml-[1vw] mb-[6vh] relative text-black sm:text-3xl"
              style={{
                backgroundImage: `url(${imageTo})`,
                height: heightToPortrait,
                width: widthTo,
              }}
            >
              {name}
              <div className="absolute bottom-[13.5%] sm:bottom-[15.5%] right-[43%] font-medium italic text-white text-shadow-sm/50 text-shadow-black">
                {person}
              </div>
            </div>
          </FadeInSection>
        </>
      ) : (
        <div className="flex flex-col items-center justify-between w-[50vw]">
          <div className="flex h-[50vh] items-center justify-center pt-12 sm:pt-12 pr-8">
            <FadeInSection>
              <Image
                alt="Title"
                height={widthTitle}
                width={widthTitle}
                src={imageTitle}
              />
            </FadeInSection>
          </div>
          <div
            className="flex items-center justify-center pr-12 w-full"
            style={{ height: heightTo }}
          >
            <FadeInSection style={{ width: "100%" }}>
              <div
                className="bg-center bg-contain bg-no-repeat flex items-center justify-center relative text-black text-xs sm:text-sm md:text-base lg:text-2xl xl:text-3xl w-full"
                style={{
                  height: heightTo,
                  backgroundImage: `url(${imageTo})`,
                }}
              >
                {name}
                <div className="absolute bottom-[20.5%] sm:bottom-[19.5%] md:bottom-[18%] lg:bottom-[17.5%] right-[43%] font-medium italic text-white text-shadow-sm/50 text-shadow-black">
                  {person}
                </div>
              </div>
            </FadeInSection>
          </div>
        </div>
      )}
    </button>
  );
}