// Libs
// -----------------------------------------------------------------------------
import { FC, useMemo } from 'react';
import { observer } from 'mobx-react-lite';

// App
// -----------------------------------------------------------------------------
import { InterfaceWithIdNameDescription } from 'types/default';
import { useCommonMessages } from '../i18n';
import { makeGenericGroupsTableColumns } from './makeGenericGroupsTableColumns';
import { GenericGroupsDashboardUiStore } from './GenericGroupsDashboardUiStore';
import { GenericDataStore } from 'stores/GenericDataStore';
import { GenericGroupCard } from './GenericGroupCard/GenericGroupCard';
import { TypeLeftSidebar } from '../Dashboard/types';
import { GenericDashboard, useItemDelete } from '../GenericDashboard';

// Props
// -----------------------------------------------------------------------------
type GenericGroupsDashboardProps = {
  uiStore: GenericGroupsDashboardUiStore;
  dataStore: GenericDataStore<InterfaceWithIdNameDescription>;
  sidebarContent: Array<TypeLeftSidebar>;
};

export const GenericGroupsDashboard: FC<GenericGroupsDashboardProps> = observer(
  ({ dataStore, uiStore, sidebarContent }) => {
    const locale = useCommonMessages().genericGroupsDashboard;

    const onGroupDelete = useItemDelete(locale, dataStore);

    const columns = useMemo(
      () =>
        makeGenericGroupsTableColumns(locale, {
          onDelete: onGroupDelete,
          onEdit: () => uiStore.setIsFormDisabled(false),
        }),
      [locale, onGroupDelete, uiStore],
    );

    return (
      <GenericDashboard<InterfaceWithIdNameDescription>
        uiStore={uiStore}
        dataStore={dataStore}
        sidebarContent={sidebarContent}
        locale={locale}
        cardComponent={GenericGroupCard}
        columns={columns}
      />
    );
  },
);
