import FadeInSection from "@/components/FadeInSection";
import Image from "next/image";
import { useEffect, useState } from "react";
import { calculateTimeLeft } from "@/utils/utils";
import {
  backgroundEvent,
  backgroundEventPortrait,
  imageEvent,
  imageEventTime,
  imageEventTimer,
  imageEventTitle,
} from "./constant/constant";

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

export default function Event({
  height,
  portrait,
  width,
}: Readonly<EventProps>) {
  const targetDateTime = "2025-08-23T18:00:00";
  const ratioHeightPicture = 0.59;
  const widthPercentagePicture = 0.86;
  const widthPercentageTime = 0.59;
  const widthPercentageTimer = 0.72;
  const widthPercentageTitle = 0.83;
  const [timeLeft, setTimeLeft] = useState(calculateTimeLeft(targetDateTime));
  const [widthPicture, setWidthPicture] = useState(width);
  const [widthTime, setWidthTime] = useState(width);
  const [widthTimer, setWidthTimer] = 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);
      setWidthTime(width * widthPercentageTime);
      setWidthTimer(width * widthPercentageTimer);
      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]);

  useEffect(() => {
    const timer = setTimeout(() => {
      setTimeLeft(calculateTimeLeft(targetDateTime));
    }, 1000);

    return () => clearTimeout(timer);
  });

  return (
    <div
      className={`bg-center bg-cover flex ${
        portrait && "flex-col relative"
      } h-screen overflow-hidden w-full`}
      style={{
        backgroundImage: `url(${
          portrait ? backgroundEventPortrait : backgroundEvent
        })`,
      }}
    >
      {portrait ? (
        <>
          <FadeInSection style={{ position: "absolute", top: "14vh" }}>
            <Image
              alt="Event Title"
              height={widthTitle}
              width={widthTitle}
              src={imageEventTitle}
            />
          </FadeInSection>
          <div className="absolute flex justify-end top-[35vh] w-full">
            <FadeInSection style={{ marginRight: "-6vw" }}>
              <Image
                alt="Event Time"
                height={widthTime}
                width={widthTime}
                src={imageEventTime}
              />
            </FadeInSection>
          </div>
          <FadeInSection
            style={{
              left: "-14vw",
              bottom: "15vh",
              position: "absolute",
              zIndex: 0,
            }}
          >
            <Image
              alt="Event Picture"
              height={widthPicture}
              width={widthPicture}
              src={imageEvent}
            />
          </FadeInSection>
          <FadeInSection
            style={{ position: "absolute", right: "3vw", bottom: "4vh" }}
          >
            <div
              className="bg-center bg-contain font-medium relative text-4xl text-white text-shadow-lg/50 text-shadow-black"
              style={{
                backgroundImage: `url(${imageEventTimer})`,
                height: widthTimer * ratioHeightPicture,
                width: widthTimer,
              }}
            >
              <div
                className="absolute flex justify-center w-[33vw]"
                style={{ top: "28%", left: "-2%" }}
              >
                {timeLeft.days}
              </div>
              <div
                className="absolute flex justify-center w-full"
                style={{ top: "28%" }}
              >
                {timeLeft.hours}
              </div>
              <div
                className="absolute flex justify-center w-[33vw]"
                style={{ top: "28%", right: "-2%" }}
              >
                {timeLeft.minutes}
              </div>
            </div>
          </FadeInSection>
        </>
      ) : (
        <></>
      )}
    </div>
  );
}