import Filter from './filter';
import {FC} from 'react';
import {
  context,
  pIdContext,
  pageContext,
  searchContext,
  useContextReducer,
  usePIdContextState,
} from './context';
import TableList from './table';
import {ChildrenFC} from '@utils';
import {PageProvider, SearchProvider} from '@components';

type Props = {
  id: string,
};

const MenuProvider: ChildrenFC = function({children}) {
  const state = useContextReducer();

  const {Provider} = context;

  return <Provider value={state}>{children}</Provider>;
};

const PIdProvider: ChildrenFC<Pick<Props, 'id'>> = function({children, id}) {
  const state = usePIdContextState(id);
  const {Provider} = pIdContext;

  return <Provider value={state}>{children}</Provider>;
};

const ChildMenu: FC<Props> = function({id}) {
  return (
    <PIdProvider id={id}>
      <MenuProvider>
        <SearchProvider context={searchContext}>
          <PageProvider context={pageContext}>
            <section className='content-main' data-testid='child_menu'>
              <Filter />
              <TableList />
            </section>
          </PageProvider>
        </SearchProvider>
      </MenuProvider>
    </PIdProvider>
  );
};

export default ChildMenu;
