import { useEffect, useCallback } from 'react';
import { useDispatch, useSelector } from 'umi';
import { keyBy, filter } from 'lodash';
import { ConnectState } from '../types';
import { SystemApps } from '@/pages/app-store/types';
import { systemAppType } from '@/config/';
import { APP_TYPE } from '@/pages/application/config';

export { systemAppType };

export type ReturnValue = [boolean, any];

const useAppDictionary = (appType: APP_TYPE): ReturnValue => {
  const dispatch = useDispatch();
  const { apps, loading } = useSelector<
    ConnectState,
    { apps: SystemApps[]; loading: boolean | undefined }
  >(({ systemApps, loading }) => ({
    apps: systemApps.allIds,
    loading: loading.effects['systemApps/fetch']
  }));

  const data = keyBy(
    filter(apps, function (o) {
      return o.appType;
    }),
    function (o) {
      return o!.appType;
    }
  );
  // store.set('lins-system-app', data);
  const newApps = appType ? data[appType] || {} : data;

  const getData = useCallback(() => {
    dispatch({
      type: 'systemApps/fetch',
      payload: {
        size: 100
      }
    });
  }, []);

  useEffect(() => {
    if (!loading) {
      getData();
    }
  }, []);

  return [loading, newApps];
};

useAppDictionary.systemAppType = systemAppType;

export default useAppDictionary;