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

/**
 * 数据点形状
 */
export type DataPointShape = 'circle' | 'rect' | 'triangle' | 'diamond';

/**
 * LineChart 组件的 Props 接口
 * 使用原始 u-charts.js + Canvas 2D API
 */
export interface LineChartProps {
  /** Canvas 元素的 ID，必须唯一 */
  canvasId: string;
  /** 图表宽度（像素） */
  width?: number;
  /** 图表高度（像素） */
  height?: number;
  /** X 轴分类数据 */
  categories: string[];
  /** 系列数据 */
  series: ChartsConfig['series'];
  /** 额外的图表配置 */
  config?: Partial<ChartsConfig>;
}

/**
 * LineChart 折线图组件
 *
 * 使用原始 u-charts.js + Canvas 2D API
 * 用于显示趋势数据的折线图
 */
export const LineChart: React.FC<LineChartProps> = (props) => {
  const {
    canvasId,
    width,
    height,
    categories,
    series,
    config = {},
  } = props;

  /**
   * 合并默认配置
   */
  const mergedConfig: Partial<ChartsConfig> = {
    animation: true,
    background: '#FFFFFF',
    color: ['#3b82f6', '#10b981', '#f59e0b', '#8b5cf6', '#ef4444'],
    padding: [15, 15, 0, 5],
    enableScroll: false,
    legend: {},
    xAxis: {
      disableGrid: false,
      ...config.xAxis,
    },
    yAxis: {
      data: [{ min: 0 }],
      ...config.yAxis,
    },
    extra: {
      line: {
        type: 'curve',
        width: 2,
        activeType: 'hollow',
        ...config.extra?.line,
      },
      ...config.extra,
    },
    ...config,
  };

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

export default LineChart;
