import React, {
  createContext,
  useContext,
  useEffect,
  useRef,
  useState,
} from 'react';

const SelectedItemContext = createContext<{
  selectedItemId: string | null;
  setSelectedItemId: (id: string | null) => void;
  registerSelectedItemRef: (ref: React.RefObject<HTMLElement>) => void;
}>({
  selectedItemId: null,
  setSelectedItemId: () => {},
  registerSelectedItemRef: () => {},
});

export const SelectedItemProvider = ({
  children,
}: {
  children: React.ReactNode[] | React.ReactNode;
}) => {
  const [selectedItemId, setSelectedItemId] = useState<string | null>(null);
  const selectedItemRef = useRef<HTMLElement | null>(null);

  const registerSelectedItemRef = (ref: React.RefObject<HTMLElement>) => {
    if (ref.current) {
      selectedItemRef.current = ref.current;
    }
  };

  useEffect(() => {
    // Only add the listener if there's a selected item
    if (!selectedItemId) return;

    const handleGlobalClick = (event: MouseEvent) => {
      // If there's no selected item or no ref, do nothing
      if (!selectedItemRef.current) return;

      // Check if the click was outside the selected item
      if (!selectedItemRef.current.contains(event.target as Node)) {
        setSelectedItemId(null);
      }
    };

    // Add the event listener to the document
    document.addEventListener('mousedown', handleGlobalClick);

    // Clean up the event listener when the component unmounts or selectedItemId changes
    return () => {
      document.removeEventListener('mousedown', handleGlobalClick);
    };
  }, [selectedItemId]);

  return (
    <SelectedItemContext.Provider
      value={{ selectedItemId, setSelectedItemId, registerSelectedItemRef }}
    >
      {children}
    </SelectedItemContext.Provider>
  );
};

export const useSelectedItem = () => useContext(SelectedItemContext);