function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
import { useRef, useCallback } from 'react';
import { useSelector, useDispatch } from 'react-redux';
import classNames from 'classnames';
import { useContextMenu } from '@filerobot/core/lib/hooks';
import { LAYOUTS_IDS, PERMISSIONS } from '@filerobot/utils/lib/constants';
import findIndex from '@filerobot/utils/lib/findIndex';
import GridView from './GridView';
import ListView from './ListView';
import EmptyFolderPlaceholder from '../EmptyFolderPlaceholder';
import StyledExplorer from '../../Explorer.styled';
import { selectionsCleared, toggleSelection } from '../../slices/selections.slice';
import { useExplorer, useIsSmallScreen } from '../../hooks';
import { selectContainerWidth } from '../../slices/common.slice';
import { selectTopSectionHeight } from '../../slices/topSection.slice';
import { fileWindowUpdated } from '../../slices/panels.slice';
import { openFolderByPath, selectIsFoldersLoading, selectOpenedFolders } from '../../slices/folders.slice';
import { selectIsShareboxView, selectViewLayout } from '../../slices/views.slice';
import ScrollToTop from './ScrollToTop';
import { selectIsFilesLoading } from '../../slices/files.slice';
import { getItemByUuid } from '../../thunks/items.thunks';
import { openShareboxFolder } from '../../slices/sharebox.slice';
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var mouseClickTimeout = null;
var AssetsList = function AssetsList(_ref) {
  var foldersUuids = _ref.foldersUuids,
    filesUuids = _ref.filesUuids,
    hideAccordionHeader = _ref.hideAccordionHeader,
    _ref$sortProps = _ref.sortProps,
    sortProps = _ref$sortProps === void 0 ? {} : _ref$sortProps,
    ignoreEmptyFolder = _ref.ignoreEmptyFolder,
    fetchNextFiles = _ref.fetchNextFiles,
    fetchNextFolders = _ref.fetchNextFolders,
    isInitialLoading = _ref.isInitialLoading;
  var dispatch = useDispatch();
  var toggleContextMenu = useContextMenu();
  var isWidgetSmallSize = useIsSmallScreen();
  var _useExplorer = useExplorer(),
    checkUserPermissions = _useExplorer.checkUserPermissions;
  var containerWidth = useSelector(selectContainerWidth);
  var topSectionHeight = useSelector(selectTopSectionHeight);
  var openedFolders = useSelector(selectOpenedFolders);
  var viewLayout = useSelector(selectViewLayout);
  var isShareboxView = useSelector(selectIsShareboxView);
  // const updateShareboxOpenedFolders = useBrowserContext(({ updateShareboxOpenedFolders }) => updateShareboxOpenedFolders)
  var isFoldersLoading = useSelector(function (state) {
    return isInitialLoading || selectIsFoldersLoading(state);
  });
  var isFilesLoading = useSelector(function (state) {
    return isInitialLoading || selectIsFilesLoading(state);
  });
  var isLoading = isFoldersLoading || isFilesLoading;
  var itemsContainerRef = useRef();
  var foldersLength = (foldersUuids === null || foldersUuids === void 0 ? void 0 : foldersUuids.length) || 0;
  var filesLength = filesUuids.length;
  var hasFolders = foldersLength > 0;
  var hasFiles = filesLength > 0;
  var hasItems = hasFolders || hasFiles;

  // const itemIconString = props.getItemIcon()
  var className = classNames('filerobot-ProviderBrowserItem'
  // { 'with-meta': props.showMeta && props.type !== 'folder' },
  // { 'filerobot-ProviderBrowserItem--selected': props.isChecked }
  // to be decided as we should support video preview in v3
  // { 'filerobot-ProviderBrowserItem--noPreview': itemIconString === 'video' },
  // { 'filerobot-ProviderBrowserItem--beingRenamed': props.renameItemFor && props.renameItemFor === props.id }
  );

  var getItemsContainerWidth = useCallback(function () {
    var _itemsContainerRef$cu;
    return itemsContainerRef ? (_itemsContainerRef$cu = itemsContainerRef.current) === null || _itemsContainerRef$cu === void 0 ? void 0 : _itemsContainerRef$cu.getBoundingClientRect().width : containerWidth;
  }, [containerWidth]);
  var openFolderOnClick = useCallback(function (folder) {
    clearTimeout(mouseClickTimeout);
    mouseClickTimeout = null;
    if (isShareboxView) {
      dispatch(openShareboxFolder(folder));
    } else {
      dispatch(openFolderByPath({
        folderPath: folder.path
      }));
    }
  }, []);
  var navigateToItem = useCallback(function (event, navigatedItemIndexOffset) {
    var _document$activeEleme, _document$activeEleme2;
    if (!event || !navigatedItemIndexOffset) {
      return;
    }
    var lastFocusedItemUuid = (_document$activeEleme = document.activeElement) === null || _document$activeEleme === void 0 ? void 0 : (_document$activeEleme2 = _document$activeEleme.dataset) === null || _document$activeEleme2 === void 0 ? void 0 : _document$activeEleme2.filerobotFocusableUuid;
    if (!lastFocusedItemUuid) {
      return;
    }
    event.preventDefault();
    var _dispatch = dispatch(getItemByUuid(lastFocusedItemUuid)),
      isFolder = _dispatch.isFolder,
      item = _dispatch.item;
    if (navigatedItemIndexOffset === 'enter') {
      return isFolder ? openFolderOnClick === null || openFolderOnClick === void 0 ? void 0 : openFolderOnClick(item) : dispatch(fileWindowUpdated(lastFocusedItemUuid));
    }
    var items = isFolder ? foldersUuids : filesUuids;
    var navigatedItemIndex = findIndex(items, function (i) {
      return i === lastFocusedItemUuid;
    }) + navigatedItemIndexOffset;
    var navigatedItemUuid;
    if (isFolder && navigatedItemIndex >= foldersUuids.length) {
      navigatedItemUuid = filesUuids[0];
    } else if (!isFolder && navigatedItemIndex < 0) {
      navigatedItemUuid = foldersUuids[foldersUuids.length - 1];
    } else if (isFolder && navigatedItemIndex < 0 || !isFolder && navigatedItemIndex === filesUuids.length) {
      return;
    } else {
      navigatedItemUuid = items[navigatedItemIndex];
    }
    if (navigatedItemUuid) {
      dispatch(toggleSelection({
        event: event,
        itemUuid: navigatedItemUuid
      }));
      var _item = itemsContainerRef.current.querySelector("[data-filerobot-focusable-uuid=\"".concat(navigatedItemUuid, "\"]"));
      if (_item) {
        _item.focus();
        _item.scrollIntoViewIfNeeded();
      }
    }
  }, [foldersUuids, filesUuids, openFolderOnClick, toggleSelection]);
  var handleNavigatingThroughArrows = useCallback(function (e) {
    var calcIndexOffset = function calcIndexOffset() {
      return parseInt(getItemsContainerWidth() / e.currentTarget.getBoundingClientRect().width);
    };
    var isGridLayout = viewLayout === LAYOUTS_IDS.GRID;
    var navigatedItemIndexOffset = {
      ArrowRight: 1,
      ArrowLeft: -1,
      ArrowUp: isGridLayout ? -calcIndexOffset() : -1,
      ArrowDown: isGridLayout ? calcIndexOffset() : 1,
      Enter: 'enter'
    };
    navigateToItem(e, navigatedItemIndexOffset[e.key]);
  }, [viewLayout, navigateToItem]);
  var handleNavigatingBack = function handleNavigatingBack(e) {
    if (e.key === 'Backspace') {
      var openedDirsLength = openedFolders.length;
      if (openedDirsLength) {
        var previousFolder = openedFolders[openedDirsLength - 2];
        if (previousFolder) {
          openFolderOnClick(previousFolder);
        }
      }
    }
  };
  var handleContextMenuToggle = useCallback(function (event, fileOrFolder) {
    var newSelections = dispatch(toggleSelection({
      event: event,
      itemUuid: fileOrFolder.uuid,
      keepSelectionsIfItemExisted: true
    }));
    return toggleContextMenu({
      event: event,
      foldersUuids: newSelections.foldersUuids || [],
      filesUuids: newSelections.filesUuids || []
    });
  }, []);
  var resetSelections = function resetSelections(e) {
    dispatch(selectionsCleared());
  };
  var openCurrentFolderContextMenu = function openCurrentFolderContextMenu(event) {
    if (!checkUserPermissions([PERMISSIONS.LIST_ALL])) {
      return;
    }
    dispatch(selectionsCleared());
    toggleContextMenu({
      event: event,
      foldersUuids: [],
      filesUuids: [],
      items: null
    });
  };
  var renderLayout = function renderLayout(props) {
    switch (viewLayout) {
      case LAYOUTS_IDS.GRID:
        return /*#__PURE__*/_jsx(GridView, _objectSpread(_objectSpread({}, props), {}, {
          className: className
        }));
      case LAYOUTS_IDS.LIST:
      case LAYOUTS_IDS.TILES:
        return /*#__PURE__*/_jsx(ListView, _objectSpread(_objectSpread({}, props), {}, {
          className: className
        }));
      default:
        throw new Error("There is no such type ".concat(viewLayout));
    }
  };

  // TODO: This might cause jumping while we are already scrolled cause there is possibility that folders load before files or the reverse, so we might improve this?
  // useEffect(() => {
  //   if (itemsContainerRef?.current) {
  //     itemsContainerRef.current.scrollTo(0, 0)
  //   }
  // }, [isLoading])

  if (!isLoading && !hasItems && !ignoreEmptyFolder) {
    return /*#__PURE__*/_jsx(EmptyFolderPlaceholder, {});
  }
  return /*#__PURE__*/_jsxs(StyledExplorer.ExplorerBrowserList, {
    id: "scrollableElement",
    className: "filerobot-ProviderBrowser-list",
    onClick: resetSelections,
    role: "listbox"
    // making <ul> not focusable for firefox
    ,
    tabIndex: "-1",
    ref: itemsContainerRef,
    onKeyDown: handleNavigatingBack,
    isWidgetSmallSize: isWidgetSmallSize,
    topSectionHeight: topSectionHeight,
    isFoldersView: hasFolders,
    "data-scroller": "true",
    children: [renderLayout({
      handleNavigatingThroughArrows: handleNavigatingThroughArrows,
      containerWidth: getItemsContainerWidth,
      openFolderOnClick: openFolderOnClick,
      hasFolders: hasFolders,
      hasFiles: hasFiles,
      foldersUuids: foldersUuids,
      filesUuids: filesUuids,
      handleContextMenuToggle: handleContextMenuToggle,
      hideAccordionHeader: hideAccordionHeader,
      openCurrentFolderContextMenu: openCurrentFolderContextMenu,
      fetchNextFiles: fetchNextFiles,
      fetchNextFolders: fetchNextFolders,
      isFoldersLoading: isFoldersLoading,
      isFilesLoading: isFilesLoading,
      sortProps: sortProps
    }), /*#__PURE__*/_jsx(ScrollToTop, {
      scrollableElem: itemsContainerRef.current
    })]
  });
};
export default AssetsList;