"use client";

import { createContext, useContext, type ReactNode } from "react";
import type { NavegacaoDaLoja } from "@/lib/navegacao-da-loja";

/*
  O cabeçalho, o menu e o rodapé que a loja publicou no editor (migration
  197), à mão dos templates (StoreContent nos temas Padrão e Vitrine,
  VendorShell no Vendor) sem passar prop por todas as páginas.

  Fora de um provedor, ou com `navegacao` null, o valor diz "nada mudou" e
  cada template desenha exatamente como sempre desenhou. `noEditor` só é
  true na loja aberta dentro do editor do painel: aí o cabeçalho e o rodapé
  ganham a marca de região que o editor contorna.
*/

export type ValorDaNavegacao = {
  navegacao: NavegacaoDaLoja | null;
  noEditor: boolean;
};

const SEM_NAVEGACAO: ValorDaNavegacao = { navegacao: null, noEditor: false };

const ContextoDaNavegacao = createContext<ValorDaNavegacao>(SEM_NAVEGACAO);

export function ProvedorDaNavegacao({
  navegacao,
  noEditor = false,
  children,
}: {
  navegacao: NavegacaoDaLoja | null | undefined;
  noEditor?: boolean;
  children: ReactNode;
}) {
  return (
    <ContextoDaNavegacao.Provider value={navegacao || noEditor ? { navegacao: navegacao ?? null, noEditor } : SEM_NAVEGACAO}>
      {children}
    </ContextoDaNavegacao.Provider>
  );
}

export function useNavegacaoDaLoja(): ValorDaNavegacao {
  return useContext(ContextoDaNavegacao);
}

/** A marca de região do editor: só existe no editor (fora dele o atributo nem sai no HTML). */
export function marcaDeRegiao(noEditor: boolean, regiao: "cabecalho" | "rodape"): Record<string, string> {
  return noEditor ? { "data-ks-regiao": regiao } : {};
}