---
interface Props {
  class?: string; // Class of the marquee
  marqueeElements: number; // Number of elements
  marqueeElementWidth: string; // Width of the marquee
  marqueeElementWidthAuto?: boolean; // Is the width auto
  marqueeElementWidthResponsive: string; // Width of the marquee
  marqueePauseOnHover?: boolean; // Duration of the marquee
  marqueeReverse?: "reverse" | "" | undefined; // Duration of the marquee
  marqueeDuration?: string; // Duration of the marquee
}

let {
  marqueeElements,
  marqueeElementWidth,
  marqueeElementWidthAuto = true,
  marqueeElementWidthResponsive,
  marqueePauseOnHover = false,
  marqueeDuration = "50s",
  marqueeReverse = "",
} = Astro.props;

// Remove value of if `marqueeElementWidth`, `marqueeElementWidthResponsive` marqueeElementWidthAuto true
if (marqueeElementWidthAuto) {
  marqueeElementWidth = "";
  marqueeElementWidthResponsive = "";
}
---

<div
  class:list={[
    "marquee",
    {
      "marquee-revers": marqueeReverse,
      "marquee-pause-on-hover": marqueePauseOnHover,
    },
  ]}
  style={`--marquee-elements:${marqueeElements};--marquee-element-width-responsive:calc(${marqueeElementWidthResponsive} / var(--marquee-elements) * ${marqueeElements});--marquee-element-width:calc(${marqueeElementWidth} / var(--marquee-elements) * ${marqueeElements});${"--marquee-duration:" + marqueeDuration};--marquee-reverse:${marqueeReverse};`}>
  <div
    class:list={[
      "marquee-content flex items-center",
      { "marquee-element-width-auto": marqueeElementWidthAuto },
      Astro.props.class,
    ]}>
    <slot />
  </div>
</div>
<script>
  function updateMarquee() {
    const marqueeContents = document.querySelectorAll(
      ".marquee-element-width-auto",
    ) as NodeListOf<HTMLElement>;

    marqueeContents.forEach((marqueeContent) => {
      const images = marqueeContent.querySelectorAll("img");

      images.forEach((img) => {
        if (!img.complete) {
          // wait for images to load
          img.addEventListener("load", () => updateImageSize(img));
        } else {
          updateImageSize(img);
        }
      });

      // update total width after images resized
      const totalWidth = marqueeContent.scrollWidth;
      marqueeContent.style.setProperty("--total-width", `${totalWidth / 2}px`);
    });
  }

  function updateImageSize(img: HTMLImageElement) {
    const computed = getComputedStyle(img);
    const height = parseFloat(computed.height); // Tailwind-applied height
    const aspectRatio = img.naturalWidth / img.naturalHeight;
    const width = height * aspectRatio;

    img.setAttribute("height", height.toString());
    img.setAttribute("width", width.toString());
  }

  // Debounced resize handler
  let resizeTimeout: number;
  window.addEventListener("resize", () => {
    clearTimeout(resizeTimeout);
    resizeTimeout = window.setTimeout(updateMarquee, 100);
  });

  // Initial run
  updateMarquee();
</script>
