import AnalogClock from './AnalogClock.vue'
import icon from '../assets/icon/icon_34time1.svg'
import type { ComponentSchema, IComponentModelConfig } from '../type'
import i18n from '@/locales'
import { flagOptions, stateList, stateOptions, DEFAULT_THEME_KEY } from '@/constants'
import defaultStyle from './style.json'

const pointerTypeOptions = [
  { label: '图片指针', value: 'image' },
  { label: '线指针', value: 'line' }
]

const syncSquareSize = (value: number, formData: any) => {
  const next = Math.max(1, Math.min(10000, Math.round(Number(value) || 1)))
  formData.props.width = next
  formData.props.height = next
}

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

const createImageStyle = () => ({
  image: '',
  alpha: 255,
  recolor: '#00000000',
  size: {
    width: 60,
    height: 4
  },
  center: {
    x: 0,
    y: 2
  }
})

const createLineStyle = (width: number, height: number) => ({
  color: '#212121FF',
  size: {
    width,
    height
  }
})

const createHandConfig = (
  field: 'props.hourHand' | 'props.minuteHand' | 'props.secondHand',
  max: number
): ComponentSchema[] => {
  return [
    {
      label: '指针样式',
      labelWidth: '100px',
      field: `${field}.type`,
      valueType: 'select',
      componentProps: {
        options: pointerTypeOptions
      }
    },
    {
      label: '时间',
      labelWidth: '100px',
      field: `${field}.time`,
      valueType: 'number',
      componentProps: {
        min: 0,
        max
      }
    },
    {
      valueType: 'dependency',
      name: [`${field}.type`],
      dependency: (dependency) => {
        return dependency?.[`${field}.type`] === 'image'
          ? [
              {
                label: '图片',
                labelWidth: '100px',
                field: `${field}.image.image`,
                valueType: 'image'
              },
              {
                label: '图片透明度',
                labelWidth: '100px',
                field: `${field}.image.alpha`,
                valueType: 'slider',
                componentProps: {
                  min: 0,
                  max: 255
                }
              },
              {
                label: '图片遮罩',
                labelWidth: '100px',
                field: `${field}.image.recolor`,
                valueType: 'color'
              },
              {
                label: '大小',
                valueType: 'group',
                children: [
                  {
                    label: '',
                    field: `${field}.image.size.width`,
                    valueType: 'number',
                    componentProps: {
                      span: 12,
                      min: 1,
                      max: 1000
                    },
                    slots: { prefix: 'W' }
                  },
                  {
                    label: '',
                    field: `${field}.image.size.height`,
                    valueType: 'number',
                    componentProps: {
                      span: 12,
                      min: 1,
                      max: 1000
                    },
                    slots: { prefix: 'H' }
                  }
                ]
              },
              {
                label: '中心',
                valueType: 'group',
                children: [
                  {
                    label: '',
                    field: `${field}.image.center.x`,
                    valueType: 'number',
                    componentProps: {
                      span: 12,
                      min: -1000,
                      max: 1000
                    },
                    slots: { prefix: 'X' }
                  },
                  {
                    label: '',
                    field: `${field}.image.center.y`,
                    valueType: 'number',
                    componentProps: {
                      span: 12,
                      min: -1000,
                      max: 1000
                    },
                    slots: { prefix: 'Y' }
                  }
                ]
              }
            ]
          : [
              {
                label: '指针颜色',
                labelWidth: '100px',
                field: `${field}.line.color`,
                valueType: 'color'
              },
              {
                label: '大小',
                valueType: 'group',
                children: [
                  {
                    label: '',
                    field: `${field}.line.size.width`,
                    valueType: 'number',
                    componentProps: {
                      span: 12,
                      min: 0,
                      max: 10000
                    },
                    slots: { prefix: 'W' }
                  },
                  {
                    label: '',
                    field: `${field}.line.size.height`,
                    valueType: 'number',
                    componentProps: {
                      span: 12,
                      min: 0,
                      max: 10000
                    },
                    slots: { prefix: 'H' }
                  }
                ]
              }
            ]
      }
    }
  ]
}

