import { useCallback } from 'react';
import { useDispatch } from 'react-redux';
import createThunk from '@filerobot/utils/lib/createThunk';
import { useCore, useModal } from '@filerobot/core/lib/hooks';
import getItemsSizeInBytes from '@filerobot/utils/lib/getItemsSizeInBytes';
import { useTheme } from '@scaleflex/ui/theme/hooks';
import prettyFileSize from '@filerobot/utils/lib/prettyFileSize';
import { Remove } from '@scaleflex/icons';
import { PC } from '@filerobot/common';
import handlePromise from '@filerobot/utils/lib/handlePromise';
import isUploadableFile from '@filerobot/utils/lib/isUploadableFile';
import { selectFoldersByUuids } from '../../../slices/folders.slice';
import { selectCurrentFileByIdOrUuid } from '../../../slices/files.slice';
import { deleteItems } from '../../../thunks/items.thunks';
import { useExplorer, useExplorerI18n, useExplorerInformer } from '../../../hooks';

// A trick soltuion to get folder & file objects cause we don't have access to current state inside a callback function and not possible to use (useSelector) inside the function.
import { jsx as _jsx } from "react/jsx-runtime";
var getItemsByUuids = createThunk(function (_ref, thunkApi) {
  var foldersUuids = _ref.foldersUuids,
    filesUuidsOrIds = _ref.filesUuidsOrIds;
  var state = thunkApi.getState();
  var items = {
    folders: [],
    files: []
  };
  if (foldersUuids.length > 0) {
    items.folders = selectFoldersByUuids(state, foldersUuids);
  }
  if (filesUuidsOrIds.length > 0) {
    items.files = filesUuidsOrIds.map(function (fileUuidOrId) {
      return selectCurrentFileByIdOrUuid(state, fileUuidOrId);
    });
  }
  return items;
});
export var useDeleteItemsModal = function useDeleteItemsModal() {
  var dispatch = useDispatch();
  var _useCore = useCore(),
    emit = _useCore.emit;
  var _useExplorer = useExplorer(),
    removeUploadFiles = _useExplorer.removeUploadFiles;
  var i18n = useExplorerI18n();
  var info = useExplorerInformer();
  var toggleModal = useModal();
  var theme = useTheme();

  // filesIdsBeforeUpload is used only to delete the just uploaded files to remove them from the uploads state, and start using them from BE.
  // So to delete from uploads state before starting the upload process u should use filesUuids normally.
  var triggerDeleteModal = useCallback(function (_ref2) {
    var _ref2$foldersUuids = _ref2.foldersUuids,
      foldersUuids = _ref2$foldersUuids === void 0 ? [] : _ref2$foldersUuids,
      _ref2$filesIdsBeforeU = _ref2.filesIdsBeforeUpload,
      filesIdsBeforeUpload = _ref2$filesIdsBeforeU === void 0 ? [] : _ref2$filesIdsBeforeU,
      _ref2$filesUuids = _ref2.filesUuids,
      filesUuidsOrIds = _ref2$filesUuids === void 0 ? [] : _ref2$filesUuids,
      onSuccess = _ref2.onSuccess,
      onConfirm = _ref2.onConfirm,
      _ref2$modalPrimaryBut = _ref2.modalPrimaryButtonColor,
      modalPrimaryButtonColor = _ref2$modalPrimaryBut === void 0 ? '' : _ref2$modalPrimaryBut;
    // A trick solution to get the folders & files while not possible to use useSelector inside the function.
    var _dispatch = dispatch(getItemsByUuids({
        foldersUuids: foldersUuids,
        filesUuidsOrIds: filesUuidsOrIds
      })),
      folders = _dispatch.folders,
      files = _dispatch.files;
    var deleteHandler = function deleteHandler(_ref3) {
      var closeModal = _ref3.closeModal,
        setIsModalLoading = _ref3.setIsModalLoading;
      if (isUploadableFile(files[0])) {
        removeUploadFiles(filesUuidsOrIds);
        closeModal();
        return;
      }
      setIsModalLoading(true);
      handlePromise(dispatch(deleteItems({
        foldersUuids: foldersUuids,
        filesUuids: filesUuidsOrIds
      })), function (_) {
        if ((filesIdsBeforeUpload === null || filesIdsBeforeUpload === void 0 ? void 0 : filesIdsBeforeUpload.length) > 0) {
          removeUploadFiles(filesIdsBeforeUpload);
        }
        if (typeof onSuccess === 'function') {
          onSuccess();
        }
        info(i18n('explorerDeletedSuccessfullyInfo'), 'success');
        emit('items-deleted', {
          removedFolders: folders,
          removedFiles: files
        });
      }, undefined, function () {
        setIsModalLoading(false);
        closeModal();
      });
    };
    var totalItemsSize = getItemsSizeInBytes(folders.concat(files));
    var foldersCount = foldersUuids.length;
    var filesCount = filesUuidsOrIds.length;
    var itemsCount = foldersCount + filesCount;
    var getDeleteModelContent = function getDeleteModelContent() {
      if (foldersCount && filesCount) {
        return "".concat(i18n('deleteModalAssetsCountLabel', {
          smart_count: filesCount
        }), ",\n            ").concat(i18n('deleteModalFoldersCountLabel', {
          smart_count: foldersCount
        }));
      }
      if (foldersCount && !filesCount) {
        return i18n('deleteModalFoldersCountLabel', {
          smart_count: foldersCount
        });
      } else {
        return i18n('deleteModalAssetsCountLabel', {
          smart_count: filesCount
        });
      }
    };
    toggleModal({
      icon: /*#__PURE__*/_jsx(Remove, {
        color: theme.palette[PC.Error],
        size: 29
      }),
      showTitleLabel: true,
      title: itemsCount === 1 ? i18n('explorerDeleteItemTitle') : i18n('explorerModelDeleteItemsTitle', {
        smart_count: itemsCount
      }),
      content: "".concat(getDeleteModelContent(), " - ").concat(prettyFileSize(totalItemsSize), " ").concat(i18n('explorerModelItemsWillBeDeletedContent')),
      buttonPrimaryLabel: i18n('mutualizedConfirmButtonLabel'),
      onButtonPrimaryClick: onConfirm || deleteHandler,
      disableAutoClose: true,
      modalStyle: {
        maxWidth: 400
      },
      modalBodyStyle: {
        textAlign: 'center'
      },
      modalFooterStyle: {
        flexDirection: 'row'
      },
      modalSecondaryButton: {
        width: 170
      },
      modalSecondaryButtonColor: 'basic',
      modalPrimaryButtonColor: modalPrimaryButtonColor,
      modalPrimaryButton: {
        width: 170
      }
    });
  }, [theme, i18n]);
  return triggerDeleteModal;
};