"use client";

import { createContext, useContext, useEffect, useState, type ReactNode } from "react";
import type { DadosDosWidgets } from "@/lib/widgets-da-home";

/*
  Os dados dos blocos novos da página inicial (cupons, lives, mais vendidos,
  combos, endereço), montados no servidor (lib/loja/dados-dos-widgets.ts) e
  entregues aqui para os dois desenhos (Padrão/Vitrine e Vendor). A página
  só põe o provedor quando a loja usa um desses blocos (ou no editor); fora
  dele o valor é null e o bloco que precisa de dado some.
*/

const Contexto = createContext<DadosDosWidgets | null>(null);

export function ProvedorDosWidgets({ dados, children }: { dados: DadosDosWidgets | null; children: ReactNode }) {
  return <Contexto.Provider value={dados}>{children}</Contexto.Provider>;
}

export function useDadosDosWidgets() {
  return useContext(Contexto);
}

/**
 * O relógio dos blocos com contagem. Começa na hora do servidor (o HTML já
 * sai com um número certo, sem pular) e passa a andar no navegador. Quem
 * mostra o número põe suppressHydrationWarning: o segundo do servidor e o
 * do navegador quase nunca batem.
 */
export function useAgora(intervaloMs = 1000) {
  const dados = useContext(Contexto);
  const [agora, setAgora] = useState<number>(() => dados?.agora ?? Date.now());
  useEffect(() => {
    const marcar = () => setAgora(Date.now());
    const primeiro = window.setTimeout(marcar, 0);
    const relogio = window.setInterval(marcar, intervaloMs);
    return () => {
      window.clearTimeout(primeiro);
      window.clearInterval(relogio);
    };
  }, [intervaloMs]);
  return agora;
}