import React, { useEffect, useMemo } from 'react';
import Filter from './button-row';

export interface IChartData {
  filter: string | number;
  filterName: string;
  percent?: boolean;
  type: string | number;
  [key: string]: any;
}
interface IProps {
  multiple: boolean;
  value: (string | number)[];
  data: IChartData[];
  onChangeValue: (value: (string | number)[], onlyPercent: boolean) => void;
}

export default ({ multiple, value, onChangeValue, ...rest }: IProps) => {
  // 从数据中拿出筛选选项和Map信息
  const filterInfo = useMemo(() => {
    const result = new Set();
    const map: any = {};
    const percentMap: any = {};
    if (rest.data) {
      rest.data.forEach(data => {
        result.add(data.filter);
        map[data.filter] = data.filterName;
        percentMap[data.filter] = Boolean(data.percent);
      });
    }
    const arr = [...result] as string[];
    return {
      options: arr,
      map,
      percentMap,
    };
  }, [rest.data]);

  // 选中默认的值
  useEffect(() => {
    const { options, percentMap } = filterInfo;
    if (options?.[0]) {
      setTimeout(() => {}, 100);
      onChangeValue([options[0]], percentMap[options[0]]);
    }
  }, [filterInfo]);

  return (
    <Filter
      value={value}
      options={filterInfo.options}
      map={filterInfo.map}
      onClick={selected => {
        const activeIndex = value.findIndex(item => selected === item);
        if (activeIndex > -1) {
          value.splice(activeIndex, 1);
        } else {
          if (multiple) {
            value.push(selected);
          } else {
            value[0] = selected;
          }
        }
        const onlyPercent = value.every(item => filterInfo.percentMap[item]);
        onChangeValue(value.slice(0), onlyPercent);
      }}
    />
  );
};