import { Fragment } from 'react';

import { Box } from 'components/common';
import { TreeItem } from 'components/tree/utils';
import { Audience, AudienceItem } from 'components/facebook/AudienceItem';

export interface AudienceTreeProps {
  data: TreeItem<Audience>[];
  onToggle: (id: string) => void;
  hiddenItems: string[];
}

export const AudienceTree = ({
  data,
  onToggle,
  hiddenItems,
}: AudienceTreeProps) => {
  return (
    <Box display="flex" column align="center" spacingY={2}>
      {data.map((item) => {
        const isOpen = hiddenItems.indexOf(item.id) === -1;
        const toggleTree = item.children.length
          ? () => onToggle(item.id)
          : undefined;
        return (
          <Fragment key={item.id}>
            <AudienceItem
              data={item}
              expanded={isOpen}
              toggleTree={toggleTree}
              style={{ width: '100%' }}
            />
            {isOpen &&
              item.children.map((child) => {
                return (
                  <AudienceItem
                    data={child}
                    style={{ width: '95%' }}
                    key={child.id}
                  />
                );
              })}
          </Fragment>
        );
      })}
    </Box>
  );
};