---
import { Picture } from 'astro:assets';
import type { CollectionEntry } from 'astro:content';
import VideoThumbnail from './VideoThumbnail.astro';
import { absoluteUrl, getHeaderVideo } from '../lib/site';

interface Props {
  post: CollectionEntry<'work'>;
}

const { post } = Astro.props;
const headerVideo = getHeaderVideo(post);
const demoLink = post.data.links.find(
  (link) => !link.download && link.label.trim().toLowerCase() === 'demo'
);
const iframeUrl = post.data.article?.iframeThumbnail ? demoLink?.url : undefined;
const iframeSrc = iframeUrl?.startsWith('/') ? absoluteUrl(iframeUrl) : iframeUrl;
const iframeTitle = demoLink
  ? `${demoLink.label}: ${post.data.title}`
  : `Embedded demo: ${post.data.title}`;
const aspectRatio = `${post.data.thumbnail.src.width} / ${post.data.thumbnail.src.height}`;
const iframeThumbnailScript = `
for (const root of document.querySelectorAll('.post-thumbnail--iframe')) {
  const trigger = root.querySelector('[data-thumbnail-iframe-trigger]');
  const frame = root.querySelector('[data-thumbnail-iframe-frame]');
  if (!(trigger instanceof HTMLButtonElement) || !(frame instanceof HTMLIFrameElement)) {
    continue;
  }

  trigger.addEventListener(
    'click',
    () => {
      const src = trigger.dataset.iframeSrc;
      if (!src) return;

      if (window.isSecureContext === false) {
        const opened = window.open('', '_blank');
        if (!opened) {
          window.location.href = src;
        } else {
          opened.opener = null;
          opened.location.href = src;
        }
        return;
      }

      frame.src = src;
      frame.hidden = false;
      root.classList.add('is-active');
      trigger.setAttribute('aria-expanded', 'true');
      frame.focus();
    },
    { once: true }
  );
}
`;
---

{
  headerVideo ? (
    <VideoThumbnail
      class="post-thumbnail post-thumbnail--video"
      variant="banner"
      poster={post.data.thumbnail.src}
      alt={post.data.thumbnail.alt}
      video={headerVideo}
      previewLabel={post.data.title}
      widths={[640, 960, 1280, 1920]}
      sizes="(max-width: 700px) calc(100vw - 3rem), (max-width: 1100px) calc(100vw - 4rem), 56rem"
      loading="eager"
      fetchpriority="high"
    />
  ) : (
    <div
      class:list={['post-thumbnail', iframeSrc && 'post-thumbnail--iframe']}
      style={iframeSrc ? `--post-thumbnail-aspect: ${aspectRatio}` : undefined}
      data-uncropped-preview
      data-preview-label={post.data.title}
    >
      <Picture
        src={post.data.thumbnail.src}
        alt={post.data.thumbnail.alt}
        formats={['avif', 'webp']}
        fallbackFormat="jpg"
        widths={[640, 960, 1280, 1920]}
        sizes="(max-width: 700px) calc(100vw - 3rem), (max-width: 1100px) calc(100vw - 4rem), 56rem"
        quality="high"
        loading="eager"
        fetchpriority="high"
        decoding="async"
      />

      {iframeSrc && (
        <>
          <button
            class="post-thumbnail__play"
            type="button"
            data-thumbnail-iframe-trigger
            data-iframe-src={iframeSrc}
            aria-label={`Play ${demoLink?.label.toLowerCase() ?? 'demo'}`}
            aria-expanded="false"
          >
            <span class="post-thumbnail__play-icon" aria-hidden="true">
              <svg viewBox="0 0 24 24" focusable="false">
                <path d="M8 5v14l11-7z" />
              </svg>
            </span>
            <span class="sr-only">Play {demoLink?.label.toLowerCase() ?? 'demo'}</span>
          </button>
          <iframe
            class="post-thumbnail__iframe"
            data-thumbnail-iframe-frame
            title={iframeTitle}
            src="about:blank"
            allow="fullscreen; webgpu"
            allowfullscreen
            referrerpolicy="strict-origin-when-cross-origin"
            tabindex="0"
            hidden
          />
          <noscript>
            <p class="post-thumbnail__noscript">
              <a href={iframeSrc}>Open {demoLink?.label.toLowerCase() ?? 'demo'}</a>
            </p>
          </noscript>
        </>
      )}
    </div>
  )
}

{
  iframeSrc && !headerVideo && (
    <script is:inline data-thumbnail-iframe-script set:html={iframeThumbnailScript} />
  )
}