// generates a random pastel hue, returning both a solid fill and a
// translucent version of the same color for the glow halo behind each pin
function randomPastel() {
  const hue = Math.floor(Math.random() * 360);
  return {
    solid: `hsl(${hue}, 60%, 72%)`,
    glow: `hsla(${hue}, 60%, 72%, 0.25)`
  };
}

// picks the fill color for a pin: if the message has a moodColor (an
// optional pastel color the author picked in ComposeSheet's swatch row,
// stored as an hsl(...) string), use that directly so the pin matches what
// they chose. otherwise fall back to the existing random pastel exactly as
// before. `glow` isn't currently rendered by any pin shape below, but is
// still returned for shape consistency with randomPastel().
function pinColor(moodColor) {
  if (moodColor) {
    return { solid: moodColor, glow: moodColor };
  }
  return randomPastel();
}

// turns an SVG string into a { url, size } pair for google.maps.Marker's
// `icon` option. Markers (the legacy marker API this app now uses, switched
// back from AdvancedMarkerElement so a JS map `styles` array can take
// effect - AdvancedMarkerElement requires a mapId, which causes Google to
// ignore any `styles` array) take an Icon object - { url, scaledSize, anchor }
// - rather than a DOM node, so we just return the data-URL + size here and
// let MapView build the google.maps.Size/Point objects (those classes only
// exist once the Maps JS API has loaded).
// flat 2D style for now (no drop-shadow) - paper-style shadows may be added later
function svgToIcon(svg, size) {
  return {
    url: 'data:image/svg+xml;charset=UTF-8,' + encodeURIComponent(svg),
    size
  };
}

// pin for every message: solid pastel perfect circle, no glow halo.
// previously there were 3 shapes (star/circle/heart) for unread/read/echoed
// messages, swapped on click - now every message pin looks the same, so
// clicking a pin no longer needs to change its appearance.
// moodColor (optional): the author's picked swatch color, if any - see pinColor() above
export function messagePin(moodColor) {
  const { solid } = pinColor(moodColor);
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 50 50">
      <circle cx="25" cy="25" r="20" fill="${solid}"/>
    </svg>`;
  // sized to match locationPin (32px) per latest request, so message pins
  // are no longer larger than the current-location marker
  return svgToIcon(svg, 28);
}

// fixed dark dot used for the user's own location (not randomized, no glow)
export function locationPin() {
  const svg = `
    <svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
      <circle cx="16" cy="16" r="14" fill="#111" stroke="white" stroke-width="3"/>
      <circle cx="16" cy="16" r="5" fill="white"/>
    </svg>`;
  return svgToIcon(svg, 32);
}
