import React, { useMemo } from 'react';
import { BaseChart, BaseChartProps } from './BaseChart';
import type { TouchEvent, ChartsConfig, LegendConfig, XAxisConfig, YAxisConfig } from '../lib/charts/index';

/**
 * K线图组件的 Props 接口
 */
export interface CandleChartProps extends Omit<BaseChartProps, 'type'> {
  /** 是否显示移动平均线 */
  ma?: boolean;
  /** MA5 移动平均线颜色 */
  ma5Color?: string;
  /** MA10 移动平均线颜色 */
  ma10Color?: string;
  /** MA30 移动平均线颜色 */
  ma30Color?: string;
  /** 是否启用滚动 */
  enableScroll?: boolean;
  /** X 轴配置 */
  xAxis?: XAxisConfig;
  /** Y 轴配置 */
  yAxis?: YAxisConfig;
  /** 图例是否显示 */
  legend?: boolean;
  /** 字体大小 */
  fontSize?: number;
  /** 背景颜色 */
  background?: string;
  /** 是否开启动画 */
  animation?: boolean;
  /** 额外K线图配置 */
  extra?: ChartsConfig['extra'];
  /** tooltip 格式化函数 */
  tooltipFormatter?: (item: any, category: string) => string;
}

/**
 * CandleChart K线图组件
 *
 * 用于显示股票/加密货币等金融数据的K线图，支持移动平均线
 */
export const CandleChart: React.FC<CandleChartProps> = (props) => {
  const {
    ma = true,
    ma5Color = '#fe6500',
    ma10Color = '#52a9ff',
    ma30Color = '#4adef7',
    enableScroll = true,
    xAxis,
    yAxis,
    legend = true,
    fontSize = 11,
    background = '#FFFFFF',
    animation = true,
    extra = {},
    tooltipFormatter,
    categories = [],
    series = [],
    config = {},
    ...baseProps
  } = props;

  const chartRef = React.useRef<any>(null);

  /**
   * 默认配置
   */
  const defaultConfig = useMemo(() => {
    const legendConfig: LegendConfig = legend ? { show: true } : { show: false };
    return {
      legend: legendConfig,
      fontSize,
      background,
      animation,
      xAxis: xAxis ?? { disableGrid: true },
      yAxis: yAxis ?? { gridType: 'dash', dashLength: 2 },
      extra: {
        candle: {
          color: {
            upLine: '#f54954',
            upFill: '#f54954',
            downLine: '#18b878',
            downFill: '#18b878'
          },
          ma: ma
            ? [
              { day: 5, color: ma5Color, name: 'MA5' },
              { day: 10, color: ma10Color, name: 'MA10' },
              { day: 30, color: ma30Color, name: 'MA30' }
            ]
            : false,
          bar: true,
          animation: animation
        },
        ...extra
      }
    };
  }, [legend, fontSize, background, animation, xAxis, yAxis, ma, ma5Color, ma10Color, ma30Color, extra]);

  /**
   * tooltip 事件处理
   */
  const handleTouchStart = (e: TouchEvent) => {
    if (chartRef.current) {
      chartRef.current.scrollStart(e);
      if (tooltipFormatter) {
        chartRef.current.showToolTip(e, {
          formatter: tooltipFormatter
        });
      } else {
        chartRef.current.showToolTip(e, {
          formatter: (item: any, category: string) => {
            return category + ' ' + item.name + ':' + item.data;
          }
        });
      }
    }
    baseProps.onTouchStart?.(e);
  };

  /**
   * 滚动事件处理
   */
  const handleTouchMove = (e: TouchEvent) => {
    if (chartRef.current && enableScroll) {
      chartRef.current.scroll(e);
    }
    baseProps.onTouchMove?.(e);
  };

  /**
   * 滚动结束事件处理
   */
  const handleTouchEnd = (e: TouchEvent) => {
    if (chartRef.current && enableScroll) {
      chartRef.current.scrollEnd(e);
    }
    baseProps.onTouchEnd?.(e);
  };

  return (
    <BaseChart
      {...baseProps}
      categories={categories}
      series={series}
      type="candle"
      config={{ ...defaultConfig, ...config }}
      onTouchStart={handleTouchStart}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleTouchEnd}
    />
  );
};

export default CandleChart;
