import type { EChartsOption } from 'echarts';
import { CHART_COLORS } from '../constants/colors';

export class MobileChartConfig {
  static createMobileBaseOption(categoryData: string[]): EChartsOption {
    return {
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        formatter: (params) => {
          const paramArray = Array.isArray(params) ? params : [params];
          const param = paramArray[0];

          if (param.seriesName === 'Values') {
            const value = param.value as number[];
            return `${param.name}<br/>
              开: ${value[1]}<br/>
              收: ${value[2]}<br/>
              低: ${value[3]}<br/>
              高: ${value[4]}<br/>
              涨幅: ${value[5]}<br/>`;
          } else if (param.seriesName === 'Volumes') {
            const value = param.value as number[];
            return `${param.name}<br/>成交量: ${value[1]}`;
          }
          return '';
        }
      },
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 1],
          startValue: categoryData.length - 20, // 移动端默认显示更少天数
          endValue: categoryData.length - 1,
          minValueSpan: 5, // 移动端最小显示天数更少
          maxValueSpan: 60, // 移动端最大显示天数减少
          throttle: 100, // 移动端防抖延迟
          zoomLock: false // 允许缩放
        },
        {
          show: true,
          xAxisIndex: [0, 1],
          type: 'slider',
          top: '80%', // 移动端位置调整
          height: '15%', // 移动端滑块高度增加
          startValue: categoryData.length - 20,
          endValue: categoryData.length - 1,
          minValueSpan: 5,
          maxValueSpan: 60,
          handleSize: 20, // 移动端滑块手柄增大
          moveHandleSize: 20
        }
      ],
      grid: [
        {
          left: '5%', // 移动端边距减少
          right: '5%',
          top: '5%',
          height: '45%', // 移动端主图高度调整
          backgroundColor: 'rgba(0, 0, 0, 0.1)'
        },
        {
          left: '5%',
          right: '5%',
          top: '55%', // 移动端成交量图位置调整
          height: '20%', // 移动端成交量图高度增加
          backgroundColor: 'rgba(0, 0, 0, 0.1)'
        }
      ],
      xAxis: this.createMobileXAxisConfig(categoryData),
      yAxis: this.createMobileYAxisConfig(),
      axisPointer: {
        link: [{ xAxisIndex: 'all' }],
        label: {
          backgroundColor: '#777',
          fontSize: 12 // 移动端字体调整
        }
      },
      textStyle: {
        fontSize: 10 // 移动端基础字体大小
      },
      series: [] as any[]
    };
  }

  private static createMobileXAxisConfig(categoryData: string[]) {
    return [
      {
        type: 'category' as const,
        data: categoryData,
        boundaryGap: false,
        axisLine: { onZero: false },
        splitLine: { show: false },
        min: 'dataMin',
        max: 'dataMax',
        axisPointer: { z: 100 },
        axisLabel: {
          fontSize: 10, // 移动端X轴标签字体
          interval: 'auto', // 移动端自动间隔
          rotate: 45 // 移动端标签旋转避免重叠
        }
      },
      {
        type: 'category' as const,
        gridIndex: 1,
        data: categoryData,
        boundaryGap: false,
        axisLine: { onZero: false },
        axisTick: { show: false },
        splitLine: { show: false },
        axisLabel: { show: false },
        min: 'dataMin',
        max: 'dataMax'
      }
    ];
  }

  private static createMobileYAxisConfig() {
    return [
      {
        scale: true,
        splitArea: { show: true },
        splitLine: {
          show: true,
          lineStyle: {
            type: 'dashed',
            color: 'rgba(255, 255, 255, 0.6)',
            width: 1
          }
        },
        axisLabel: {
          fontSize: 10, // 移动端Y轴标签字体
          inside: false
        }
      },
      {
        scale: true,
        gridIndex: 1,
        splitNumber: 2,
        axisLabel: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
        splitLine: { show: false }
      }
    ];
  }

  // 移动端手势配置
  static getMobileGestureConfig() {
    return {
      gesture: {
        pinch: true, // 启用双指缩放
        scroll: true, // 启用滚动
        throttle: 100, // 手势防抖延迟
        delay: 300 // 双击延迟时间
      },
      // 触摸优化配置
      touch: {
        throttleDelay: 100, // 触摸事件防抖延迟
        preventDefault: true, // 阻止默认触摸行为
        stopPropagation: true, // 阻止事件冒泡
        minTouchDistance: 5, // 最小触摸移动距离
        maxTapDuration: 300 // 最大点击持续时间
      }
    };
  }

  // 移动端K线图样式配置
  static getMobileCandlestickStyle() {
    return {
      itemStyle: {
        color: CHART_COLORS.UP,
        color0: CHART_COLORS.DOWN,
        borderColor: CHART_COLORS.UP,
        borderColor0: CHART_COLORS.DOWN,
        borderWidth: 2 // 移动端边框加粗
      }
    };
  }

  // 移动端成交量样式配置
  static getMobileVolumeStyle() {
    return {
      itemStyle: {
        color: (params: any) => {
          return params.value[2] > 0 ? CHART_COLORS.UP : CHART_COLORS.DOWN;
        }
      },
      barWidth: '60%' // 移动端柱状图宽度调整
    };
  }
}