import { memo } from 'react';
import { Box } from 'components/common';
import { CollectionType } from './DatasetItem';
import { TreeItem } from 'components/tree/utils';
import { CollectionWithChildren } from './CollectionWithChildren';

interface CollectionsTreeProps {
  data: TreeItem<CollectionType>[];
  onToggle: (id: string) => void;
  hiddenItems: string[];
  selected: string[];
  onSelect: (id: string) => void;
}

const MemoizedCollectionWithChildren = memo(CollectionWithChildren);

export const CollectionsTree = ({
  data,
  onToggle,
  hiddenItems,
  selected,
  onSelect,
}: CollectionsTreeProps) => {
  return (
    <Box display="flex" column align="center" spacingY={2}>
      {data.map((item) => {
        const ids = [item.id, ...item.children.map((child) => child.id)];
        const isSelected = selected.some((value) => ids.indexOf(value) !== -1);
        const isOpen = hiddenItems.indexOf(item.id) === -1;
        return (
          <MemoizedCollectionWithChildren
            data={item}
            onClick={onSelect}
            onToggle={onToggle}
            isOpen={isOpen}
            disabled={item.status === 'deleted'}
            selected={isSelected ? selected : undefined}
            key={item.id}
          />
        );
      })}
    </Box>
  );
};