// Pagina Waar actief. Teksten letterlijk uit het contentdocument.
// De kaart is de Google My Maps-kaart van Buiten Buddies.

const BB_KAART_ID = "1SlaLPvCv6hV_Ij334YgnEGh30eU8cm8";
const BB_KAART_EMBED = "https://www.google.com/maps/d/embed?mid=" + BB_KAART_ID + "&hl=nl";
const BB_KAART_VIEW = "https://www.google.com/maps/d/viewer?mid=" + BB_KAART_ID + "&hl=nl";

/* Legenda-iconen: de originele Google My Maps-markers, exact dezelfde afbeeldingen als op de kaart:
   het ronde containericoon met de voetballer (icoon 1696-soccer uit de My Maps-iconenset). */
const bbMyMapsPin = (kleur) =>
  "https://mt.google.com/vt/icon/name=icons/onion/SHARED-mymaps-container-bg_4x.png," +
  "icons/onion/SHARED-mymaps-container_4x.png,icons/onion/1696-soccer_4x.png" +
  "&highlight=ff000000," + kleur + "&scale=2.0";

const BB_KAART_LEGENDA = [
  { label: "Groen = actief", kleur: "7CB342", stip: "groen" },
  { label: "Donkeroranje = Girls Only-groep", kleur: "FF5252", stip: "oranje" },
  { label: "Grijs = Meerdere aanmeldingen, maar nog geen groepsbeheerder", kleur: "757575", stip: "grijs" },
];

/* De pins komen van een Google-server, dus we laden ze pas na toestemming voor cookies
   van derden, net als de kaart zelf. Daarvoor staat er een gekleurde stip. */
function bbGebruikDerden() {
  const [toestemming, setToestemming] = useState(!!(window.bbConsent && window.bbConsent.derden));
  useEffect(() => {
    const onConsent = (e) => setToestemming(!!(e.detail && e.detail.derden));
    window.addEventListener("bb-consent", onConsent);
    return () => window.removeEventListener("bb-consent", onConsent);
  }, []);
  return toestemming;
}

function WaarActiefLegenda() {
  const derden = bbGebruikDerden();
  return (
    <>
    <ul className="bb-wa__legenda">
      {BB_KAART_LEGENDA.map((l) => (
        <li key={l.label}>
          {derden ? (
            <img className="bb-wa__pin" src={bbMyMapsPin(l.kleur)} alt="" width="26" height="26" loading="lazy" />
          ) : (
            <span className={"bb-wa__stip bb-wa__stip--" + l.stip} aria-hidden="true"></span>
          )}
          <span>{l.label}</span>
        </li>
      ))}
    </ul>
    {!derden && (
      <p className="bb-wa__legendanote">
        Je ziet hier gekleurde stippen in plaats van de originele kaartmarkers. Die markers zijn
        afbeeldingen van Google en die laden wij alleen met jouw toestemming voor cookies van derden.{" "}
        <button type="button" className="bb-linkbtn" onClick={() => window.bbOpenCookieInstellingen()}>
          Cookie-instellingen openen
        </button>
      </p>
    )}
    </>
  );
}

function WaarActiefKaart() {
  const toestemming = bbGebruikDerden();

  return (
    <div className="bb-wa__frame">
      {toestemming ? (
        <iframe
          src={BB_KAART_EMBED}
          title="Kaart met de buurten waar Buiten Buddies actief is"
          loading="lazy" referrerPolicy="strict-origin-when-cross-origin"
          allowFullScreen
        ></iframe>
      ) : (
        <div className="bb-wa__consent">
          <Icon name="map" size={28} />
          <p>
            Deze kaart komt van Google Maps. Google kan daarbij cookies plaatsen, daarom laden wij de
            kaart 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-wa__link" style={{ color: "#fff" }} href={BB_KAART_VIEW} target="_blank" rel="noopener noreferrer">
            Kaart openen in Google Maps <Icon name="arrowRight" size={16} />
          </a>
        </div>
      )}
    </div>
  );
}

function WaarActiefPage({ go }) {
  return (
    <main id="main" tabIndex="-1" className="bb-wa" data-screen-label="Waar actief">
      <header className="bb-wa__head">
        <Container>
          <FadeUp><h1>Buiten Buddies actief in Haarlem</h1></FadeUp>
          <FadeUp delay={70}>
            <p className="bb-wa__lead">
              Op de kaart zie je welke buurten al meedoen en welke nog opstarten. Staat jouw buurt
              er nog niet bij? Jij kunt de eerste zijn!
            </p>
          </FadeUp>
          <FadeUp delay={130}>
            <WaarActiefLegenda />
          </FadeUp>
        </Container>
      </header>

      <div className="bb-wa__kaart">
        <Container>
          <FadeUp><WaarActiefKaart /></FadeUp>
          <div className="bb-wa__onder">
            <a className="bb-wa__link" href={BB_KAART_VIEW} target="_blank" rel="noopener noreferrer">
              Kaart openen in Google Maps <Icon name="arrowRight" size={16} />
            </a>
          </div>
        </Container>
      </div>

      <div className="bb-wa__cta">
        <Container>
          <FadeUp className="bb-wa__ctacard">
            <div className="bb-wa__ctafoto">
              <img src="assets/photos/steppende-kinderen.jpg" alt="Kinderen die samen buiten steppen in de buurt." />
            </div>
            <div className="bb-wa__ctabody">
              <h2>Staat jouw buurt er nog niet bij?</h2>
              <p>Jij kunt de eerste zijn. Als groepsbeheerder start je de buurtapp in jouw straat.</p>
              <Button variant="yellow" onClick={() => go("meedoen-beheerder")}>
                Word groepsbeheerder in mijn buurt <Icon name="arrowRight" size={16} />
              </Button>
            </div>
          </FadeUp>
          <DeelBlok
            kop="Ken je iemand in een buurt die nog niet meedoet?"
            tekst="Deel Buiten Buddies met je straat, je buurtgroep of de klas van je kind. Eén bericht kan een hele buurt weer buiten krijgen."
          />
        </Container>
      </div>
    </main>
  );
}

Object.assign(window, { WaarActiefPage, WaarActiefKaart, WaarActiefLegenda });