import { useEffect, useState } from 'react';
import fetchData from 'utils/fetchData';
import { App } from 'utils/types';
import { ChartTypes } from './types';

const useChart = (props: ChartTypes.ChartProps) => {
  const { config, filterParams } = props;

  const [columnMetas, setColumnMetas] = useState<ChartTypes.ColumnMeta[]>([]);
  const [results, setResults] = useState<(number | string)[]>([]);

  // 获取数据
  const handleFetchData = (params: App.Dict) => {
    const combinedParams = {
      ...filterParams,
      ...params,
    };
    const { ajax: chartAjax } = config;
    fetchData(chartAjax, combinedParams).then((data: ChartTypes.ResponseData) => {
      const { columnMetas: resColumnMetas, results: resResults } = data;
      setColumnMetas(resColumnMetas);
      setResults(resResults);
    });
  };

  useEffect(() => {
    handleFetchData({});
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  return {
    columnMetas,
    results,
    handleFetchData,
  };
};

export default useChart;