import React, { useEffect, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { CollectionPagination } from '../CollectionPagination';
import { CollectionState, FiltersMap } from '@wix/bex-core';
import { CollectionTable, CollectionTableProps } from '../CollectionTable';
import { TableState } from '../../state';
import { useWixPatternsContainer } from '@wix/bex-core/react';

export interface PaginationTableProps<T, F extends FiltersMap>
  extends Omit<CollectionTableProps<T, F>, 'state'> {
  state: CollectionState<T, F>;
}

export function _PaginationTable<T, F extends FiltersMap = FiltersMap>(
  props: PaginationTableProps<T, F>,
) {
  const { state: collection, cardProps, ...rest } = props;

  const container = useWixPatternsContainer();

  const [state] = useState(
    () =>
      new TableState({
        collection,
        container,
      }),
  );

  useEffect(
    () =>
      state.init({
        featuresInitializers: [],
      }),
    [],
  );

  return (
    <>
      <CollectionTable
        state={state}
        cardProps={{ stretchVertically: true, ...cardProps }}
        {...rest}
      />
      <CollectionPagination state={state.collection} />
    </>
  );
}

export const PaginationTable = observer(_PaginationTable);