import { createContext, ReactNode, useContext } from 'react';
import { EditableTableColumnDef, TableContextType } from '../types';
import { Cell } from '@tanstack/react-table';

export const EditableTableContext = createContext<unknown>({
  handleSaveData: () => {},
  idSelector: () => {},
  table: {},
});

interface TableContextProviderProps<TData, IdType> extends TableContextType<TData, IdType> {
  children: ReactNode;
}

export default function TableContextProvider<TData, IdType>({
  children,
  ...props
}: TableContextProviderProps<TData, IdType>) {
  return <EditableTableContext.Provider value={props}>{children}</EditableTableContext.Provider>;
}

export function useTableContext<TData, IdType>(cell: Cell<TData, unknown>) {
  const { handleSaveData, idSelector, table } = useContext(
    EditableTableContext,
  ) as TableContextType<TData, IdType>;

  function updateData(value: any) {
    const accessorKey = (cell.column.columnDef as EditableTableColumnDef<TData>).accessorKey;
    handleSaveData({
      accessorKey: accessorKey,
      columnId: cell.column.id,
      rowId: idSelector(cell.row.original),
      value: value,
    });
    table.options.meta?.updateData(cell.row.id, cell.column.id, value);
  }
  return { updateData, idSelector, table };
}