// One shared <audio> for 30-second previews. Any element with
// data-preview-src toggles playback; every button for the same clip shows
// the same state (a card and its detail view, for example).
import { icon, toast } from "./common.js";

const audio = new Audio();
audio.preload = "none";
let currentSrc = null;

function buttons(src) {
  return [...document.querySelectorAll("[data-preview-src]")].filter((b) => b.dataset.previewSrc === src);
}

function paintButton(b, state, progress = 0) {
  b.classList.toggle("is-playing", state === "playing");
  b.classList.toggle("is-loading", state === "loading");
  b.setAttribute("aria-pressed", String(state === "playing" || state === "loading"));
  b.style.setProperty("--p", String(progress));
}

function paint(src, state, progress = 0) {
  for (const b of buttons(src)) paintButton(b, state, progress);
}

function stop() {
  if (!currentSrc) return;
  audio.pause();
  paint(currentSrc, "idle");
  currentSrc = null;
}

export function togglePreview(src) {
  if (currentSrc === src) {
    if (audio.paused) {
      audio.play();
    } else {
      stop();
    }
    return;
  }
  stop();
  currentSrc = src;
  paint(src, "loading");
  audio.src = src;
  audio.play().catch(() => { /* reported by the error handler */ });
}

audio.addEventListener("playing", () => currentSrc && paint(currentSrc, "playing", progress()));
audio.addEventListener("timeupdate", () => currentSrc && paint(currentSrc, audio.paused ? "idle" : "playing", progress()));
audio.addEventListener("ended", stop);
audio.addEventListener("error", () => {
  if (!currentSrc) return;
  for (const b of buttons(currentSrc)) {
    b.disabled = true;
    b.title = "No preview available";
  }
  paint(currentSrc, "idle");
  currentSrc = null;
  toast("No preview available for this one.", { error: true });
});

function progress() {
  return audio.duration ? Math.round((audio.currentTime / audio.duration) * 100) : 0;
}

/** A round play/pause button for a clip. */
export function previewButton(src, label, className = "play-btn") {
  const b = document.createElement("button");
  b.type = "button";
  b.className = className;
  b.dataset.previewSrc = src;
  b.setAttribute("aria-label", label);
  b.setAttribute("aria-pressed", "false");
  b.title = "Play 30-second preview";
  b.append(icon("play"), icon("pause"));
  // Not in the page yet, so paint this button directly.
  if (src === currentSrc) paintButton(b, audio.paused ? "loading" : "playing", progress());
  return b;
}

document.addEventListener("click", (e) => {
  const b = e.target.closest("[data-preview-src]");
  if (!b || b.disabled) return;
  e.preventDefault();
  e.stopPropagation();
  togglePreview(b.dataset.previewSrc);
});