import { assertGroup, buildEntityPath } from '@h5web/shared';

import { useDataContext } from '../providers/DataProvider';
import EntityItem from './EntityItem';
import styles from './Explorer.module.css';

interface Props {
  level: number;
  parentPath: string;
  selectedPath: string;
  fileIndex:number;
  onSelect: (path: string) => void;
  onSelectFile: (path: string) => void;
  onSelectFileIndex: (index:number) => void;
}

function EntityList(props: Props) {
  const { level, parentPath, selectedPath, fileIndex,onSelect,onSelectFile,onSelectFileIndex } = props;

  const { entitiesStore,filepath,fileExt } = useDataContext();
  const group = entitiesStore.get(parentPath);
  assertGroup(group);

  if (group.children.length === 0) {
    return null;
  }

  return (
    <ul className={styles.group} role="group">
      {group.children.map((entity) => {
        const { name } = entity;

        return (
          <EntityItem
            key={name}
            path={buildEntityPath(parentPath, name)}
            filePath={filepath}
            fileIndex={fileIndex}
            entity={entity}
            level={level}
            selectedPath={selectedPath}
            onSelect={onSelect}
            onSelectFile={onSelectFile}
            onSelectFileIndex={onSelectFileIndex}
          />
        );
      })}
    </ul>
  );
}

export default EntityList;