import React from 'react';
import { BaseChart } from './BaseChart';
import type { ChartsConfig } from '../types/u-charts-original';

/**
 * RingChart 环形图组件的 Props 接口
 * 使用原始 u-charts.js + Canvas 2D API
 */
export interface RingChartProps {
  /** Canvas 元素的 ID，必须唯一 */
  canvasId: string;
  /** 图表宽度（像素） */
  width?: number;
  /** 图表高度（像素） */
  height?: number;
  /** 环形宽度（0-1之间的比例，默认 0.6） */
  ringWidth?: number;
  /** 系列数据 */
  series: ChartsConfig['series'];
  /** 额外的图表配置 */
  config?: Partial<ChartsConfig>;
}

/**
 * RingChart 环形图组件
 *
 * 使用原始 u-charts.js + Canvas 2D API
 * 用于显示占比数据的环形图
 */
export const RingChart: React.FC<RingChartProps> = (props) => {
  const {
    canvasId,
    width,
    height,
    ringWidth = 0.6,
    series,
    config = {},
  } = props;

  /**
   * 合并默认配置
   */
  const mergedConfig: Partial<ChartsConfig> = {
    animation: true,
    background: '#FFFFFF',
    color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
    padding: [5, 5, 5, 5],
    enableScroll: false,
    dataLabel: true,
    legend: {},
    extra: {
      ring: {
        ringWidth: ringWidth,
        activeOpacity: 0.5,
        activeRadius: 10,
        offsetAngle: 0,
        labelWidth: 15,
        border: false,
        borderWidth: 3,
        borderColor: "#FFFFFF",
        ...config.extra?.ring,
      },
      ...config.extra,
    },
    ...config,
  };

  return (
    <BaseChart
      canvasId={canvasId}
      width={width}
      height={height}
      type="ring"
      series={series}
      config={mergedConfig}
    />
  );
};

export default RingChart;
