import { useState, useEffect, useCallback } from 'react';

const GLOBAL_NAMESPACE_KEY = 'global-selected-namespace';

export function useGlobalNamespace() {
  const [selectedNamespace, setSelectedNamespaceState] = useState<string>(
    () => {
      // Inicializa do localStorage ou usa 'all' como padrão
      const stored = localStorage.getItem(GLOBAL_NAMESPACE_KEY);
      return stored || 'all';
    },
  );

  // Função para atualizar o namespace globalmente
  const setSelectedNamespace = useCallback((namespace: string) => {
    setSelectedNamespaceState(namespace);
    localStorage.setItem(GLOBAL_NAMESPACE_KEY, namespace);

    // Dispara um evento customizado para que outros componentes possam reagir
    window.dispatchEvent(
      new CustomEvent('namespaceChanged', { detail: namespace }),
    );
  }, []);

  // Escuta mudanças de namespace de outros componentes
  useEffect(() => {
    const handleNamespaceChange = (event: CustomEvent) => {
      setSelectedNamespaceState(event.detail);
    };

    window.addEventListener('namespaceChanged', handleNamespaceChange as any);

    return () => {
      window.removeEventListener(
        'namespaceChanged',
        handleNamespaceChange as any,
      );
    };
  }, []);

  // Função para obter o namespace atual (útil para valores iniciais)
  const getNamespace = useCallback(() => {
    return localStorage.getItem(GLOBAL_NAMESPACE_KEY) || 'all';
  }, []);

  // Função para resetar para 'all'
  const resetNamespace = useCallback(() => {
    setSelectedNamespace('all');
  }, [setSelectedNamespace]);

  return {
    selectedNamespace,
    setSelectedNamespace,
    getNamespace,
    resetNamespace,
  };
}
