import React, { ReactNode } from 'react';
import { observer } from 'mobx-react-lite';
import { FiltersMap } from '@wix/bex-core';
import { CollectionCard } from '../CollectionCard';
import { TableFoldersState } from '../../state';
import { TagsElement } from '../Tags';

export interface TableFoldersLayoutProps<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
> {
  dataHook?: string;
  children?: ReactNode | ReactNode[];
  state: TableFoldersState<T1, F1, T2, F2>;
  tags?: TagsElement<T1, Partial<F1 & F2>>;
}

function _TableFoldersLayout<
  T1,
  F1 extends FiltersMap,
  T2,
  F2 extends FiltersMap,
>(props: TableFoldersLayoutProps<T1, F1, T2, F2>) {
  const { state, dataHook, children, tags } = props;

  const { toolbar } = state;

  return (
    <CollectionCard
      errorState={false}
      state={toolbar}
      dataHook={dataHook}
      tags={tags}
    >
      {children}
    </CollectionCard>
  );
}

export const TableFoldersLayout = observer(_TableFoldersLayout);