import { h } from 'vue'
import BaseMeter from './BaseMeter.vue'
import icon from '../assets/icon/icon_meter.svg'
import type { ComponentSchema, IComponentModelConfig } from '../type'
import i18n from '@/locales'
import { stateList, flagOptions, stateOptions, DEFAULT_THEME_KEY } from '@/constants'
import defaultStyle from './style.json'
import NeedlesConfig from './NeedlesConfig.vue'
import SectionsConfig from './SectionsConfig.vue'
import { createNeedle } from './types'

const getSquareSize = (formData: any) => {
  const width = Math.max(1, Math.min(10000, Math.round(Number(formData?.props?.width) || 1)))
  const height = Math.max(1, Math.min(10000, Math.round(Number(formData?.props?.height) || 1)))
  return Math.min(width, height)
}

const syncSquareSize = (_value: number, formData: any) => {
  const next = getSquareSize(formData)
  formData.props.width = next
  formData.props.height = next
}

const createSquareSizeField = (
  field: 'props.width' | 'props.height',
  prefix: 'W' | 'H'
): ComponentSchema => ({
  label: '',
  field,
  valueType: 'number',
  componentProps: {
    span: 12,
    min: 1,
    max: 10000,
    onValueChange: syncSquareSize
  },
  slots: { prefix },
  canUseEventSet: true
})

const createRangeField = (
  field: 'props.rangeStart' | 'props.rangeEnd',
  prefix: 'S' | 'E'
): ComponentSchema => ({
  field,
  valueType: 'number',
  componentProps: {
    span: 12,
    min: -100000,
    max: 100000,
    onValueChange: (_value: number, formData: any) => {
      if (formData.props.rangeStart >= formData.props.rangeEnd) {
        formData.props.rangeEnd = formData.props.rangeStart + 1
      }
    }
  },
  slots: { prefix }
})

