import {memo} from "react";
import {Table} from "antd";
import { Column ,Pie ,Line} from '@ant-design/plots';
import {Area} from "@ant-design/charts";
import {DISPLAY_TYPE} from "../../pages/MainPage/constants";
import {formatColumns, formatData, formatDimensions, formatMetrics} from "./utils";

export const ChartsGraph = memo(({
  type,
  dataSource
})=>{
  const {columns,dimensionColumns,metricColumns,resultList} = dataSource;

  /** 数据规范 */
  const queryColumns = formatColumns(columns);   // 表头
  const dimensions = formatDimensions(dimensionColumns); // 维度
  const metrics = formatMetrics(metricColumns); // 指标
  // 显示方式判断
  // 若维度数大于1，取[0],[1]
  const data = formatData(
    resultList,
    dimensions[0],
    metrics[0],
    dimensions[0]
  )
  // console.log(metrics)
  // console.log(data)

  // 参数配置规范
  // 灵活渲染
  // 组件复用


  // console.log(data)
  const DemoColumn = () => {
    let config = {
      data,
      xField: 'dimension',
      yField: 'metric',
      stack:true,
      colorField: 'category',
      axis: {y: { labelFormatter: '~s' }},
      containerStyle:{height:'50vh'},
      legend: false,
      sort: {
        reverse: true,
        by: 'y',
      },
    };
    return <Column {...config} />;
  };

  const DemoArea = () => {
    const config = {
      data: data,
      xField: 'dimension',
      yField: 'metric',
      colorField: 'category',
      shapeField: 'smooth',
      group: true,
      stack:false,
      axis: {
        x: { title: 'Date' },
        y: { labelFormatter: '~s' },
      },
      legend: {
        color: { size: 72, autoWrap: true, maxRows: 3, cols: 6 },
      },
    };
    return <Area {...config} />;
  };

  const DemoPie = () => {
    const config = {
      data,
      angleField: 'metric',
      colorField: 'category',
      label: {
        text: 'category',
        style: {
          fontWeight: 'bold',
        },
      },
      legend: {
        color: {
          title: false,
          position: 'right',
          rowPadding: 5,
        },
      },
      containerStyle:{
        height:'50vh'
      },
    };
    return <Pie {...config} />;
  };

  const DemoLine = () => {
    const config = {
      data,
      xField: 'dimension',
      yField: 'metric',
      sizeField: 'metric',
      shapeField: 'trail',
      legend: { size: false },
      colorField: 'category',
      containerStyle:{
        height:'50vh'
      },
    };
    return <Line {...config} />;
  };

  switch (type) {
    case DISPLAY_TYPE.BAR_CHART: return DemoColumn();
    case DISPLAY_TYPE.PIE_CHART: return DemoPie();
    case DISPLAY_TYPE.LINE_CHART: return DemoLine();
    case DISPLAY_TYPE.AREA_CHART : return DemoArea();
    default:
      return (
        <Table
          columns={queryColumns}
          dataSource={resultList}
        />
      )
  }
})