import { useEffect, useState } from "react";
import FadeInSection from "./FadeInSection";
import Image from "next/image";
import {
  backgroundVenue,
  backgroundVenuePortrait,
  imageVenue,
  imageVenueAddress,
  imageVenueTitle,
} from "./constant/constant";

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

export default function Venue({
  height,
  portrait,
  width,
}: Readonly<VenueProps>) {
  const mapLink = "https://maps.app.goo.gl/ihSchntcrH2wKjiU6";
  const widthPercentageAddress = 0.84;
  const widthPercentagePicture = 0.88;
  const widthPercentageTitle = 0.97;
  const [widthAddress, setWidthAddress] = 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
      setWidthAddress(width * widthPercentageAddress);
      setWidthPicture(width * widthPercentagePicture);
      setWidthTitle(width * widthPercentageTitle);
      // setWidthScreen(width);
      // 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 relative"
      } h-screen overflow-hidden w-full`}
      style={{
        backgroundImage: `url(${
          portrait ? backgroundVenuePortrait : backgroundVenue
        })`,
      }}
    >
      {portrait ? (
        <>
          <FadeInSection
            style={{ position: "absolute", left: "-2vw", top: "2vh" }}
          >
            <Image
              alt="Venue Title"
              height={widthTitle}
              width={widthTitle}
              src={imageVenueTitle}
            />
          </FadeInSection>
          <div className="absolute flex flex-col items-center justify-center top-0 bottom-0 w-full">
            <FadeInSection style={{ marginLeft: "-3vw", zIndex: 10 }}>
              <a href={mapLink} target="_blank">
                <Image
                  alt="Venue Picture"
                  height={widthPicture}
                  width={widthPicture}
                  src={imageVenue}
                />
              </a>
            </FadeInSection>
          </div>
          <div className="absolute flex flex-col items-center justify-center top-[50vh] bottom-0 w-full">
            <FadeInSection style={{ marginLeft: "-5vw" }}>
              <Image
                alt="Venue Adress"
                height={widthAddress}
                width={widthAddress}
                src={imageVenueAddress}
              />
            </FadeInSection>
          </div>
        </>
      ) : (
        <></>
      )}
    </div>
  );
}