import { createContext, useState, useContext, useEffect } from "react";

const TrieSelectContext = createContext();

export const useTrieSelect = () => {
  const context = useContext(TrieSelectContext);
  if (context === undefined) {
    throw new Error("useTrieSelect must be used within a TrieSelectProvider");
  }

  return context;
}

export const TrieSelectProvider = ({ children, onChange }) => {
  const [selected, setSelected] = useState([]);

  const add = (id) => setSelected(prev => [...prev, id]);
  const remove = (id) => setSelected(prev => prev.filter(select => select !== id));

  useEffect(() => {
    onChange(selected);
  }, [onChange, selected]);

  return (
    <TrieSelectContext.Provider value={{ selected, setSelected, add, remove }}>
      {children}
    </TrieSelectContext.Provider>
  );
}