// Pagina In de media. Inhoud staat in media-content.js, deze module doet de opmaak.

function MediaVideo({ id, titel, poster }) {
  const [spelen, setSpelen] = useState(false);
  const [gedempt, setGedempt] = useState(true);
  const [toestemming, setToestemming] = useState(!!(window.bbConsent && window.bbConsent.derden));
  const kaderRef = useRef(null);

  useEffect(() => {
    const onConsent = (e) => setToestemming(!!(e.detail && e.detail.derden));
    window.addEventListener("bb-consent", onConsent);
    return () => window.removeEventListener("bb-consent", onConsent);
  }, []);

  // Start gedempt zodra de video in beeld komt, stop weer bij het verlaten van het beeld.
  useEffect(() => {
    if (!toestemming || !kaderRef.current) return;
    const rm = window.matchMedia("(prefers-reduced-motion: reduce)").matches
      || document.documentElement.classList.contains("bb-rm-force");
    if (rm) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => {
        if (e.isIntersecting) setSpelen(true);
        else setSpelen((was) => (gedempt ? false : was));
      });
    }, { threshold: 0.55 });
    obs.observe(kaderRef.current);
    return () => obs.disconnect();
  }, [toestemming, gedempt]);

  if (!toestemming) {
    return (
      <div className="bb-md__video" ref={kaderRef}>
        <div className="bb-md__consent">
          <Icon name="shield" size={28} />
          <p>
            Deze video staat op YouTube, een dienst van Google. YouTube kan daarbij cookies plaatsen,
            daarom laden wij de video alleen als je toestemming hebt gegeven voor cookies van derden.
            Je keuze kun je hier direct aanpassen, en later altijd via Cookie-instellingen onderaan
            elke pagina.
          </p>
          <Button variant="yellow" onClick={() => window.bbOpenCookieInstellingen()}>Cookie-instellingen openen</Button>
          <a className="bb-md__link" style={{ color: "#fff" }} href={"https://www.youtube.com/watch?v=" + id} target="_blank" rel="noopener noreferrer">
            Bekijk op YouTube <Icon name="arrowRight" size={16} />
          </a>
        </div>
      </div>
    );
  }

  return (
    <>
      <div className="bb-md__video" ref={kaderRef}>
        {spelen ? (
          <iframe
            src={"https://www.youtube-nocookie.com/embed/" + id + "?autoplay=1&rel=0&mute=" + (gedempt ? 1 : 0)}
            title={titel} allow="accelerometer; autoplay; clipboard-write; encrypted-media; picture-in-picture"
            referrerPolicy="strict-origin-when-cross-origin"
            allowFullScreen
          ></iframe>
        ) : (
          <button type="button" className="bb-md__play" onClick={() => { setGedempt(false); setSpelen(true); }}>
            <img className="bb-md__poster" src={poster || ("https://i.ytimg.com/vi/" + id + "/hqdefault.jpg")} alt="" />
            <span className="ic" aria-hidden="true">
              <svg width="26" height="26" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 5v14l11-7z"></path></svg>
            </span>
            <span className="t">Video afspelen: {titel}</span>
          </button>
        )}
      </div>
      <p className="bb-md__videohulp">
        {spelen && gedempt && "De video start zonder geluid. Zet het geluid aan in de speler. "}
        Speelt de video niet af?{" "}
        <a href={"https://www.youtube.com/watch?v=" + id} target="_blank" rel="noopener noreferrer">Bekijk hem op YouTube</a>.
      </p>
    </>
  );
}

/* De foto van een item is klikbaar naar de hoofdpagina van de nieuwsbron, als die in
   media-content.js bij bronHome staat. Heeft de bron geen website, dan blijft het een
   gewone foto. Opent altijd in een nieuw tabblad, zodat de bezoeker de mediapagina niet
   kwijtraakt. */
function BronFoto({ item, className, children }) {
  if (!item.bronHome) return <div className={className}>{children}</div>;
  return (
    <a
      className={className + " bb-md__fotolink"}
      href={item.bronHome}
      target="_blank"
      rel="noopener noreferrer"
      aria-label={"Naar de website van " + (item.bronKort || item.bron) + ", opent in een nieuw tabblad"}
      onClick={window.bbPreviewKlik ? window.bbPreviewKlik(item.bronHome, item.bronKort || item.bron) : undefined}
    >
      {children}
      <span className="bb-md__fotolink-ic" aria-hidden="true"><Icon name="arrowRight" size={16} /></span>
    </a>
  );
}