export default {
  label: i18n.global.t('baseMeter'),
  icon,
  component: BaseMeter,
  key: 'base_meter',
  group: i18n.global.t('Meter'),
  sort: 2,
  hasChildren: false,
  defaultStyle,
  onChangeSize: (_props, size) => {
    const nextSize = Math.max(1, Math.min(size.currentWidth, size.currentHeight))
    return {
      width: nextSize,
      height: nextSize
    }
  },
  parts: [
    {
      name: 'main',
      stateList
    },
    {
      name: 'indicator',
      stateList
    },
    {
      name: 'items',
      stateList
    }
  ],
  defaultSchema: {
    name: 'base_meter',
    props: {
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      mode: 'round_inner',
      flags: [
        'LV_OBJ_FLAG_CLICKABLE',
        'LV_OBJ_FLAG_CLICK_FOCUSABLE',
        'LV_OBJ_FLAG_SCROLLABLE',
        'LV_OBJ_FLAG_SCROLL_ELASTIC',
        'LV_OBJ_FLAG_SCROLL_MOMENTUM',
        'LV_OBJ_FLAG_SCROLL_CHAIN_HOR',
        'LV_OBJ_FLAG_SCROLL_CHAIN_VER',
        'LV_OBJ_FLAG_SCROLL_CHAIN',
        'LV_OBJ_FLAG_SCROLL_WITH_ARROW',
        'LV_OBJ_FLAG_SNAPPABLE',
        'LV_OBJ_FLAG_PRESS_LOCK',
        'LV_OBJ_FLAG_GESTURE_BUBBLE'
      ],
      states: [],
      tick: 41,
      mainTick: 8,
      rangeStart: 0,
      rangeEnd: 100,
      angleRange: 300,
      rotationAngle: 90,
      enableText: false,
      labels: '',
      needles: [createNeedle('needles_1', 20)],
      sections: []
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#FFFFFFFF',
          image: {
            imgId: '',
            recolor: '#00000000',
            alpha: 255
          }
        },
        text: {
          color: '#212121FF',
          family: 'montserratMedium',
          size: 14,
          align: 'left',
          decoration: 'none'
        },
        spacer: {
          letterSpacing: 0
        },
        border: {
          color: '#000000FF',
          width: 0,
          radius: 0,
          side: ['all']
        },
        curve: {
          color: '#212121FF',
          width: 2,
          radius: true,
          alpha: 255,
          image: ''
        },
        shadow: {
          color: '#000000FF',
          offsetX: 0,
          offsetY: 0,
          spread: 0,
          width: 0
        }
      }
    ]
  },
  config: {
    props: [
      {
        label: '名称',
        field: 'name',
        valueType: 'text'
      },
      {
        label: '位置/大小',
        valueType: 'group',
        children: [
          {
            label: '',
            field: 'props.x',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -10000,
              max: 10000
            },
            slots: { prefix: 'X' },
            canUseEventSet: true
          },
          {
            label: '',
            field: 'props.y',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: -10000,
              max: 10000
            },
            slots: { prefix: 'Y' },
            canUseEventSet: true
          },
          createSquareSizeField('props.width', 'W'),
          createSquareSizeField('props.height', 'H')
        ]
      },
      {
        label: '标识',
        field: 'props.flags',
        valueType: 'checkbox',
        componentProps: {
          options: flagOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      },
      {
        label: '状态',
        field: 'props.states',
        valueType: 'checkbox',
        componentProps: {
          options: stateOptions,
          defaultCollapsed: true
        },
        canUseEventSet: true
      }
    ],
    coreProps: [
      {
        label: '模式',
        field: 'props.mode',
        valueType: 'select',
        labelWidth: '100px',
        componentProps: {
          options: [
            { label: 'Round Inner', value: 'round_inner' },
            { label: 'Round Outer', value: 'round_outer' }
          ]
        },
        canUseEventSet: true
      },
      {
        label: '刻度数',
        field: 'props.tick',
        valueType: 'number',
        labelWidth: '100px',
        componentProps: {
          min: 2,
          max: 1000
        },
        canUseEventSet: true
      },
      {
        label: '主刻度',
        field: 'props.mainTick',
        valueType: 'number',
        labelWidth: '100px',
        componentProps: {
          min: 2,
          max: 1000
        },
        canUseEventSet: true
      },
      {
        label: '范围',
        valueType: 'group',
        children: [
          createRangeField('props.rangeStart', 'S'),
          createRangeField('props.rangeEnd', 'E')
        ],
        canUseEventSet: true
      },
      {
        label: '角度范围',
        field: 'props.angleRange',
        valueType: 'number',
        labelWidth: '100px',
        componentProps: {
          min: 0,
          max: 360
        },
        canUseEventSet: true
      },
      {
        label: '旋转角度',
        field: 'props.rotationAngle',
        valueType: 'number',
        labelWidth: '100px',
        componentProps: {
          min: 0,
          max: 360
        },
        canUseEventSet: true
      },
      {
        label: '启用文本',
        field: 'props.enableText',
        valueType: 'switch',
        labelWidth: '100px',
        canUseEventSet: true
      },
      {
        label: '标签',
        field: 'props.labels',
        valueType: 'textarea',
        labelWidth: '100px',
        componentProps: {
          placeholder: '标签内容用英文逗号分隔'
        },
        canUseEventSet: true
      },
      {
        label: '指针',
        field: 'props.needles',
        valueType: '',
        render: (value) => h(NeedlesConfig, { values: value })
      },
      {
        label: '区域',
        field: 'props.sections',
        valueType: '',
        render: (value) => h(SectionsConfig, { values: value })
      }
    ],
    styles: [
      {
        label: '模块/状态',
        field: 'part',
        valueType: 'part'
      },
      {
        valueType: 'dependency',
        name: ['part'],
        dependency: ({ part }) => {
          return part?.name === 'main'
            ? [
                {
                  label: '背景',
                  field: 'background',
                  valueType: 'background'
                },
                {
                  label: '字体',
                  field: 'text',
                  valueType: 'font'
                },
                {
                  label: '间距',
                  field: 'spacer',
                  valueType: 'spacer',
                  componentProps: {
                    hideLineHeight: true
                  }
                },
                {
                  label: '边框',
                  field: 'border',
                  valueType: 'border'
                },
                {
                  label: '曲线',
                  field: 'curve',
                  valueType: 'line',
                  componentProps: {
                    hasImage: true,
                    useWidgetHalfMinAsWidthMax: true
                  }
                },
                {
                  label: '阴影',
                  field: 'shadow',
                  valueType: 'shadow'
                }
              ]
            : [
                {
                  label: '直线',
                  field: 'line',
                  valueType: 'line',
                  componentProps: {
                    useWidgetHalfMinAsWidthMax: true
                  }
                },
                {
                  label: '其它',
                  field: 'other',
                  valueType: 'other',
                  componentProps: {
                    keys: ['length'],
                    componentProps: {
                      length: {
                        min: 0,
                        max: 10000
                      }
                    }
                  }
                }
              ]
        }
      }
    ]
  }
} as IComponentModelConfig
