import { Flex, Input } from 'antd';
import { CategoryData, ResourceType, resourceConfig } from '../../config';
import CategoryItem from '../CategoryItem';
import styles from './index.less';

type CategoryProps = {
  resourceType: ResourceType; // 资源类型，数据集还是模型
  typeList: CategoryData[];
  tagList: CategoryData[];
  activeType?: string;
  activeTag?: string;
  onTypeSelect: (value: CategoryData) => void;
  onTagSelect: (value: CategoryData) => void;
  onSearch: (value: string) => void;
};

function CategoryList({
  resourceType,
  typeList,
  tagList,
  activeType,
  activeTag,
  onTypeSelect,
  onTagSelect,
  onSearch,
}: CategoryProps) {
  const config = resourceConfig[resourceType];
  return (
    <div className={styles['category-list']}>
      <div style={{ padding: '0 20px' }}>
        <Input.Search placeholder="搜索" allowClear onSearch={onSearch} />
      </div>
      <div className={styles['category-list__content']}>
        <div className={styles['category-list__content__title']}>{config.typeTitle}</div>
        <Flex wrap="wrap" gap="20px 12px">
          {typeList?.map((item) => (
            <CategoryItem
              key={item.id}
              resourceType={resourceType}
              item={item}
              onClick={onTypeSelect}
              isSelected={item.name === activeType}
            ></CategoryItem>
          ))}
        </Flex>
        <div className={styles['category-list__content__title']} style={{ marginTop: '25px' }}>
          {config.tagTitle}
        </div>
        <Flex wrap="wrap" gap="20px 12px">
          {tagList?.map((item) => (
            <CategoryItem
              key={item.id}
              resourceType={resourceType}
              item={item}
              onClick={onTagSelect}
              isSelected={item.name === activeTag}
            ></CategoryItem>
          ))}
        </Flex>
      </div>
    </div>
  );
}

export default CategoryList;
