import { memo } from 'react';
import { CollectionType, DatasetItem, DatasetItemProps } from './DatasetItem';
import { TreeItem } from 'components/tree/utils';

const MemoizedDatasetItem = memo(DatasetItem);

interface CollectionWithChildrenProps {
  data: TreeItem<CollectionType>;
  onClick: DatasetItemProps['onClick'];
  onToggle: DatasetItemProps['toggleTree'];
  isOpen: boolean;
  selected?: string[];
  disabled: boolean;
}

export const CollectionWithChildren = ({
  data,
  selected = [],
  onClick,
  onToggle,
  isOpen,
  disabled,
}: CollectionWithChildrenProps) => {
  const isSelected = selected.indexOf(data.id) !== -1;
  const hasChildren = data.children?.length !== 0;
  return (
    <>
      <div className="relative" style={{ width: '100%' }} key={data.id}>
        <MemoizedDatasetItem
          data={data}
          selected={isSelected}
          onClick={onClick}
          expanded={isOpen}
          toggleTree={hasChildren && !disabled ? onToggle : undefined}
        />
      </div>
      {isOpen &&
        !disabled &&
        data.children?.map((child) => {
          const isSelected = selected.indexOf(child.id) !== -1;
          return (
            <div className="relative" style={{ width: '95%' }} key={child.id}>
              <MemoizedDatasetItem
                data={child}
                selected={isSelected}
                onClick={onClick}
              />
            </div>
          );
        })}
    </>
  );
};