import { ElCheckbox, ElCheckboxButton, ElCheckboxGroup } from 'element-plus'
import { useFormInput, useOptions } from '@cip/components/hooks/form-input'
import { formInputProps, fromInputEmits } from '../../form-input-props'
import { computed, getCurrentInstance, h } from 'vue'

export default {
  props: formInputProps,
  emits: [...fromInputEmits],
  setup (props, context) {
    const instance = getCurrentInstance()
    const { width, updateStream, ...formInput } = useFormInput(props, context)
    const { optionProps, options, getOptions, proxyOptionsValue } = useOptions(props, true, updateStream)
    instance.ctx.getOptions = getOptions // 此处代码的意义

    const isButton = computed(() => {
      return props.config?.isButton ?? false
    })
    const display = computed(() => {
      return props.config?.display ?? 'inline-flex'
    })

    const getCheckboxComponent = (isButton) => {
      return isButton ? ElCheckboxButton : ElCheckbox
    }
    const checkboxItem = (option) => {
      return h(getCheckboxComponent(isButton.value), {
        label: option[optionProps.value.value] ?? option,
        style: { display: display.value }
      }, {
        default: () => `${option[optionProps.value.label] ?? option}`
      })
    }
    const checkboxItems = () => options.value.map(checkboxItem)
    // [BUG EL2.2.17] ElCheckboxGroup 存在bug
    // modelValue 默认值为空数组 内部watch props.modelValue后进行数据校验，导致初始化时及触发数据验证
    // [TEMP FIX] 临时解决方案 当为空数组时 赋值为 undefined
    return () => h(ElCheckboxGroup, {
      ...context.attrs,
      ...formInput,
      style: { width: width.value },
      disabled: props.disabled,
      modelValue: proxyOptionsValue.value.length === 0 ? undefined : proxyOptionsValue.value,
      'onUpdate:modelValue': (value) => {
        proxyOptionsValue.value = value
      }
    },
    { default: () => checkboxItems() })
  }
}