import React, { useContext } from 'react';
import DataBoxItem from './Item';
import EasyvEmpty from 'components/EasyvEmpty';
import styles from './List.less';
import { DataContext } from './Context/index';

function FilterList({ search = '' }: { search?: string }) {
  const { list } = useContext(DataContext);

  const filterList = list.filter((d) => d.name.includes(search));

  return (
    <>
      {list.length ? (
        filterList.length ? (
          filterList.map((d: any) => (
            <DataBoxItem key={d.id} enable={d.components.length} id={d.id} name={d.name} />
          ))
        ) : (
          <EasyvEmpty className={styles.empty} description="无关键词匹配" />
        )
      ) : (
        <EasyvEmpty className={styles.empty} description="暂无数据容器" />
      )}
    </>
  );
}

export default FilterList;
