const { Button, PillTag, TextLink } = window.WaraqEnabDesignSystem_f0e2a0;
const { useState, useEffect, useRef, useCallback } = React;

/* Popular dishes shown in the slideshow. Each slide is a drop target:
   drag a photo onto it and it stays. Set video to a file you upload
   (e.g. "media/luqaimat.mp4") and that slide plays instead. */
const SHOW_SLIDES = [
  { dish: ["mahashi", "vine-leaves-normal"], video: null },
  { dish: ["mahashi", "harees-meat"], video: null },
  { dish: ["varied-items", "luqaimat"], video: null },
  { dish: ["mahashi", "chicken-musakhan"], video: null },
  { dish: ["fattah", "fattah-vine-leaves-with-cheetos"], video: null },
  { dish: ["varied-items", "tharid-traditional-arabic-chicken-and-vegetables"], video: null },
  { dish: ["varied-items", "emirati-chebab-pancake-nutella"], video: null },
  { dish: ["mahashi", "kushari"], video: null }
];

const SHOW_MS = 6000;

function ShowSlide({ slide, index, active }) {
  const data = item(slide.dish[0], slide.dish[1]);
  const vid = useRef(null);

  /* only the slide on screen plays */
  useEffect(() => {
    if (!vid.current) return;
    if (active) { const p = vid.current.play(); if (p && p.catch) p.catch(() => {}); }
    else { vid.current.pause(); vid.current.currentTime = 0; }
  }, [active]);

  return (
    <div className="show-slide" role="group" aria-roledescription="slide" aria-label={(index + 1) + " / " + SHOW_SLIDES.length} aria-hidden={!active}>
      <div className="show-media">
        {slide.video
          ? <video ref={vid} src={slide.video} muted loop playsInline preload="metadata" poster={slide.poster || undefined}></video>
          : <image-slot id={"we-show-" + index} shape="rect" placeholder={data ? data.name : "Popular dish"} src={photoUrl(data ? data.name : "arabic food", "we-show-" + index)}></image-slot>}
      </div>
      {data && (
        <div className="show-caption">
          <div className="show-caption-text">
            <span className="t-micro show-count">{String(index + 1).padStart(2, "0")} / {String(SHOW_SLIDES.length).padStart(2, "0")}</span>
            <h3 className="t-heading-lg" style={{ margin: 0 }}>{tn(data)}</h3>
            <span className="t-caption show-price"><Price value={basePrice(data).price} from={basePrice(data).from} /></span>
          </div>
          <Button as="a" href={"dish.html?id=" + data.id} style={{ padding: "var(--space-sm) var(--space-xl)" }} tabIndex={active ? 0 : -1}>{t("See the dish")}</Button>
        </div>
      )}
    </div>
  );
}

function Showcase() {
  const [at, setAt] = useState(0);
  const [paused, setPaused] = useState(false);
  const n = SHOW_SLIDES.length;
  const box = useRef(null);
  const touch = useRef(null);

  const go = useCallback((d) => setAt(v => (v + d + n) % n), [n]);

  /* arrow keys: anywhere once the slideshow has been used, always when focused */
  useEffect(() => {
    const on = (e) => {
      if (e.metaKey || e.ctrlKey || e.altKey) return;
      const tag = (e.target.tagName || "").toLowerCase();
      if (tag === "input" || tag === "textarea" || tag === "select") return;
      const inside = box.current && box.current.contains(document.activeElement);
      const onScreen = box.current && (() => {
        const r = box.current.getBoundingClientRect();
        return r.top < innerHeight * 0.75 && r.bottom > innerHeight * 0.25;
      })();
      if (!inside && !onScreen) return;
      if (e.key === "ArrowRight") { e.preventDefault(); go(1); }
      else if (e.key === "ArrowLeft") { e.preventDefault(); go(-1); }
      else if (e.key === "Home") { e.preventDefault(); setAt(0); }
      else if (e.key === "End") { e.preventDefault(); setAt(n - 1); }
    };
    window.addEventListener("keydown", on);
    return () => window.removeEventListener("keydown", on);
  }, [go, n]);

  /* auto advance, unless a video is running the slide or the user is on it */
  useEffect(() => {
    if (paused) return;
    if (SHOW_SLIDES[at].video) return;
    const timer = setTimeout(() => go(1), SHOW_MS);
    return () => clearTimeout(timer);
  }, [at, paused, go]);

  const start = (e) => { touch.current = e.touches[0].clientX; };
  const end = (e) => {
    if (touch.current == null) return;
    const dx = e.changedTouches[0].clientX - touch.current;
    if (Math.abs(dx) > 45) go(dx < 0 ? 1 : -1);
    touch.current = null;
  };

  return (
    <Band tone="light">
      <div className="wrap">
        <Reveal>
          <SectionHead eyebrow={t("Popular dishes")} title={t("Straight from the kitchen.")}
            lead={t("Use the arrow keys, or swipe, to look through what people order most.")}
            tone="light" action={<TextLink tone="onLight" href="menu.html">{t("See the full menu")}</TextLink>} />
        </Reveal>
        <div className="show" ref={box} tabIndex="0" role="region" aria-roledescription="carousel" aria-label={t("Popular dishes")}
          onMouseEnter={() => setPaused(true)} onMouseLeave={() => setPaused(false)}
          onFocus={() => setPaused(true)} onBlur={() => setPaused(false)}
          onTouchStart={start} onTouchEnd={end}>
          <div className="show-track" style={{ transform: `translateX(${-at * 100}%)` }}>
            {SHOW_SLIDES.map((s, i) => <ShowSlide key={i} slide={s} index={i} active={i === at} />)}
          </div>
          <button className="show-arrow show-prev" onClick={() => go(-1)} aria-label={t("Previous dish")}>‹</button>
          <button className="show-arrow show-next" onClick={() => go(1)} aria-label={t("Next dish")}>›</button>
          {!paused && !SHOW_SLIDES[at].video && <span className="show-progress" key={at}></span>}
        </div>
        <div className="show-dots" role="tablist" aria-label={t("Choose a dish")}>
          {SHOW_SLIDES.map((s, i) => (
            <button key={i} role="tab" aria-selected={i === at} aria-label={String(i + 1)}
              className="show-dot" data-on={i === at ? "1" : "0"} onClick={() => setAt(i)}></button>
          ))}
        </div>
        <p className="t-micro show-hint">{t("Drag a photo onto a slide to replace it. It stays after a refresh.")}</p>
      </div>
    </Band>
  );
}

Object.assign(window, { Showcase, SHOW_SLIDES });