import Calendar from './Calendar.vue'
import icon from '../assets/icon/icon_32calendar.svg'
import { flagOptions, stateOptions, stateList, DEFAULT_THEME_KEY } from '@/constants'
import type { IComponentModelConfig } from '../type'
import i18n from '@/locales'
import defaultStyle from './style.json'
import { getTodayDefaults } from './utils'

const todayDefaults = getTodayDefaults()

export default {
  label: i18n.global.t('calendar'),
  icon,
  component: Calendar,
  key: 'lv_calendar',
  group: i18n.global.t('time'),
  sort: 1,
  defaultStyle,
  parts: [
    {
      name: 'main',
      stateList
    },
    {
      name: 'header',
      stateList
    },
    {
      name: 'items',
      stateList
    }
  ],
  defaultSchema: {
    name: 'calendar',
    props: {
      x: 0,
      y: 0,
      width: 400,
      height: 320,
      flags: [
        'LV_OBJ_FLAG_CLICKABLE',
        'LV_OBJ_FLAG_CLICK_FOCUSABLE',
        '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_ON_FOCUS',
        'LV_OBJ_FLAG_SCROLL_WITH_ARROW',
        'LV_OBJ_FLAG_SNAPPABLE',
        'LV_OBJ_FLAG_PRESS_LOCK',
        'LV_OBJ_FLAG_GESTURE_BUBBLE'
      ],
      states: [],
      currentDate: todayDefaults.currentDate,
      displayDate: todayDefaults.displayDate,
      showLunar: false,
      titleMode: 'arrow-buttons'
    },
    styles: [
      {
        part: {
          name: 'main',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#ffffffff',
          image: {
            imgId: '',
            recolor: '#00000000',
            alpha: 255
          }
        },
        border: {
          color: '#e0e0e0ff',
          width: 2,
          radius: 10,
          side: ['all']
        },
        outline: {
          color: '#000000ff',
          width: 0,
          pad: 0
        },
        shadow: {
          color: '#000000ff',
          offsetX: 0,
          offsetY: 0,
          spread: 0,
          width: 0
        },
        transform: {
          width: 0,
          height: 0,
          translateX: 0,
          translateY: 0,
          originX: 0,
          originY: 0,
          rotate: 0,
          scale: 256
        }
      },
      {
        part: {
          name: 'items',
          state: 'default'
        },
        theme: DEFAULT_THEME_KEY,
        background: {
          color: '#ffffff33',
          image: {
            imgId: '',
            recolor: '#00000000',
            alpha: 255
          }
        },
        text: {
          color: '#212121ff',
          size: 16,
          family: 'montserratMedium',
          align: 'left',
          decoration: 'none'
        },
        spacer: {
          lineHeight: -8,
          letterSpacing: 0
        },
        border: {
          color: '#e0e0e0ff',
          width: 1,
          radius: 0,
          side: ['all']
        }
      }
    ]
  },
  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
          },
          {
            label: '',
            field: 'props.width',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 1,
              max: 10000
            },
            slots: { prefix: 'W' },
            canUseEventSet: true
          },
          {
            label: '',
            field: 'props.height',
            valueType: 'number',
            componentProps: {
              span: 12,
              min: 1,
              max: 10000
            },
            slots: { prefix: 'H' },
            canUseEventSet: true
          }
        ]
      },
      {
        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.currentDate',
        valueType: 'date',
        labelWidth: '80px',
        componentProps: {
          type: 'date',
          format: 'YYYY-MM-DD',
          valueFormat: 'YYYY-MM-DD'
        },
        canUseEventSet: true
      },
      {
        label: '显示日期',
        field: 'props.displayDate',
        valueType: 'date',
        labelWidth: '80px',
        componentProps: {
          type: 'month',
          format: 'YYYY-MM',
          valueFormat: 'YYYY-MM'
        },
        canUseEventSet: true
      },
      {
        label: '农历开关',
        field: 'props.showLunar',
        valueType: 'switch',
        labelWidth: '80px',
        canUseEventSet: true
      },
      {
        label: '标题模式',
        field: 'props.titleMode',
        valueType: 'select',
        labelWidth: '80px',
        componentProps: {
          options: [
            { label: 'None', value: 'none' },
            { label: 'Arrow buttons', value: 'arrow-buttons' },
            { label: 'Drop-down', value: 'drop-down' }
          ]
        }
      }
    ],
    styles: [
      {
        label: '模块/状态',
        field: 'part',
        valueType: 'part',
        componentProps: {
          filterPartOptions: (item, widgetData) => {
            if (item.name === 'header' && widgetData?.props?.titleMode === 'none') {
              return null
            }

            return {
              label: item.name,
              value: item.name
            }
          }
        }
      },
      {
        valueType: 'dependency',
        name: ['part', 'props.titleMode', 'props.showLunar'],
        dependency: ({ part, 'props.titleMode': titleMode, 'props.showLunar': showLunar }) => {
          if (part?.name === 'main') {
            return [
              {
                label: '背景',
                field: 'background',
                valueType: 'background'
              },
              {
                label: '边框',
                field: 'border',
                valueType: 'border'
              },
              {
                label: '轮廓',
                field: 'outline',
                valueType: 'outline'
              },
              {
                label: '阴影',
                field: 'shadow',
                valueType: 'shadow'
              },
              {
                label: '变换',
                field: 'transform',
                valueType: 'transform'
              }
            ]
          }

          if (part?.name === 'header') {
            if (titleMode === 'none') {
              return []
            }

            return [
              {
                label: '背景',
                field: 'background',
                valueType: 'background'
              },
              {
                label: '字体',
                field: 'text',
                valueType: 'font'
              },
              {
                label: '间距',
                field: 'spacer',
                valueType: 'spacer',
                componentProps: {
                  hideLetterSpacing: true
                }
              }
            ]
          }

          return [
            {
              label: '背景',
              field: 'background',
              valueType: 'background',
              componentProps: {
                onlyColor: true
              }
            },
            {
              label: '字体',
              field: 'text',
              valueType: 'font'
            },
            {
              label: '间距',
              field: 'spacer',
              valueType: 'spacer',
              componentProps: {
                hideLetterSpacing: !showLunar
              }
            },
            {
              label: '边框',
              field: 'border',
              valueType: 'border'
            }
          ]
        }
      }
    ]
  }
} as IComponentModelConfig