function MediaItem({ item, spiegel }) {
  const heeftFoto = !!item.foto;
  return (
    <FadeUp id={"artikel-" + item.id} className={"bb-md__item" + (heeftFoto ? "" : " bb-md__item--geenfoto") + (heeftFoto && spiegel ? " bb-md__item--spiegel" : "")}>
      {heeftFoto && (
        <BronFoto item={item} className={"bb-md__itemfoto" + (item.fotoFit === "contain" ? " bb-md__itemfoto--contain" : "")}>
          <img src={item.foto} alt={item.fotoAlt || ""} style={{ objectPosition: item.focus || undefined, objectFit: item.fotoFit || undefined }} />
          {item.logoLabel && (
            <span className={"bb-news-card__source bb-news-card__source--" + item.logoCls}>{item.logoLabel}</span>
          )}
        </BronFoto>
      )}
      <div className="bb-md__body">
        <div className="bb-md__meta">
          <span className="bb-md__bron">{item.bronKort || item.bron}</span>
          <time dateTime={item.sorteer}>{item.datum}</time>
        </div>
        <h3>{item.titel}</h3>
        {item.ondertitel && <p className="bb-md__onder">{item.ondertitel}</p>}
        {item.samenvatting && <p className="bb-md__sam">{item.samenvatting}</p>}
        {item.citaat && (
          <>
            <blockquote>„{item.citaat}&#8221;</blockquote>
            <p className="bb-md__bronregel">Uit het artikel van {item.bron}.</p>
          </>
        )}
        {item.notitie && (
          <p className="bb-md__notitie">
            <Icon name="shield" size={18} />
            <span>{item.notitie}</span>
          </p>
        )}
        <div className="bb-md__acts">
          {item.href && (
            <a className="bb-md__link" href={item.href} target="_blank" rel="noopener noreferrer" onClick={window.bbPreviewKlik(item.href, item.titel, item.previewBeeld)}>
              {item.hrefLabel || "Lees het volledige artikel"} <Icon name="arrowRight" size={16} />
            </a>
          )}
          {item.extra && (
            <a className="bb-md__link" href={item.extra.href} target="_blank" rel="noopener noreferrer" onClick={window.bbPreviewKlik(item.extra.href, item.titel)}>
              {item.extra.label} <Icon name="arrowRight" size={16} />
            </a>
          )}
          {item.download && (
            <a className="bb-md__link" href={item.download.href} download>
              {item.download.label} <Icon name="arrowRight" size={16} />
            </a>
          )}
        </div>
      </div>
      {item.video && (
        <div className="bb-md__videoblok">
          <p className="bb-md__videokicker">Bekijk de video</p>
          <h4 className="bb-md__videotitel">{item.videoTitel || item.titel}</h4>
          <MediaVideo id={item.video} titel={item.videoTitel || item.titel} poster={item.videoPoster} />
        </div>
      )}
    </FadeUp>
  );
}

function MediaHero({ item }) {
  return (
    <div className="bb-md__hero">
      <Container>
        <FadeUp className="bb-md__herocard">
          <div className="bb-md__herofoto">
            <BronFoto item={item} className="bb-md__herofotolink">
              <img src={item.foto} alt={item.fotoAlt || ""} style={item.focus ? { objectPosition: item.focus } : null} />
            </BronFoto>
            <span className="bb-md__badge"><Icon name="check" size={16} /> Uitgelicht</span>
          </div>
          <div className="bb-md__herobody">
            <div className="bb-md__meta">
              <span className="bb-md__bron">{item.bronKort}</span>
              <time dateTime={item.sorteer}>{item.datum}</time>
            </div>
            <div className="bb-md__stemmen">
              <b>1.233</b><span>stemmen van buurtbewoners</span>
            </div>
            <h2>{item.titel}</h2>
            <p className="bb-md__onder">{item.ondertitel}</p>
            <p>{item.samenvatting}</p>
            <div className="bb-md__acts">
              <Button variant="primary" href={item.href} external>
                {item.hrefLabel} <Icon name="arrowRight" size={16} />
              </Button>
            </div>
          </div>
        </FadeUp>
      </Container>
    </div>
  );
}

