// About: track, saga, story time, the Odyssey reference (with "Read the passage" when the content folder is
// mounted), the facts, and the parts and singers. Watch and the listen entry live in Listen & lyrics.
import { sagaOf, songs, type AlbumSong } from "../../data/album";
import { roman } from "../content";
import { esc } from "./util";

export function aboutView(song: AlbumSong, mounted: boolean): HTMLElement {
  const el = document.createElement("div");
  el.className = "about";
  const saga = sagaOf(song);
  const o = song.odyssey;
  const homer = !o ? "No counterpart in Homer"
    : mounted
      ? `<span class="odref">Book ${roman(o.book)}</span><button type="button" class="readbtn" data-act="read">Read the passage <span aria-hidden="true">→</span></button>`
      : `<span class="odref">Book ${roman(o.book)}</span> · <a href="${esc(o.url)}" target="_blank" rel="noopener noreferrer">Butcher &amp; Lang on Gutenberg</a>`;
  const parts = song.parts.length
    ? song.parts.map((p) => `<li><span class="parts__name">${esc(p.name)}</span><span class="parts__who">${p.singers.map(esc).join(", ")}</span></li>`).join("")
    : song.singers.map((s) => `<li><span class="parts__name">${esc(s)}</span></li>`).join("");
  el.innerHTML = `
    <dl class="facts">
      <div><dt>Track</dt><dd>${song.track} of ${songs.length} · ${song.sagaTrack} in the saga</dd></div>
      <div><dt>Saga</dt><dd>${esc(saga.name)} <span class="facts__soft">(${saga.year})</span></dd></div>
      <div><dt>Story time</dt><dd>${esc(song.storyTime.label)}</dd></div>
      <div><dt>The Odyssey</dt><dd>${homer}</dd></div>
    </dl>
    ${song.facts.map((f) => `<p class="about__fact">${esc(f)}</p>`).join("")}
    <h3 class="sec">${song.parts.length ? "Parts and singers" : "Singers"}</h3>
    <ol class="parts">${parts}</ol>`;
  return el;
}