// Libs
// -----------------------------------------------------------------------------
import { FC, useEffect } from 'react';

// App
// -----------------------------------------------------------------------------
import { GenericGroupsDashboard } from 'components';
import { useStore } from 'stores/StoreProvider';
import { RootStore } from 'stores/RootStore';
import { makeLeftSidebarContent } from 'components/Layout';
import { Page } from 'pages/AppRoutes/constants';
import { useCommonMessages } from 'components/i18n';

export const CorrelationRulesGroupsDashboard: FC = () => {
  const rootStore: RootStore = useStore();
  const dataStore = rootStore.correlationRulesGroupsStore;
  const uiStore = rootStore.correlationRulesGroupsDashboardUiStore;

  useEffect(() => {
    return () => {
      uiStore.reset();
      dataStore.reset();
    };
  }, [uiStore, dataStore]);

  const commonTranslation = useCommonMessages();

  const leftSideBarContent = makeLeftSidebarContent(
    Page.CORRELATION_RULES_GROUPS_DASHBOARD,
    commonTranslation.leftSidebar,
  );

  return (
    <GenericGroupsDashboard
      dataStore={dataStore}
      uiStore={uiStore}
      sidebarContent={leftSideBarContent}
    />
  );
};