function InDeMediaPage({ go }) {
  const items = window.BB_MEDIA || [];
  const bel = bbBellink();
  const [filter, setFilter] = useState("alles");

  /* Een item telt als artikel zodra er een publicatie over Buiten Buddies is geschreven.
     Dat geldt ook voor Noord aan Zet, dat type 'prijs' heeft: dat is een bericht van de
     gemeente en hoort dus in de telling en onder het filter Artikelen. Een item dat ook
     een video heeft, zoals dat van Haarlem Nieuws, telt in beide filters mee. */
  const isArtikel = (i) => i.type === "artikel" || i.type === "prijs";
  const isVideo = (i) => !!i.video;

  const zichtbaar = filter === "alles"
    ? items
    : filter === "video"
      ? items.filter(isVideo)
      : items.filter(isArtikel);

  const chips = [
    ["alles", "Alles"],
    ["artikel", "Artikelen"],
    ["video", "Video"],
  ];

  const aantalArtikelen = items.filter(isArtikel).length;
  const aantalVideo = items.filter(isVideo).length;

  return (
    <main id="main" tabIndex="-1" className="bb-md" data-screen-label="In de media">
      <header className="bb-md__head">
        <Container>
          <FadeUp><p className="bb-md__kicker">In de media</p></FadeUp>
          <FadeUp delay={60}><h1>Buiten Buddies in de media</h1></FadeUp>
          <FadeUp delay={110}>
            <p className="bb-md__lead">
              Artikelen, video's en interviews over de buurtapp die jongeren weer buiten laat afspreken.
            </p>
          </FadeUp>
          <FadeUp delay={160}>
            <ul className="bb-md__stats">
              <li><b>1.233</b><span>stemmen Noord aan Zet</span></li>
              <li><b>{aantalArtikelen}</b><span>{aantalArtikelen === 1 ? "artikel" : "artikelen"}</span></li>
              <li><b>{aantalVideo}</b><span>{aantalVideo === 1 ? "video" : "video’s"}</span></li>
            </ul>
          </FadeUp>
        </Container>
      </header>

      <div className="bb-md__filter">
        <Container>
          <ul className="bb-md__chips">
            {chips.map(([k, l]) => (
              <li key={k}>
                <button
                  type="button" className="bb-md__chip" aria-pressed={filter === k}
                  onClick={() => setFilter(k)}
                >{l}</button>
              </li>
            ))}
          </ul>
        </Container>
      </div>

      <Container>
        <div className="bb-md__list">
          {(filter === "alles" || filter === "artikel" || filter === "video") && (
            <div className="bb-md__sectiekop">
              <h2>{filter === "video" ? (aantalVideo === 1 ? "Video" : "Video’s") : filter === "artikel" ? (aantalArtikelen === 1 ? "Artikel" : "Artikelen") : "Alle publicaties"}</h2>
            </div>
          )}
          {zichtbaar.map((i, idx) => <MediaItem key={i.id} item={i} spiegel={idx % 2 === 1} />)}
        </div>
      </Container>

      {/* Banner onder het laatste artikel: de steun van de gemeente Haarlem, met de subsidie
          van Noord aan Zet erbij. Laag van hoogte, maar in het donkergroen van de huisstijl
          met een geel accent, zodat hij opvalt na de rij witte artikelkaarten. */}
      <Container>
        <FadeUp className="bb-md__gem">
          <span className="bb-md__gem-glow" aria-hidden="true"></span>
          <div className="bb-md__gem-tekst">
            <p className="k">Mede mogelijk gemaakt door gemeente Haarlem</p>
            <p className="t">Haarlem gelooft in buitenspelen in de buurt</p>
            <p className="d">Dankzij de steun van de gemeente Haarlem staan er in 2026 buurtapps en buitenspeelactiviteiten in heel Haarlem. En is deze website beschikbaar voor iedereen om mee te kunnen doen.</p>
          </div>
          <a className="bb-md__gem-logo bb-logolink" href="https://haarlem.nl/" target="_blank" rel="noopener noreferrer" aria-label="Naar de website van de gemeente Haarlem, opent in een nieuw tabblad">
            <img src="assets/logo/gemeente-haarlem.png" alt="Gemeente Haarlem" />
          </a>
        </FadeUp>
      </Container>

      <div className="bb-md__pers">
        <Container>
          <FadeUp className="bb-md__perscard">
            <div>
              <h2>Voor journalisten</h2>
              <p>
                Wil je Buiten Buddies interviewen, meelopen bij een buurtgroep of beeldmateriaal
                gebruiken? Neem gerust contact op met Sabrina Costermans.
              </p>
            </div>
            <div className="bb-md__perslinks">
              <a href="mailto:info@buitenbuddies.org"><Icon name="mail" size={20} /> info@buitenbuddies.org</a>
              <a href={bel.href} target={bel.extern ? "_blank" : undefined} rel={bel.extern ? "noopener noreferrer" : undefined} aria-label={bel.label}><Icon name="phone" size={20} /> 06 18 39 15 32</a>
              <a href="assets/logo/logo.png" download><Icon name="arrowRight" size={20} /> Logo downloaden</a>
            </div>
          </FadeUp>
        </Container>
      </div>
    </main>
  );
}

Object.assign(window, { InDeMediaPage, MediaItem, MediaVideo });