import React, { useCallback, useEffect, useMemo, useState } from 'react';
import { observer } from 'mobx-react-lite';
import { useStorageTranslations } from './i18n';
import { useStore } from 'stores/StoreProvider';
import { StorageFilters } from './StorageFilters';
import { useLeftSideBarContent } from './StorageLeftSideBar';
import { getCards } from './converter';
import { useStorageCardInfoFields, useStorageColumns } from './storageColumns';
import { currentPageForLoadingAfterDeleteAction } from 'components/DashboardTable';
import {
  openNotificationSuccess,
  openNotificationError,
} from 'components/Messages';
import { TypeDashboardPaginationState } from 'components/Dashboard/types';
import { TStorageRecord } from './types';
import StorageCardInfo from './StorageCardInfo';
import Dashboard from 'components/Dashboard';
// Todo Этот импорт нужен для коллективных действий
import './Storage.scss';

export const StorageDashboard = observer((): JSX.Element => {
  const [selectedRowKeys, setSelectedRowKeys] = useState<number[]>([]);
  const [sorterField, setSorterField] = useState<string>('');

  const {
    leftSideBarMessages,
    table: {
      columnsMessages,
      cardInfoMessages,
      drawerMessages,
      successfulActionsMessages,
      failedActionMessages,
    },
  } = useStorageTranslations(selectedRowKeys.length);

  const {
    storageRecord,
    storageList,
    loadStorageList,
    loadStorageRecord,
    countStorage,
    loading,
    downloadStorageItem,
    deleteStorageItem,
    setCheckedColumns,
    getCheckedColumns,
  } = useStore().storageUiStore;
  const onSearch = (value: string): void => console.log(value);

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

  const leftSideBarContent = useLeftSideBarContent(leftSideBarMessages);

  // Одиночное скачивание, удаление элемента
  const handleAction = useCallback(
    (e: React.MouseEvent<HTMLElement>, type: string, id: number): void => {
      // Отмена всплытия событий, что бы при клике на action карточка не открывалась
      e.stopPropagation();

      switch (type) {
        // Загрузка элемента
        case 'download':
          downloadStorageItem([id])
            .then(() => {
              openNotificationSuccess({
                messageTitle: successfulActionsMessages.downloaded.title,
                messageDescription:
                  successfulActionsMessages.downloaded.subTitle,
              });
            })
            .catch(() => {
              openNotificationError({
                messageTitle: failedActionMessages.downloaded.title,
                messageDescription: failedActionMessages.downloaded.subTitle,
              });
            });
          break;

        // Удаление элемента
        case 'delete':
          deleteStorageItem([id]).then(() => {
            setSelectedRowKeys((prevState) =>
              prevState.filter((item) => item !== id),
            );
            openNotificationSuccess({
              messageTitle: successfulActionsMessages.deleted.title,
              messageDescription: successfulActionsMessages.deleted.subTitle,
            });
            loadStorageList(
              currentPageForLoadingAfterDeleteAction(
                dashboardState,
                storageList.length,
                [id],
                setDashboardState,
              ),
            );
          });
          break;
        default:
          break;
      }
    },
    [
      downloadStorageItem,
      successfulActionsMessages.downloaded.title,
      successfulActionsMessages.downloaded.subTitle,
      successfulActionsMessages.deleted.title,
      successfulActionsMessages.deleted.subTitle,
      deleteStorageItem,
      loadStorageList,
      dashboardState,
      countStorage,
      storageList.length,
    ],
  );

  // Множественное ( коллективное )  скачивание, удаление элементов
  // Todo пока не удалять, возможно понадобится позже
  // const collectiveHandleActions = (action: string): void => {
  //   switch (action) {
  //     // Загрузка элементов
  //     case 'download':
  //       downloadStorageItem(selectedRowKeys).then((data: any) => {
  //         console.log(data);
  //         setSelectedRowKeys([]);
  //         openNotificationSuccess({
  //           messageTitle: successfulActionsMessages.downloaded.title,
  //           messageDescription: successfulActionsMessages.downloaded.subTitle,
  //         });
  //       });
  //       break;
  //
  //     // Удаление элементов
  //     case 'delete':
  //       deleteStorageItem(selectedRowKeys).then(() => {
  //         loadStorageList(
  //           currentPageForLoadingAfterDeleteAction(
  //             dashboardState.pagination,
  //             storageList.length,
  //             selectedRowKeys,
  //             setDashboardState,
  //           ),
  //         );
  //         openNotificationSuccess({
  //           messageTitle: successfulActionsMessages.deleted.title,
  //           messageDescription: successfulActionsMessages.deleted.subTitle,
  //         });
  //         setSelectedRowKeys([]);
  //       });
  //       break;
  //   }
  // };

  // Добавление в карточки блока actions и действия к ним
  const cards = useMemo(() => {
    return getCards(storageList, handleAction);
  }, [handleAction, storageList]);

  // Колонки для таблицы
  const columns = useStorageColumns(columnsMessages);

  // Поля для карточки информации
  const cardInfoFields = useStorageCardInfoFields(cardInfoMessages);

  // Тут происходит загрузка данных для таблицы в зависимости смены пагинации
  useEffect(() => {
    loadStorageList(
      dashboardState.current,
      dashboardState.pageSize,
      sorterField,
    );
  }, [
    dashboardState.current,
    loadStorageList,
    dashboardState.pageSize,
    sorterField,
  ]);

  //  Установка актуальных данных для пагинации
  useEffect(() => {
    setDashboardState((state) => ({
      ...state,
      total: countStorage,
    }));
  }, [countStorage]);
  //

  // При клике на карточку в таблице происходит загрузка дополнительных данных для нее по id
  const onRowEvent = (card: TStorageRecord): void => loadStorageRecord(card.id);

  // Объект для передачи в Dashboard массива с выбранными карточками и функция для работы с ними,
  // Todo Пока не удаляем, возможно пригодится, сделано на будущее
  // const selectedRowItemAndFunc: {
  //   selectedRowItem: number[];
  //   onSetSelectedRowItem: (ids: number[]) => void;
  // } = {
  //   selectedRowItem: selectedRowKeys,
  //   onSetSelectedRowItem: setSelectedRowKeys,
  // };

  // Установка в state актуального номера страницы таблицы
  const changeRowCount = (current: number, pageSize: number): void => {
    setDashboardState((prevState) => ({
      ...prevState,
      current,
      pageSize,
    }));
  };

  const hasSelected = selectedRowKeys.length > 0;

  return (
    <Dashboard
      cards={cards}
      columns={columns}
      setCheckedColumns={setCheckedColumns}
      getCheckedColumns={getCheckedColumns}
      setSorterField={setSorterField}
      onRowEvent={onRowEvent}
      loading={loading}
      onSearch={onSearch}
      hasSelected={hasSelected}
      pageState={dashboardState}
      leftSideBarContent={leftSideBarContent}
      changeRowCount={changeRowCount}
      filters={<StorageFilters onChangeVisible={() => console.log('filter')} />}
      cardInfoComponent={
        storageRecord && (
          <StorageCardInfo
            cardInfo={storageRecord}
            fields={cardInfoFields}
            handleAction={handleAction}
            translations={drawerMessages}
          />
        )
      }
    />
  );
});
