---
import { formMessages } from '../utils/form-messages';

const { lang = 'en' } = Astro.props;
const text = formMessages(lang);
const directions = 'https://www.google.com/maps/dir/?api=1&destination=8901%20E%20Raintree%20Dr%20Ste%20160%2C%20Scottsdale%2C%20AZ%2085260';
---
<section class="openstreetmap-section" aria-label={text.map}>
  <div id="aia-openstreetmap" class="openstreetmap" data-tile-alt={text.tile} data-zoom-in={text.zoomIn} data-zoom-out={text.zoomOut} data-marker-label={text.marker} data-directions-label={text.directions}></div>
  <p data-openstreetmap-fallback>
    Arizona Institute for Autism — 8901 E Raintree Dr, Ste 160, Scottsdale, AZ 85260.
    <a href={directions} target="_blank" rel="noopener noreferrer">{text.directions}</a>
  </p>
</section>

<script is:inline src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script is:inline define:vars={{ directions }}>
(() => {
  const element = document.getElementById('aia-openstreetmap');
  if (!element || !window.L || element.dataset.initialized) return;

  const map = window.L.map(element, { zoomControl: false }).setView([33.63, -111.88756], 12);
  element.dataset.initialized = 'true';
  window.L.control.zoom({ zoomInTitle: element.dataset.zoomIn, zoomOutTitle: element.dataset.zoomOut }).addTo(map);
  const tiles = window.L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  });
  tiles.on('tileload', ({ tile }) => {
    tile.alt = element.dataset.tileAlt;
  });
  tiles.addTo(map);
  window.L.marker([33.617746, -111.88756], {
    alt: element.dataset.markerLabel,
    title: element.dataset.markerLabel
  }).addTo(map).bindPopup(`
    <span class="openstreetmap__popup">
      <b>Arizona Institute for Autism</b><br>
      <img alt="Arizona Institute for Autism" src="/assets/images/aia-logo.svg" width="94"><br>
      <a href="${directions}" target="_blank" rel="noopener noreferrer">${element.dataset.directionsLabel}</a>
    </span>
  `).openPopup();
  // Keep address/directions available without JavaScript or if Leaflet is blocked.
  document.querySelector('[data-openstreetmap-fallback]')?.setAttribute('hidden', '');
})();
</script>

<style>
  .openstreetmap-section { background: white; margin: 0; padding: 0; }
  .openstreetmap { height: 360px; width: 100%; }
  .openstreetmap :global(.openstreetmap__popup) { display: block; text-align: center; }
  .openstreetmap :global(.leaflet-popup-content) { margin: 10px 20px 8px 18px; }
  .openstreetmap :global(.openstreetmap__popup img) { display: inline-block; margin-bottom: .25rem; }
  .openstreetmap :global(a:focus-visible) { outline: 3px solid var(--color-focus, #115bbd); outline-offset: 2px; }
  [data-openstreetmap-fallback] { margin: 0; padding: 1rem; text-align: center; }
  [hidden] { display: none; }
</style>