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

// App
// -----------------------------------------------------------------------------
import { useCorrelationRulesDashboardLocale } from './i18n';
import { useStore } from 'stores/StoreProvider';
import { makeCorrelationRulesColumns } from './makeCorrelationRulesColumns';
import { TCommonMessages, useCommonMessages } from 'components/i18n';
import './CorrelationRules.module.scss';
import { CorrelationRulesCard } from './CorrelationRulesCard/CorrelationRulesCard';
import { RootStore } from 'stores/RootStore';
import { TypeActionButtonsConfig } from 'components/DashboardTable/components/useActionsWithSelectedCards/types';
import { collectionButtonForCorrelationRulesCollectiveActions } from './helpers';
import { makeLeftSidebarContent } from 'components/Layout';
import { Page } from 'pages/AppRoutes/constants';
import {
  GenericDashboard,
  useItemDelete,
  useImportData,
  useExportData,
} from 'components/GenericDashboard';
import {
  CorrelationRulesRecord,
  CorrelationRulesRecordForBackend,
} from 'types/default';

export const CorrelationRulesDashboard = observer((): JSX.Element => {
  const rootStore: RootStore = useStore();
  const dataStore = rootStore.correlationRulesStore;
  const uiStore = rootStore.correlationRulesUiStore;

  // Общая локализация
  const commonTranslation: TCommonMessages = useCommonMessages();

  // Локализации элементов страницы
  const dashboardLocale = useCorrelationRulesDashboardLocale();

  // Содержимое боковой панели
  const leftSideBarContent = makeLeftSidebarContent(
    Page.CORRELATION_RULES_DASHBOARD,
    commonTranslation.leftSidebar,
  );

  // Импорт правил
  const onCollectiveRuleImport = useImportData(dataStore, dashboardLocale);

  // Экспорт правил
  const onCollectiveRuleExport = useExportData(dataStore, dashboardLocale);

  // Настройки кнопок коллективных действий
  const actionButtonsConfig = useMemo((): TypeActionButtonsConfig[] => {
    const action = collectionButtonForCorrelationRulesCollectiveActions(
      {
        onCollectiveRuleImport,
        onCollectiveRuleExport,
      },
      dashboardLocale,
    );

    return [action.exports, action.imports];
  }, [dashboardLocale, onCollectiveRuleExport, onCollectiveRuleImport]);

  const onRuleDelete = useItemDelete(dashboardLocale, dataStore);

  const columns = useMemo(
    () =>
      makeCorrelationRulesColumns(dashboardLocale, {
        onDelete: onRuleDelete,
        onEdit: () => uiStore.setIsFormDisabled(false),
      }),
    [onRuleDelete, dashboardLocale, uiStore],
  );

  return (
    <GenericDashboard<CorrelationRulesRecord, CorrelationRulesRecordForBackend>
      uiStore={uiStore}
      dataStore={dataStore}
      sidebarContent={leftSideBarContent}
      locale={dashboardLocale}
      cardComponent={CorrelationRulesCard}
      columns={columns}
      fetchRelatedData={async () => {
        await Promise.all([
          rootStore.correlationRulesGroupsStore.fetchAll(),
          rootStore.assetsOsesStore.fetchAll(),
          rootStore.assetsManufacturersStore.fetchAll(),
          rootStore.assetsGroupsStore.fetchAll(),
          rootStore.incidentsRecommendationsStore.fetchAll(),
          rootStore.incidentsEffectsStore.fetchAll(),
          rootStore.incidentsCategoriesStore.fetchAll(),
          rootStore.firewallStore.fetchAll(),
        ]);
        await rootStore.accountsStore.fetchAccountsList(
          '1',
          1000,
          '&ordering=id',
        );
      }}
      actionButtonsConfig={actionButtonsConfig}
    />
  );
});

export default CorrelationRulesDashboard;
