"use client";

import { useEffect } from "react";
import { volumeNoTempo, type RelogioDaCena } from "@/lib/banner-editor/cena";
import type { AudioDoProjeto } from "@/lib/banner-editor/documento";

/*
 * Toca a trilha de áudio junto com o relógio da linha do tempo (o play do
 * editor): cada áudio num <audio> que entra no segundo dele, do ponto do
 * arquivo em que foi aparado, com o volume e as rampas suaves. Parou o
 * relógio, para tudo. Não desenha nada.
 */
export function TocadorDeAudios({ audios, relogio }: { audios: AudioDoProjeto[]; relogio: RelogioDaCena }) {
  useEffect(() => {
    const tocadores = new Map<string, HTMLAudioElement>();
    for (const a of audios) {
      const el = new Audio();
      el.preload = "auto";
      el.src = a.src;
      tocadores.set(a.id, el);
    }
    const parar = relogio.assinar((t) => {
      for (const a of audios) {
        const el = tocadores.get(a.id);
        if (!el) continue;
        const dentro = t >= a.inicio && t < a.inicio + a.dura;
        if (relogio.tocando && dentro) {
          el.volume = Math.max(0, Math.min(1, volumeNoTempo(a, t)));
          const quer = a.corte + (t - a.inicio);
          if (el.paused) {
            el.currentTime = quer;
            void el.play().catch(() => undefined);
          } else if (Math.abs(el.currentTime - quer) > 0.3) el.currentTime = quer;
        } else if (!el.paused) el.pause();
      }
    });
    return () => {
      parar();
      tocadores.forEach((el) => {
        el.pause();
        el.removeAttribute("src");
        el.load();
      });
    };
  }, [audios, relogio]);
  return null;
}