import {recursionTree} from "./utils";

const mapComponents = {
  complete: 'a-auto-complete',
  cascader: 'a-cascader',
  checkbox: 'a-checkbox-group',
  radio: 'a-radio-group',
  datePicker: 'a-date-picker',
  monthPicker: 'a-month-picker',
  rangePicker: 'a-range-picker',
  weekPicker: 'a-week-picker',
  timePicker: 'a-time-picker',
  input: 'a-input',
  rate: 'a-rate',
  slider: 'a-slider',
  switch: 'a-switch',
  upload: 'a-upload',
  button: 'a-button',
  inputNumber: 'a-input-number',
  mentions: ['a-mentions', 'a-mentions-option'],
  select: ['a-select', 'a-select-option'],
  treeSelect: ['a-tree-select', 'a-tree-select-node'],
}

export default function createControlComponent (h, componentType, vueCreateElementProps = {}) {
  const component = mapComponents[componentType]
  // 没有子组件的情况下直接导出
  if (typeof component === "string") {
    return h(component, vueCreateElementProps)
  }
  // 子组件进行判断是否提供子内容
  const { props } = vueCreateElementProps
  if (!props.children || !Array.isArray(props.children)) {
    return null
  }
  const [ outer, inner ] = component

  return h(
    outer,
    vueCreateElementProps,
    recursionTree(props.children, (node) => {
      const {label, value, ...otherProps} = node
      return h(inner, {
        props: {
          value: value,
          title: label,
          ...otherProps
        }
      }, [h(label)])
    })
  )
}