import React, { useState } from 'react';
import ColumnChart, { IColumnChart } from '../column-chart';
import Filter, { IChartData } from '../filter';
import useFilter from '../filter/useFilter';

interface IProps extends IColumnChart {
  data: IChartData[];
}

export default ({...rest}: IProps) => {
  // 选中的筛选值
  const [value, setValue] = useState<(string | number)[]>([]);
  const [onlyPercent, setOnlyPercent] = useState(false);
  const {multiple, data, config, tooltipFormatter} = useFilter(value, rest as any, onlyPercent);

  return (
    <>
      <Filter multiple={multiple} value={value} data={rest.data} onChangeValue={(newValue, onlyPercent) => {
        setValue(newValue);
        setOnlyPercent(onlyPercent);
      }} />
      <ColumnChart {...tooltipFormatter} {...config} data={data as any} />
    </>
  );
};