import React, { useState } from 'react';
import { Checkbox, Select, Table } from 'antd';
import { useCardInfoEventsTableColumns } from '../helpers';
import { Incident } from 'myApi';
import { CheckboxChangeEvent } from 'antd/es/checkbox';
import { TEventsTableMessage, TUseCardInfoEventsTableColumns } from '../types';
import moment from 'moment';

const { Option } = Select;

const EventsTable = ({
  cardInfo,
  translations,
  setIsShowEventsCardInfo,
}: {
  cardInfo: Incident;
  translations: TEventsTableMessage;
  setIsShowEventsCardInfo: React.Dispatch<React.SetStateAction<boolean>>;
}): JSX.Element => {
  const columns = useCardInfoEventsTableColumns(translations);
  const data = cardInfo.events.map((item) => {
    return {
      events: item.event_count,
      created: moment(item['@created']).format('D.MM.YYYY HH:mm:ss'),
      event_src_msg: item.event_src_msg,
      device_product: item.device_product,
      source_ip: item.source_ip,
      destination_ip: item.destination_ip,
    };
  }, []);

  const [checkedColumns, setCheckedColumns] =
    useState<TUseCardInfoEventsTableColumns[]>(columns);

  const [isOpened, setIsOpened] = useState<boolean | undefined>();

  const isVisible = (bool: boolean): void => setIsOpened(bool);

  const checkedColumnItem = (
    e: CheckboxChangeEvent,
    col: TUseCardInfoEventsTableColumns[],
  ): void => {
    const checked = e.target.checked;
    const id = e.target.id;
    const index = col.findIndex((item) => item.dataIndex === id);

    if (!checked) {
      setCheckedColumns((state) => {
        return [...state.filter((elem) => elem.dataIndex !== id)];
      });
    } else {
      const newColumn = col.filter((elem) => elem.dataIndex === id);
      setCheckedColumns((state) => {
        return [...state.slice(0, index), ...newColumn, ...state.slice(index)];
      });
    }
  };

  const onRow = (): void => {
    setIsShowEventsCardInfo(true);
  };

  return (
    <>
      <Select
        style={{ width: 150 }}
        bordered={false}
        value="Столбцы"
        open={isOpened}
        onFocus={() => isVisible(true)}
        onBlur={() => isVisible(false)}
      >
        {columns?.map((elem) => {
          return (
            <Option key={elem.key} value={elem.dataIndex}>
              <div
                style={{
                  width: '100%',
                  display: 'flex',
                  justifyContent: 'space-between',
                }}
              >
                <span>{elem.title}</span>
                <Checkbox
                  defaultChecked={elem.checked}
                  disabled={elem.disabled}
                  id={elem.dataIndex}
                  onChange={(e) => checkedColumnItem(e, columns)}
                />
              </div>
            </Option>
          );
        })}
      </Select>
      <Table
        style={{ gridColumn: '1 / 4' }}
        columns={checkedColumns}
        dataSource={data}
        rowKey={(record) => `${record.events}`}
        onRow={() => {
          return {
            onClick: onRow,
          };
        }}
      />
    </>
  );
};

export default EventsTable;
