import { CommonTabKeys } from '@/enums';
import { useCacheState } from '@/hooks/useCacheState';
import { getAssetIcon } from '@/services/dataset/index.js';
import { to } from '@/utils/promise';
import { Flex, Tabs, type TabsProps } from 'antd';
import { useCallback, useEffect, useRef, useState } from 'react';
import { CategoryData, ResourceType, resourceConfig } from '../../config';
import CategoryList from '../CategoryList';
import ResourceList, { ResourceListRef } from '../ResourceList';
import styles from './index.less';

type ResourcePageProps = {
  resourceType: ResourceType; // 资源类型，数据集还是模型
};

function ResourcePage({ resourceType }: ResourcePageProps) {
  const [cacheState, setCacheState] = useCacheState();
  const [activeTab, setActiveTab] = useState<string>(cacheState?.activeTab ?? CommonTabKeys.Public);
  const [typeList, setTypeList] = useState<CategoryData[]>([]);
  const [tagList, setTagList] = useState<CategoryData[]>([]);
  const [activeType, setActiveType] = useState<string | undefined>(cacheState?.activeType);
  const [activeTag, setActiveTag] = useState<string | undefined>(cacheState?.activeTag);
  const dataListRef = useRef<ResourceListRef>(null);
  const config = resourceConfig[resourceType];

  // 获取分类
  const getAssetIconList = useCallback(
    async (name: string = '') => {
      const params = {
        name: name,
        page: 0,
        size: 10000,
      };
      const [res] = await to(getAssetIcon(params));
      if (res && res.data && res.data.content) {
        const { content } = res.data;
        setTypeList(
          content.filter((item: CategoryData) => Number(item.category_id) === config.typeValue),
        );
        setTagList(
          content.filter((item: CategoryData) => Number(item.category_id) === config.tagValue),
        );
      }
    },
    [config],
  );

  useEffect(() => {
    getAssetIconList();
  }, [getAssetIconList]);

  // 分类搜索
  const handleCategorySearch = (value: string) => {
    getAssetIconList(value);
  };

  // 选择类型
  const chooseType = (record: CategoryData) => {
    dataListRef.current?.resetPage();
    setActiveType((prev) => (prev === record.name ? undefined : record.name));
  };

  // 选择 Tag
  const chooseTag = (record: CategoryData) => {
    dataListRef.current?.resetPage();
    setActiveTag((prev) => (prev === record.name ? undefined : record.name));
  };

  // 切换 Tab，重置数据
  const hanleTabChange: TabsProps['onChange'] = (value) => {
    dataListRef.current?.reset();
    setActiveTab(value);
  };

  const isPublic = activeTab === CommonTabKeys.Public;
  return (
    <div className={styles['resource-page']}>
      <div className={styles['resource-page__tabs-container']}>
        <Tabs activeKey={activeTab} items={config.tabItems} onChange={hanleTabChange} />
      </div>
      <Flex style={{ marginTop: '10px', height: 'calc(100% - 59px)' }}>
        <CategoryList
          resourceType={resourceType}
          typeList={typeList}
          tagList={tagList}
          activeType={activeType}
          activeTag={activeTag}
          onTypeSelect={chooseType}
          onTagSelect={chooseTag}
          onSearch={handleCategorySearch}
        />
        <ResourceList
          ref={dataListRef}
          resourceType={resourceType}
          typeList={typeList}
          tagList={tagList}
          isPublic={isPublic}
          dataType={activeType}
          dataTag={activeTag}
          initialSearchText={cacheState?.searchText}
          initialPagination={cacheState?.initialPagination}
          setCacheState={setCacheState}
        ></ResourceList>
      </Flex>
    </div>
  );
}

export default ResourcePage;
