"use client";
import { ChakraProvider, EnvironmentProvider } from "@chakra-ui/react";
import createCache from "@emotion/cache";
import { CacheProvider } from "@emotion/react";
import { useEffect, useState, type ReactNode } from "react";
import root from "react-shadow/emotion";
import { system } from "./system";
import { ChatProvider, WidgetType } from "./chat/chat-context";
import { InstallationSource } from "@/utils/installation-source";

interface ProviderProps {
  children: ReactNode;
  initialWidgetType?: WidgetType;
  installationSource?: InstallationSource;
}

export function Provider({
  children,
  initialWidgetType = WidgetType.FLOATING,
  installationSource = InstallationSource.DIRECT_SCRIPT
}: ProviderProps) {
  const [shadow, setShadow] = useState<HTMLElement | null>(null);
  const [cache, setCache] = useState<ReturnType<typeof createCache> | null>(
    null
  );

  useEffect(() => {
    if (!shadow?.shadowRoot || cache) return;
    const emotionCache = createCache({
      key: "root",
      container: shadow.shadowRoot
    });

    setCache(emotionCache);
  }, [shadow, cache]);

  return (
    <root.div ref={setShadow} style={{ backgroundColor: "transparent" }}>
      {shadow && cache && (
        <EnvironmentProvider value={() => shadow.shadowRoot ?? document}>
          <CacheProvider value={cache}>
            <ChakraProvider value={system}>
              <ChatProvider initialWidgetType={initialWidgetType} installationSource={installationSource}>
                {children}
              </ChatProvider>
            </ChakraProvider>
          </CacheProvider>
        </EnvironmentProvider>
      )}
    </root.div>
  );
}