import { useEffect, useState } from 'react';
import { observer } from 'mobx-react';
import { sortBy, merge } from '../utils/commons';
import { dataFieldAlias } from '../libs/ht';
import { Column } from '@ant-design/plots';

export default observer((props) => {
  const { dataSource, line, ...extProps } = props;
  const yMax = Math.max(line?.value || 0, ...dataSource.map((ele) => ele[extProps.yField]));
  const annotationsLine = line
    ? [
        {
          type: 'text',
          position: ['start', line.value],
          content: `${line.label} ${line.value / 1000} K`,
          // offsetX: -15,
          style: {
            fill: '#F4664A',
            textBaseline: 'bottom',
          },
        },
        {
          type: 'line',
          start: [-10, line.value],
          end: ['max', line.value],
          style: {
            stroke: '#F4664A',
            lineDash: [2, 2],
          },
        },
      ]
    : [];
  const config = merge({
    isStack: true,
    // xField: 'value',
    // yField: 'year',
    // seriesField: 'type',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle',
      // 'left', 'middle', 'right'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        {
          type: 'interval-adjust-position',
        }, // 数据标签防遮挡
        {
          type: 'interval-hide-overlap',
        }, // 数据标签文颜色自动调整
        {
          type: 'adjust-color',
        },
      ],
    },
    meta: {
      [extProps.yField]: {
        alias: dataFieldAlias[extProps.yField]?.alias || extProps.yField,
        formatter: (v) => dataFieldAlias[extProps.yField]?.formatter(v) || v,
        max: Math.ceil(yMax / 0.95),
      },
    },
    annotations: [...annotationsLine],
  }, extProps);
  return <Column {...config} data={dataSource} />;
});