import { EChartsOption } from 'echarts';
import { visualOptionField } from '../../detail/config/visualOptions';

export type InstrumentComponentType = 'instrument-component-1' | 'instrument-component-2';

export type GradientKey =
  | visualOptionField.FIRST_PHASE_COLOR
  | visualOptionField.FIRST_PHASE_VALUE
  | visualOptionField.SECOND_PHASE_COLOR
  | visualOptionField.SECOND_PHASE_VALUE
  | visualOptionField.THIRD_PHASE_COLOR
  | visualOptionField.THIRD_PHASE_VALUE;
export interface GradientInfoRecord {
  key: GradientKey;
  value: number | string;
}

export interface DashBoardValue {
  unit?: string;
  name?: string;
  updateTime?: string;
  value?: number;
  valueColor?: string;
  gradientInfo?: GradientInfoRecord[];
}

export const instrumentComponent1 = (params?: { value: number; unit: string }): EChartsOption => {
  const { value = 10, unit = '°C' } = params || {};
  return {
    series: [
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        splitNumber: 12,
        itemStyle: {
          color: '#FFAB91',
        },
        progress: {
          show: true,
          width: 30,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          lineStyle: {
            width: 30,
          },
        },
        axisTick: {
          distance: -45,
          splitNumber: 5,
          lineStyle: {
            width: 2,
            color: '#999',
          },
        },
        splitLine: {
          distance: -52,
          length: 14,
          lineStyle: {
            width: 3,
            color: '#999',
          },
        },
        axisLabel: {
          distance: -20,
          color: '#999',
          fontSize: 20,
        },
        anchor: {
          show: false,
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          width: '60%',
          lineHeight: 40,
          borderRadius: 8,
          offsetCenter: [0, '-15%'],
          fontSize: 16,
          fontWeight: 'bolder',
          formatter: `{value} ${unit}`,
          color: 'auto',
        },
        data: [
          {
            value: value,
          },
        ],
      },
      {
        type: 'gauge',
        center: ['50%', '60%'],
        startAngle: 200,
        endAngle: -20,
        min: 0,
        max: 60,
        itemStyle: {
          color: '#FD7347',
        },
        progress: {
          show: true,
          width: 8,
        },
        pointer: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
        data: [
          {
            value: value,
          },
        ],
      },
    ],
  };
};

export const instrumentComponent2 = (params?: {
  gradient: GradientInfoRecord[];
  value: number;
  unit: string;
}): EChartsOption => {
  const { gradient = [], value = 0, unit = 'km/h' } = params || {};
  return {
    series: [
      {
        type: 'gauge',
        axisLine: {
          lineStyle: {
            width: 30,
            color: [
              [
                0.3,
                (getGradientValue(visualOptionField.FIRST_PHASE_COLOR, gradient) as string) ||
                  '#67e0e3',
              ],
              [
                0.7,
                (getGradientValue(visualOptionField.SECOND_PHASE_COLOR, gradient) as string) ||
                  '#37a2da',
              ],
              [
                1,
                (getGradientValue(visualOptionField.THIRD_PHASE_COLOR, gradient) as string) ||
                  '#fd666d',
              ],
            ],
          },
        },
        pointer: {
          itemStyle: {
            color: 'auto',
          },
        },
        axisTick: {
          distance: -30,
          length: 8,
          lineStyle: {
            color: '#fff',
            width: 2,
          },
        },
        splitLine: {
          distance: -30,
          length: 30,
          lineStyle: {
            color: '#fff',
            width: 4,
          },
        },
        axisLabel: {
          color: 'auto',
          distance: 40,
          fontSize: 14,
        },
        detail: {
          valueAnimation: true,
          formatter: `{value} ${unit}`,
          color: 'auto',
          fontSize: '16',
        },
        data: [
          {
            value: value,
          },
        ],
      },
    ],
  };
};

export const getGradientValue = (key: GradientKey, record: GradientInfoRecord[]) => {
  return record.find((item) => item.key === key)?.value;
};