"use client";

import { useEffect } from "react";
import { CartProvider } from "@/context/CartContext";
import CartSidebar from "@/components/CartSidebar";
import { CatalogThemeProvider } from "@/themes/provider";
import ChatDaLoja from "@/components/ChatDaLoja";
import { VendorCarrinho } from "@/templates/vendor/VendorCarrinho";
import { VisaoDaLojaProvider } from "@/components/VisaoDaLojaContext";
import FaixaDaLoja from "@/components/FaixaDaLoja";
import AvisoDoCupomDoLink from "@/components/AvisoDoCupomDoLink";
import { VendorAvisoDoCupom } from "@/templates/vendor/VendorAvisoDoCupom";
import { BoutiqueCarrinho } from "@/templates/boutique/BoutiqueCarrinho";
import { BoutiqueAvisoDoCupom } from "@/templates/boutique/BoutiqueAvisoDoCupom";
import { gravarTemaDaLoja } from "@/themes/tema-no-navegador";
import type { VisaoDoVisitante } from "@/lib/loja/regras-da-loja";

export default function StoreLayout({
  children,
  primaryColor,
  whatsappNumber,
  cartScope,
  storeSlug,
  theme,
  chatLigado,
  visao,
}: {
  children: React.ReactNode,
  primaryColor?: string,
  whatsappNumber?: string,
  cartScope?: string,
  storeSlug?: string,
  theme?: string | null,
  /* A pagina ja sabe se a loja ligou o atendimento. Desligado, o balao nem
     monta: eram duas chamadas e dois websockets em toda visita a toa. Sem a
     informacao (paginas que nao a passam), monta e pergunta como antes. */
  chatLigado?: boolean,
  /* O que este visitante pode ver e fazer (regras da loja). Sem ela, vale a
     loja de sempre: com preco e carrinho. */
  visao?: VisaoDoVisitante | null,
}) {
  const providerScope = (cartScope || "global").trim() || "global";

  /* Todo tema grava a chave do esqueleto (app/[slug]/loading.tsx), não só os
     que andam sem ele: assim uma loja Padrão aberta depois de uma Vendor volta
     a ter o esqueleto de sempre. Não muda nada do desenho. */
  useEffect(() => {
    gravarTemaDaLoja(theme);
  }, [theme]);

  return (
    <VisaoDaLojaProvider visao={visao}>
      <CartProvider cartScope={providerScope} storeSlug={storeSlug} key={providerScope}>
        <CatalogThemeProvider theme={theme}>
          <FaixaDaLoja tema={theme} />
          {children}
          {/* Cada template tem o seu carrinho. O Vendor e a Boutique não usam o
              painel dos outros, e nada do deles vaza para os outros. */}
          {theme === "boutique" ? (
            <BoutiqueCarrinho slug={String(storeSlug || "")} whatsapp={whatsappNumber} corDaLoja={primaryColor} />
          ) : theme === "vendor" ? (
            <VendorCarrinho slug={String(storeSlug || "")} whatsapp={whatsappNumber} />
          ) : (
            <CartSidebar primaryColor={primaryColor} whatsappNumber={whatsappNumber} storeSlug={storeSlug} theme={theme} />
          )}
          {/* O link da loja com ?cupom=CODIGO: o aviso de que o cupom entrou. */}
          {theme === "boutique" ? (
            <BoutiqueAvisoDoCupom />
          ) : theme === "vendor" ? (
            <VendorAvisoDoCupom />
          ) : (
            <AvisoDoCupomDoLink corDaLoja={primaryColor} />
          )}
          {/* So aparece nas lojas que ligaram o atendimento: o proprio balao
              pergunta antes de se mostrar. */}
          {chatLigado === false ? null : <ChatDaLoja slug={storeSlug} primaryColor={primaryColor} />}
        </CatalogThemeProvider>
      </CartProvider>
    </VisaoDaLojaProvider>
  );
}