import {
  Dispatch,
  PropsWithChildren,
  SetStateAction,
  createContext,
  useContext,
  useMemo,
  useState,
} from 'react';

interface TableHorizontalScrollContextValue {
  scrollLeft: number;
  setScrollLeft: Dispatch<SetStateAction<number>>;
  tableNode: HTMLTableElement | null;
  setTableNode: Dispatch<SetStateAction<HTMLTableElement | null>>;
}

const TableHorizontalScrollContext = createContext<TableHorizontalScrollContextValue | undefined>(undefined);

export function TableHorizontalScrollContextProvider({ children }: PropsWithChildren<{}>) {
  const [scrollLeft, setScrollLeft] = useState(0);
  const [tableNode, setTableNode] = useState<HTMLTableElement | null>(null);

  const value = useMemo(
    () => ({
      scrollLeft,
      setScrollLeft,
      tableNode,
      setTableNode,
    }),
    [scrollLeft, tableNode],
  );

  return (
    <TableHorizontalScrollContext.Provider value={value}>{children}</TableHorizontalScrollContext.Provider>
  );
}

export function useTableHorizontalScrollContext() {
  const context = useContext(TableHorizontalScrollContext);
  if (!context) {
    throw new Error(
      'useTableHorizontalScrollContext should be used only inside TableHorizontalScrollContextProvider',
    );
  }
  return context;
}