---
import { Image } from 'astro:assets';
import { readItems } from '@directus/sdk';

import type { HeaderImage } from '@lib/directusTypes';

import GoLinkPrimaryButton from '@components/buttons/GoLinkPrimaryButton.astro';
import GoLinkSecondaryButton from '@components/buttons/GoLinkSecondaryButton.astro';
import directus from '@lib/directus';
import { getDirectusImageURL } from '@/scripts/url';

interface Props {
  title: string;
  subTitle?: string;
  primaryBtn?: string;
  primaryBtnURL?: string;
  secondaryBtn?: string;
  secondaryBtnURL?: string;
}

const { title, subTitle, primaryBtn, primaryBtnURL, secondaryBtn, secondaryBtnURL } = Astro.props;

const imagesData = ((await directus.request(
  readItems('header_images', {
    fields: ['*'],
  })
)) as unknown) as HeaderImage[];

const images = await Promise.all(imagesData.map(async (img) => ({
  ...img,
  src: await getDirectusImageURL(img.image)
})));
---

<section class="grid md:grid-cols-2 md:items-center gap-4 md:gap-8 max-w-340 2xl:max-w-full px-4 py-14 sm:px-6 lg:px-8">
  <div class="md:ml-12">
    <h1 class="smooth-reveal card-text-header block lg:text-7xl">
      <Fragment set:html={title} />
    </h1>
    {subTitle && (
    <p class="smooth-reveal card-text-header-description lg:w-4/5 mt-6">
      {subTitle}
    </p>
    )}
    <div class="smooth-reveal grid sm:inline-flex mt-7 w-full gap-3">
      {primaryBtn && <GoLinkPrimaryButton title={primaryBtn} url={primaryBtnURL} />}
      {secondaryBtn && <GoLinkSecondaryButton title={secondaryBtn} url={secondaryBtnURL} />}
    </div>
  </div>
  <div class="smooth-reveal-fade md:block w-full hidden md:mr-12">
    <div
      class="flex justify-center w-full top-12 md:ml-4 overflow-hidden no-js-fallback"
      id="hero-image-container"
    >
      {images.map((img, index) => (
      <div
        class="hero-image hidden justify-center w-full h-full"
        data-index={index}
      >
        <Image
          class="h-full w-105 scale-100 object-cover object-center"
          src={img.src}
          alt={img.image_alt}
          draggable="false"
          loading="eager"
          format="webp"
          widths={[840]}
          inferSize={true}
        />
      </div>
      ))}
    </div>
    <style>
      .no-js-fallback .hero-image:first-child {
        display: flex !important;
      }
    </style>
    <script is:inline>
      document.getElementById('hero-image-container')?.classList.remove('no-js-fallback');
    </script>
  </div>
</section>

<script>
  function initHeroImage() {
    const container = document.getElementById('hero-image-container');
    if (container) {
      const images = container.querySelectorAll('.hero-image');
      images.forEach(img => {
        img.classList.remove('flex');
        img.classList.add('hidden');
      });
      if (images.length > 0) {
        const randomIndex = Math.floor(Math.random() * images.length);
        images[randomIndex].classList.remove('hidden');
        images[randomIndex].classList.add('flex');
      }
    }
  }
  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initHeroImage);
  } else {
    initHeroImage();
  }
  if ((window as any).swup) {
    (window as any).swup.hooks.on('page:view', initHeroImage); 
  }
</script>