import { useDispatch } from 'react-redux';
import { useCallback } from 'react';
import { AddFolder } from '@scaleflex/icons';
import { useModal } from '@filerobot/core/lib/hooks';
import { useTheme } from '@scaleflex/ui/theme/hooks';
import { PC } from '@filerobot/common';
import handlePromise from '@filerobot/utils/lib/handlePromise';
import { InputGroup } from '@scaleflex/ui/core';
import { INVALID_FOLDER_OR_FILE_CHARS_REGEX } from '@filerobot/utils/lib/constants';
import { useExplorerI18n, useExplorerInformer } from '../../../hooks';
import { addNewFolder } from '../../../slices/folders.slice';
import { jsx as _jsx } from "react/jsx-runtime";
export var useAddNewFolderModal = function useAddNewFolderModal() {
  var dispatch = useDispatch();
  var toggleModal = useModal();
  var theme = useTheme();
  var i18n = useExplorerI18n();
  var info = useExplorerInformer();

  // If no path is provided, then the folder will be created in the current folder.
  var triggerAddNewFolderModal = useCallback(function () {
    var toFolderPath = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
    var addFolderHandler = function addFolderHandler(_ref) {
      var data = _ref.data,
        closeModal = _ref.closeModal,
        setIsModalLoading = _ref.setIsModalLoading;
      var folderName = data.folderName;
      if (folderName) {
        setIsModalLoading(true);
        handlePromise(dispatch(addNewFolder({
          path: toFolderPath,
          name: folderName
        })), function () {
          closeModal();
          info(i18n('explorerFolderCreatedInfo'), 'success', 5000);
        }, undefined, function () {
          setIsModalLoading(false);
        });
      } else {
        info(i18n('explorerFolderNameRequiredInfo'), 'warning', 5000);
      }
    };
    toggleModal({
      icon: /*#__PURE__*/_jsx(AddFolder, {
        color: theme.palette[PC.AccentPrimary],
        width: 29,
        height: 29
      }),
      showTitleLabel: true,
      disableAutoClose: true,
      title: i18n('explorerModelAddFolderTitle'),
      content: function content(_ref2) {
        var updateData = _ref2.updateData,
          data = _ref2.data,
          setPrimaryButtonDisabled = _ref2.setPrimaryButtonDisabled;
        return /*#__PURE__*/_jsx(InputGroup, {
          onChange: function onChange(_ref3) {
            var target = _ref3.target;
            var error = '';
            if (INVALID_FOLDER_OR_FILE_CHARS_REGEX.test(target.value)) {
              error = i18n('mutualizedFolderInvalidNameError');
            }
            updateData({
              folderName: target.value,
              error: error
            });
            setPrimaryButtonDisabled(Boolean(error) || !target.value);
          },
          error: Boolean(data.error),
          hint: data.error,
          label: i18n('explorerModelNewFolderName'),
          placeholder: i18n('explorerModelNewFolderPlaceholder'),
          value: data.folderName || '',
          fullWidth: true,
          focusOnMount: true
        });
      },
      buttonPrimaryLabel: i18n('explorerModelAddLabel'),
      buttonSecondaryBg: 'basic',
      onButtonPrimaryClick: addFolderHandler,
      enterKeySubmits: true,
      modalStyle: {
        maxWidth: 400
      },
      modalFooterStyle: {
        flexDirection: 'row'
      },
      modalSecondaryButton: {
        width: 170
      },
      modalSecondaryButtonColor: 'basic',
      modalPrimaryButton: {
        width: 170
      },
      disablePrimaryButton: true
    });
  }, []);
  return triggerAddNewFolderModal;
};