import { linkGuardado, type LinkDeVideo } from "./digitais/curso";
import { lerOpcoesDoVideo, type OpcoesDoVideo } from "./opcoes-do-video";

/*
 * O vídeo da galeria do produto (migration 183), já pronto para a página:
 * - arquivo: um vídeo dos arquivos da loja, servido por /api/catalog/video/<id>;
 * - link: YouTube ou Vimeo.
 * `flutuante`: abre sozinho numa janelinha no canto da página.
 * `opcoes`: como toca na galeria e na janelinha (migration 184).
 */
export type VideoDoProduto =
  | { tipo: "arquivo"; endereco: string; flutuante: boolean; opcoes: OpcoesDoVideo }
  | { tipo: "link"; link: LinkDeVideo; flutuante: boolean; opcoes: OpcoesDoVideo };

export function videoDoProduto(
  produto: {
    id: string;
    video_file_id?: string | null;
    video_link?: unknown;
    video_flutuante?: boolean | null;
    video_opcoes?: unknown;
  },
  arquivoPronto: boolean
): VideoDoProduto | null {
  const flutuante = produto.video_flutuante === true;
  const opcoes = lerOpcoesDoVideo(produto.video_opcoes);
  const link = linkGuardado(produto.video_link);
  if (link && (link.provedor === "youtube" || link.provedor === "vimeo")) return { tipo: "link", link, flutuante, opcoes };
  if (produto.video_file_id && arquivoPronto) {
    return { tipo: "arquivo", endereco: `/api/catalog/video/${produto.id}`, flutuante, opcoes };
  }
  return null;
}

export type ComoTocar = { sozinho: boolean; mudo: boolean; repetir: boolean; controles: boolean };

/* O endereço do player do YouTube/Vimeo com o jeito de tocar escolhido. */
export function enderecoIncorporado(link: LinkDeVideo, como: ComoTocar): string {
  const base = new URL(link.url);
  const marcar = (chave: string, valor: boolean) => base.searchParams.set(chave, valor ? "1" : "0");
  if (link.provedor === "youtube") {
    base.searchParams.set("playsinline", "1");
    base.searchParams.set("rel", "0");
    base.searchParams.set("modestbranding", "1");
    /* Deixa a página mandar pausar, tocar e ligar o som (comandarPlayer). */
    base.searchParams.set("enablejsapi", "1");
    marcar("autoplay", como.sozinho);
    marcar("mute", como.mudo);
    marcar("controls", como.controles);
    if (como.repetir) {
      base.searchParams.set("loop", "1");
      base.searchParams.set("playlist", link.id);
    }
    return base.toString();
  }
  marcar("autoplay", como.sozinho);
  marcar("muted", como.mudo);
  marcar("loop", como.repetir);
  marcar("controls", como.controles);
  base.searchParams.set("playsinline", "1");
  return base.toString();
}

/* Manda um comando para o player do YouTube/Vimeo dentro do iframe. */
export function comandarPlayer(iframe: HTMLIFrameElement | null, provedor: LinkDeVideo["provedor"], comando: "tocar" | "pausar" | "mudo" | "som") {
  const janela = iframe?.contentWindow;
  if (!janela) return;
  if (provedor === "youtube") {
    const func = { tocar: "playVideo", pausar: "pauseVideo", mudo: "mute", som: "unMute" }[comando];
    janela.postMessage(JSON.stringify({ event: "command", func, args: [] }), "*");
    return;
  }
  if (comando === "tocar" || comando === "pausar") {
    janela.postMessage(JSON.stringify({ method: comando === "tocar" ? "play" : "pause" }), "*");
  } else {
    janela.postMessage(JSON.stringify({ method: "setMuted", value: comando === "mudo" }), "*");
  }
}

/*
 * Um vídeo de produto tocando por vez: quem começa a tocar avisa, e o outro
 * (a galeria ou a janelinha) pausa.
 */
export const EVENTO_DO_VIDEO = "ks-video-do-produto";
export type OrigemDoVideo = "galeria" | "flutuante";

export function avisarQueTocou(origem: OrigemDoVideo) {
  if (typeof window === "undefined") return;
  window.dispatchEvent(new CustomEvent(EVENTO_DO_VIDEO, { detail: origem }));
}