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

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

function CaptureTools({ leftExtContent, rightExtContent, onlyTools, filterTools, ...data }) {
  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="capture-tools-layout">
      {leftExtContent}
      {toools.map(item => (
        <LinkItem {...data} history={history} typeKey={item} key={item} linkConfig={ItemConfig} />
      ))}
      {rightExtContent}
    </div>
  );
}

export default CaptureTools;
