import { FrontComponent, GradientColor } from '../../const/const';
import { FormSchema } from '/@/components/Form';

export interface VisualOptionParams {
  [visualOptionField.FONT_COLOR]: string;
  [visualOptionField.UNIT]: string;
  [visualOptionField.ICON_COLOR]: string;
  [visualOptionField.ICON]: string;
  [visualOptionField.FIRST_PHASE_COLOR]: string;
  [visualOptionField.SECOND_PHASE_COLOR]: string;
  [visualOptionField.THIRD_PHASE_COLOR]: string;
  [visualOptionField.FIRST_PHASE_VALUE]: string;
  [visualOptionField.SECOND_PHASE_VALUE]: string;
  [visualOptionField.THIRD_PHASE_VALUE]: string;
}

export enum visualOptionField {
  FONT_COLOR = 'fontColor',
  UNIT = 'unit',
  ICON_COLOR = 'iconColor',
  ICON = 'icon',
  FIRST_PHASE_COLOR = 'firstPhaseColor',
  SECOND_PHASE_COLOR = 'secondPhaseColor',
  THIRD_PHASE_COLOR = 'thirdPhaseColor',
  FIRST_PHASE_VALUE = 'firstPhaseValue',
  SECOND_PHASE_VALUE = 'secondPhaseValue',
  THIRD_PHASE_VALUE = 'thirdPhaseValue',
}

export const modeOne: FormSchema[] = [
  {
    field: visualOptionField.FONT_COLOR,
    label: '数值字体颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: '#000',
    },
  },
];

export const modeTwo: FormSchema[] = [
  {
    field: visualOptionField.FONT_COLOR,
    label: '数值字体颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: '#000',
    },
  },
  {
    field: visualOptionField.UNIT,
    label: '数值单位',
    component: 'Input',
    componentProps: {
      placeholder: '请输入数值单位',
    },
  },
  {
    field: visualOptionField.ICON_COLOR,
    label: '图标颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: '#367BFF',
    },
  },
  {
    field: visualOptionField.ICON,
    label: '图标',
    component: 'IconDrawer',
    changeEvent: 'update:value',
    componentProps({ formModel }) {
      const color = formModel[visualOptionField.ICON_COLOR];
      return {
        color,
      };
    },
  },
];

export const modeThree: FormSchema[] = [
  {
    field: visualOptionField.FONT_COLOR,
    label: '数值字体颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: '#000',
    },
  },
  {
    field: visualOptionField.UNIT,
    label: '数值单位',
    component: 'Input',
    componentProps: {
      placeholder: '请输入数值单位',
    },
  },
  {
    field: visualOptionField.FIRST_PHASE_COLOR,
    label: '一阶段颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: GradientColor.FIRST,
    },
  },
  {
    field: visualOptionField.FIRST_PHASE_VALUE,
    label: '一阶段阀值',
    component: 'InputNumber',
    componentProps: {
      placeholder: '请输入一阶段阀值',
      min: 0,
    },
  },
  {
    field: visualOptionField.SECOND_PHASE_COLOR,
    label: '二阶段颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: GradientColor.SECOND,
    },
  },
  {
    field: visualOptionField.SECOND_PHASE_VALUE,
    label: '二阶段阀值',
    component: 'InputNumber',
    componentProps: ({ formModel }) => {
      return {
        placeholder: '请输入二阶段阀值',
        min: formModel[visualOptionField.FIRST_PHASE_VALUE],
      };
    },
  },
  {
    field: visualOptionField.THIRD_PHASE_COLOR,
    label: '三阶段颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: GradientColor.THIRD,
    },
  },
  {
    field: visualOptionField.THIRD_PHASE_VALUE,
    label: '三阶段阀值',
    component: 'InputNumber',
    componentProps: ({ formModel }) => {
      return {
        placeholder: '请输入三阶段阀值',
        min: formModel[visualOptionField.SECOND_PHASE_VALUE],
      };
    },
  },
];

export const modeFour: FormSchema[] = [
  {
    field: visualOptionField.FONT_COLOR,
    label: '数值字体颜色',
    component: 'ColorPicker',
    changeEvent: 'update:value',
    componentProps: {
      defaultValue: '#000',
    },
  },
  {
    field: visualOptionField.UNIT,
    label: '数值单位',
    component: 'Input',
    componentProps: {
      placeholder: '请输入数值单位',
    },
  },
];

export const schemasMap = new Map<FrontComponent, FormSchema[]>();

schemasMap.set(FrontComponent.TEXT_COMPONENT_1, modeOne);
schemasMap.set(FrontComponent.TEXT_COMPONENT_2, modeOne);
schemasMap.set(FrontComponent.TEXT_COMPONENT_3, modeOne);
schemasMap.set(FrontComponent.TEXT_COMPONENT_4, modeTwo);
schemasMap.set(FrontComponent.TEXT_COMPONENT_5, modeTwo);
schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_1, modeOne);
schemasMap.set(FrontComponent.INSTRUMENT_COMPONENT_2, modeThree);
schemasMap.set(FrontComponent.DIGITAL_DASHBOARD_COMPONENT, modeFour);