"use client";

import { forwardRef, useEffect, useImperativeHandle, useRef } from "react";

/* Um <video> ligado a uma trilha (de quem está no palco ou a própria câmera). */
const VideoDaTrilha = forwardRef<HTMLVideoElement | null, { track: MediaStreamTrack | null; className?: string; espelho?: boolean }>(
  function VideoDaTrilha({ track, className, espelho }, ref) {
    const video = useRef<HTMLVideoElement | null>(null);
    useImperativeHandle(ref, () => video.current as HTMLVideoElement, []);
    useEffect(() => {
      const el = video.current;
      if (!el) return;
      el.srcObject = track ? new MediaStream([track]) : null;
      if (track) void el.play().catch(() => undefined);
    }, [track]);
    return <video ref={video} className={`${className ?? ""}${espelho ? " espelho" : ""}`} autoPlay playsInline muted />;
  },
);

export default VideoDaTrilha;

/* O som de quem fala: um <audio> escondido por trilha. */
export function SomDaTrilha({ track, mudo }: { track: MediaStreamTrack; mudo?: boolean }) {
  const audio = useRef<HTMLAudioElement | null>(null);
  useEffect(() => {
    const el = audio.current;
    if (!el) return;
    el.srcObject = new MediaStream([track]);
    void el.play().catch(() => undefined);
  }, [track]);
  useEffect(() => {
    if (audio.current) audio.current.muted = Boolean(mudo);
  }, [mudo]);
  return <audio ref={audio} autoPlay />;
}