import { CommonTabKeys } from '@/enums';
import { getWorkspaceAssetCountReq } from '@/services/workspace';
import { to } from '@/utils/promise';
import { Flex, Select } from 'antd';
import { useEffect, useState } from 'react';
import styles from './index.less';
function AssetsManagement() {
  const [type, setType] = useState(CommonTabKeys.Public);
  const [assetCounts, setAssetCounts] = useState<{ title: string; value: number }[]>([]);

  useEffect(() => {
    // 获取工作空间资产数量
    const getWorkspacAssetCount = async () => {
      const params = {
        isPublic: type === CommonTabKeys.Public,
      };
      const [res] = await to(getWorkspaceAssetCountReq(params));
      if (res && res.data) {
        const { dataset, image, model, workflow } = res.data;
        const items = [
          {
            title: '数据集',
            value: dataset,
          },
          {
            title: '模型',
            value: model,
          },
          {
            title: '镜像',
            value: image,
          },
          // {
          //   title: '组件',
          //   value: component,
          // },
          // {
          //   title: '代码配置',
          //   value: 0,
          // },
          {
            title: '流水线模版',
            value: workflow,
          },
        ];
        setAssetCounts(items);
      }
    };

    getWorkspacAssetCount();
  }, [type]);

  return (
    <div className={styles['assets-management']}>
      <Flex justify="space-between">
        <div className={styles['assets-management__title']}>AI资产</div>
        <Select
          size="small"
          value={type}
          style={{ width: 70 }}
          onChange={setType}
          variant="filled"
          options={[
            { value: CommonTabKeys.Public, label: '公开' },
            { value: CommonTabKeys.Private, label: '个人' },
          ]}
        />
      </Flex>
      {/* <div className={styles['assets-management__increase']}>今日新增数量：5</div> */}
      <Flex gap="22px 0" wrap="wrap" style={{ marginTop: '40px' }}>
        {assetCounts.map((item, index) => (
          <div className={styles['assets-management__summary']} key={index}>
            <div className={styles['assets-management__summary__title']}>{item.title}</div>
            <div className={styles['assets-management__summary__value']}>{item.value}</div>
          </div>
        ))}
      </Flex>
    </div>
  );
}

export default AssetsManagement;
