// Antd

import { Table, TableProps } from 'antd';
import Search from 'antd/es/input/Search';

// Hooks
import { observer } from 'mobx-react-lite';
import { useStore } from 'stores/StoreProvider';
import { FC, useCallback, useEffect, useState } from 'react';
import { useGetColumns } from 'pages/EventsJournalDashboard/columns';
import { useGetCards } from 'pages/EventsJournalDashboard/converter';

// Components
import { sorterColumnTable } from 'components/helpers/sorterColumnTable';

// Types
import { TypeDashboardPaginationState } from 'components/Dashboard/types';
import { RootStore } from 'stores/RootStore';
import { TypeEndpointGroupNameAntivirusSettings } from 'pages/DevicesDashboard/types';
import { TypeEventJournalTableMessages } from 'pages/EventsJournalDashboard/types';

type TypeAntivirusResultScan = {
  tableLocale: TypeEventJournalTableMessages;
  antivirusLocale: TypeEndpointGroupNameAntivirusSettings;
};

export const AntivirusResultTable: FC<TypeAntivirusResultScan> = observer(
  ({ tableLocale, antivirusLocale }) => {
    const rootStore: RootStore = useStore();
    const devicesUiStore = rootStore.devicesUiStore;
    const endpointUiStore = rootStore.endpointUiStore;
    const onSearch = (): void => {};

    const { list, fetchAntivirusEvents, getAntivirusEventsCount } =
      useStore().antivirusResultTableUiStore;

    const columnsResultsScan = useGetColumns(tableLocale.column);
    const cards = useGetCards(list, tableLocale.column.columnMessage);

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

    const [sorterField, setSorterField] = useState<string>('');

    useEffect(() => {
      if (endpointUiStore.getEndpointById?.id) {
        fetchAntivirusEvents(
          endpointUiStore.getEndpointById.id,
          dashboardState.current,
          dashboardState.pageSize,
          sorterField,
        );
      }
    }, [
      dashboardState,
      dashboardState.pageSize,
      fetchAntivirusEvents,
      sorterField,
    ]);

    const handleSorterTableChange: TableProps<typeof cards>['onChange'] =
      useCallback(
        (pagination, __, sorter): void => {
          sorterColumnTable(
            { field: sorter.field, order: sorter.order },
            setSorterField,
          );
          setDashboardState((prevState) => ({
            ...prevState,
            current: pagination.current,
            pageSize: pagination.pageSize,
          }));
        },
        [setSorterField],
      );

    return (
      <div>
        <Search
          placeholder={antivirusLocale.table.columns.clamav_paths}
          onSearch={onSearch}
          enterButton
          allowClear
          style={{ width: 400, float: 'right', marginBottom: '12px' }}
          disabled={devicesUiStore.isDisabledForm}
        />

        <Table
          columns={columnsResultsScan as any}
          dataSource={cards}
          pagination={{
            position: ['bottomRight'],
            ...dashboardState,
            total: getAntivirusEventsCount,
          }}
          rowKey={(record) => record.event_id}
          tableLayout="fixed"
          onChange={handleSorterTableChange}
        />
      </div>
    );
  },
);