export default {
  label: i18n.global.t('analogClock'),
  icon,
  component: AnalogClock,
  key: 'analog_clock',
  group: i18n.global.t('time'),
  sort: 1,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList
    },
    {
      name: 'indicator',
      stateList
    },
    {
      name: 'items',
      stateList
    }
  ],
  onChangeSize: (_props, size) => {
    const nextSize = Math.max(size.currentWidth, size.currentHeight)
    return {
      width: nextSize,
      height: nextSize
    }
  },
  defaultSchema: {
    name: 'analog_clock',
    props: {
      x: 0,
      y: 0,
      width: 200,
      height: 200,
      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: [],
      enableText: true,
      totalTicks: 61,
      majorTickInterval: 5,
      hourHand: {
        time: 2,
        type: 'line',
        image: createImageStyle(),
        line: createLineStyle(4, 30)
      },
      minuteHand: {
        time: 5,
        type: 'line',
        image: createImageStyle(),
        line: createLineStyle(3, 40)
      },
      secondHand: {
        time: 40,
        type: 'line',
        image: createImageStyle(),
        line: createLineStyle(2, 60)
      }
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#FFFFFFFF',
          image: {
            imgId: '',
            recolor: '#00000000',
            alpha: 255
          }
        },
        shadow: {
          color: '#000000FF',
          offsetX: 0,
          offsetY: 0,
          spread: 0,
          width: 0
        }
      },
      {
        part: {
          name: 'indicator',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        text: {
          color: '#212121FF',
          family: 'montserratMedium',
          size: 14,
          align: 'left',
          decoration: 'none'
        },
        spacer: {
          letterSpacing: 0
        },
        line: {
          color: '#212121FF',
          width: 2,
          radius: false
        },
        other: {
          length: 10
        }
      },
      {
        part: {
          name: 'items',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        line: {
          color: '#212121FF',
          width: 2,
          radius: false
        },
        other: {
          length: 6
        }
      }
    ]
  },
  config: {
    props: [
      {
        label: '名称',
        field: 'name',
        valueType: 'text',
        componentProps: {
          placeholder: '请输入名称',
          type: '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: '启用文本',
        labelWidth: '100px',
        field: 'props.enableText',
        valueType: 'switch',
        canUseEventSet: true
      },
      {
        label: '总刻度数',
        labelWidth: '100px',
        field: 'props.totalTicks',
        valueType: 'number',
        componentProps: {
          min: 0,
          max: 61
        },
        canUseEventSet: true
      },
      {
        label: '主刻度间隔',
        labelWidth: '100px',
        field: 'props.majorTickInterval',
        valueType: 'number',
        componentProps: {
          min: 0,
          max: 5
        },
        canUseEventSet: true
      },
      {
        label: '时针',
        valueType: 'group',
        children: createHandConfig('props.hourHand', 12)
      },
      {
        label: '分针',
        valueType: 'group',
        children: createHandConfig('props.minuteHand', 59)
      },
      {
        label: '秒针',
        valueType: 'group',
        children: createHandConfig('props.secondHand', 59)
      }
    ],
    styles: [
      {
        label: '模块状态',
        field: 'part',
        valueType: 'part'
      },
      {
        valueType: 'dependency',
        name: ['part'],
        dependency: ({ part }) => {
          return part?.name === 'main'
            ? [
                {
                  label: '背景',
                  field: 'background',
                  valueType: 'background'
                },
                {
                  label: '阴影',
                  field: 'shadow',
                  valueType: 'shadow'
                }
              ]
            : part?.name === 'indicator'
              ? [
                  {
                    label: '字体',
                    field: 'text',
                    valueType: 'font'
                  },
                  {
                    label: '间距',
                    field: 'spacer',
                    valueType: 'spacer',
                    componentProps: {
                      hideLineHeight: true
                    }
                  },
                  {
                    label: '直线',
                    field: 'line',
                    valueType: 'line',
                    componentProps: {
                      useWidgetHalfMinAsWidthMax: true
                    }
                  },
                  {
                    label: '其它',
                    field: 'other',
                    valueType: 'other',
                    componentProps: {
                      keys: ['length'],
                      componentProps: {
                        length: {
                          min: 0,
                          max: 10000
                        }
                      }
                    }
                  }
                ]
              : [
                  {
                    label: '直线',
                    field: 'line',
                    valueType: 'line',
                    componentProps: {
                      useWidgetHalfMinAsWidthMax: true
                    }
                  },
                  {
                    label: '其它',
                    field: 'other',
                    valueType: 'other',
                    componentProps: {
                      keys: ['length'],
                      componentProps: {
                        length: {
                          min: 0,
                          max: 10000
                        }
                      }
                    }
                  }
                ]
        }
      }
    ]
  }
} as IComponentModelConfig
