import React, { useMemo } from 'react';
import classNames from 'classnames';
import { TreeNavigationProvider } from '../hooks/use-tree-navigation';
import { FILE_TYPE } from './file-tree-adapter';
import { getFileTreeNavigationAdapter } from './file-tree-navigation-adapter';
import { FileTreeFolderComponent, FileTreeFileComponent, FileTreeItemContent, FileTreeLoading } from '.';
import { jsx as _jsx } from "react/jsx-runtime";
/** Displays a browsable file tree navigation component
    @midnight-gray-supported
    @alpine-light-supported
 */
export const FileTree = ({
  fileTree = [],
  folderComponentProps,
  fileComponentProps,
  rootClass,
  fileTestId,
  folderTestId,
  rowSize,
  FileComponent = FileTreeFileComponent,
  FolderComponent = FileTreeFolderComponent,
  ItemContentComponent = FileTreeItemContent,
  rootTestId = 'file-tree-root',
  branchTestId = 'file-tree-branch',
  itemTestId = 'file-tree-item-wrapper',
  disabled = false,
  sortingStrategy = value => value,
  isLoading = false,
  loadingPattern = [0, 1, 1, 2, 0]
}) => {
  const adapter = useMemo(() => getFileTreeNavigationAdapter({
    isExpandedByDefault: !!folderComponentProps?.expand
  }), [!!folderComponentProps?.expand]);
  if (isLoading) {
    return /*#__PURE__*/_jsx(FileTreeLoading, {
      loadingPattern: loadingPattern,
      rootClass: rootClass,
      rootTestId: rootTestId,
      branchTestId: branchTestId
    });
  }
  if (!fileTree.length) {
    return null;
  }
  const baseLevel = 0;
  const renderFileComponent = item => /*#__PURE__*/_jsx(FileComponent, {
    testId: fileTestId,
    item: item,
    itemTestId: itemTestId,
    disabled: disabled,
    ItemContentComponent: ItemContentComponent,
    rowSize: rowSize,
    ...fileComponentProps
  }, item.name);
  const renderFolderComponent = (item, currentLevel) => /*#__PURE__*/_jsx(FolderComponent, {
    testId: folderTestId,
    itemTestId: itemTestId,
    item: item,
    disabled: disabled,
    ItemContentComponent: ItemContentComponent,
    renderBranch: content => renderBranch(content, currentLevel),
    rowSize: rowSize,
    ...folderComponentProps
  }, item.name);
  function renderBranch(content, level) {
    const currentLevel = level + 1;
    const role = level === 0 ? 'tree' : 'group';
    return /*#__PURE__*/_jsx("ul", {
      className: "branch",
      "test-id": `${branchTestId}-${currentLevel}`,
      role: role,
      children: content.map(contentEntry => {
        const {
          type
        } = contentEntry;
        if (type === FILE_TYPE.FOLDER) {
          return renderFolderComponent(contentEntry, currentLevel);
        }
        if (type === FILE_TYPE.FILE) {
          return renderFileComponent(contentEntry);
        }
        return null;
      })
    });
  }
  return /*#__PURE__*/_jsx(TreeNavigationProvider, {
    adapter: adapter,
    tree: fileTree,
    isDisabled: disabled,
    children: /*#__PURE__*/_jsx("div", {
      className: classNames('file-tree-root', rootClass),
      "test-id": rootTestId,
      children: renderBranch(sortingStrategy(fileTree), baseLevel)
    })
  });
};