import { useState, useEffect } from 'react';
import { useDispatch, useSelector } from 'umi';
import { ConnectState } from '@/common/types';
import isUrl from '@pansy/is-url';

export interface DictionaryMapData {
  [key: string]: {
    type: 'icon' | 'img';
    icon: string;
    name: string;
  };
}

// 返回物资类型集合对应的Map集合
const useMaterialIconDictionary = (): DictionaryMapData => {
  const [iconMap, setIconMap] = useState<DictionaryMapData>({});

  const dispatch = useDispatch();
  const { sourceTypes, sourceTypesFetched, iconList, iconFetched } = useSelector(
    ({ fireSource }: ConnectState) => fireSource
  );

  useEffect(() => {
    if (!sourceTypesFetched) {
      dispatch({
        type: `fireSource/fetchSourceType`
      });
    }
  }, [sourceTypesFetched]);

  // 根据配置去获取数据字典
  useEffect(() => {
    if (!iconFetched) {
      dispatch({
        type: `fireSource/fetchIcons`
      });
    }
  }, [iconFetched]);

  useEffect(() => {
    if (iconList?.length && sourceTypes?.length) {
      let map: DictionaryMapData = {};
      sourceTypes.forEach((i) => {
        map[i.id] = {
          type: i.iconId || !isUrl(i.icon) ? 'icon' : 'img',
          icon:
            (i.iconId && iconList.filter((t) => t.id === i.iconId && t.symbol)[0]?.symbol) ||
            (!isUrl(i.icon) ? 'fire-material' : i.icon),
          name: i.name
        };
      });
      setIconMap(map);
    }
  }, [iconList, sourceTypes]);

  return iconMap;
};

export default useMaterialIconDictionary;