import { useEffect, useState } from 'react';
import { useGetColumns } from './columns';
import { useEventsJournalMessages } from './i18n';
import { useStore } from 'stores/StoreProvider';
import { IncidentsFilters } from '../IncidentsDashboard/IncidentsFilters';
import { observer } from 'mobx-react-lite';
import { useEventsJournalsLeftSideBarContents } from './useEventsJournalsLeftSideBarContents';
import { useGetCards } from './converter';
import { TypeDashboardPaginationState } from 'components/Dashboard/types';
import { Event } from './types';
import Dashboard from 'components/Dashboard';
import EventCardInfo from './EventCardInfo';
import './EventsJournal.module.scss';

const EventsJournalDashboard = observer((): JSX.Element => {
  const { table } = useEventsJournalMessages();

  const {
    list,
    countEventsJournal,
    loadingList,
    setCheckedColumns,
    getCheckedColumns,
    setSelectedTag,
  } = useStore().eventsJournalUiStore;

  const [cardInfo, setCardInfo] = useState<any>(null);
  const [sorterField, setSorterField] = useState<string>('');
  const [isShowEventsCardInfo, setIsShowEventsCardInfo] =
    useState<boolean>(false);

  const [dashboardState, setDashboardState] =
    useState<TypeDashboardPaginationState>({
      current: 1,
      pageSize: 10,
      total: 10,
    });

  const columns = useGetColumns(table.column);
  const cards = useGetCards(list, table.column.columnMessage);

  useEffect(() => {
    loadingList(dashboardState.current, dashboardState.pageSize, sorterField);
  }, [dashboardState, dashboardState.pageSize, loadingList, sorterField]);

  useEffect(() => {
    setDashboardState((state) => ({
      ...state,
      total: countEventsJournal,
    }));
  }, [countEventsJournal]);

  const onSearch = (value: any): void => console.log(value);

  const onRowEvent = (card: Event): void => {
    if (card.source_port === 0) delete card.source_port;
    if (card.destination_port === 0) delete card.destination_port;
    setCardInfo({
      ...card,
      event_src_msg: list.find(
        (item: Event) => item.aggregated_id === card.aggregated_id,
      ).event_src_msg,
    });
    setIsShowEventsCardInfo(true);
  };

  // Контент для левого сайдбара
  const leftSideBarContent = useEventsJournalsLeftSideBarContents();

  const changeRowCount = (count: number, pageSize: number): void => {
    setDashboardState((prevState) => ({
      ...prevState,
      current: count,
      pageSize,
    }));
  };

  return (
    <Dashboard
      cards={cards}
      columns={columns}
      setSelectedTag={setSelectedTag}
      onRowEvent={onRowEvent}
      loading={false}
      onSearch={onSearch}
      setCheckedColumns={setCheckedColumns}
      getCheckedColumns={getCheckedColumns}
      setSorterField={setSorterField}
      leftSideBarContent={leftSideBarContent}
      changeRowCount={changeRowCount}
      pageState={dashboardState}
      filters={
        <IncidentsFilters onChangeVisible={() => console.log('filter')} />
      }
      cardInfoComponent={
        isShowEventsCardInfo &&
        cardInfo && (
          <EventCardInfo
            cardInfo={cardInfo as Event}
            translations={table.cardInfo}
            setCardInfo={setCardInfo}
          />
        )
      }
    />
  );
});

export default EventsJournalDashboard;
