import React, { useMemo } from 'react';
import ItemConfig from './ToolsItem';
import LinkItem from '../Item';
import { useHistory } from 'react-router-dom';
import './index.less';

function getToolsConfig() {
  //TODO 记录使用频率，完成推荐排序
  return ['faceRecord', 'bodyRecord', 'personFile', 'relationMap', 'faceSearch', 'bodySearch', 'vehicleTrajectory', 'vehiclePlateSearch', 'vehicleSearch', 'nonVehicleSearch', 'vehicleFile'];
}

function LinkTools({ onlyTools, filterTools, ...props }) {
  const history = useHistory();
  const toools = useMemo(() => {
    const arr = getToolsConfig();
    if (onlyTools && Array.isArray(onlyTools)) {
      return onlyTools.filter((v) => arr.includes(v));
    }
    if (filterTools && Array.isArray(filterTools)) {
      return arr.filter((v) => !filterTools.includes(v));
    }
    return arr;
  }, [filterTools, onlyTools]);
  return (
    <div className="link-tools-layout">
      {toools.map((item) => (
        <LinkItem {...props} history={history} typeKey={item} key={item} linkConfig={ItemConfig} />
      ))}
    </div>
  );
}

export default LinkTools;
