import { defineComponent, h, inject, PropType, VNode } from 'vue'

import type { Option } from './types'

const CMultiSelectNativeSelect = defineComponent({
  name: 'CMultiSelectGroupOption',
  props: {
    id: String,
    multiple: {
      type: Boolean,
      default: true,
    },
    name: String,
    options: {
      type: Array as PropType<Option[]>,
      default: () => [],
    },
    required: Boolean,
    value: [Number, String, Array],
  },
  emits: ['change'],
  setup(props, { emit }) {
    const nativeSelectRef = inject('nativeSelectRef') as any
    const createNativeOptions = (options: Option[]): VNode | VNode[] => {
      return options.map((option: Option) => {
        return option.options
          ? h('optgroup', { label: option.label }, createNativeOptions(option.options))
          : h('option', { disabled: option.disabled, value: option.value })
      })
    }

    const handleChange = (event: Event) => {
      const target = event.target as HTMLSelectElement
      emit('change', Number(target.value))
    }

    return () =>
      h(
        'select',
        {
          className: 'multi-select-new',
          id: props.id,
          ...(props.id && !props.name && { name: `${props.id}-multi-select` }), // TODO: remove in v6
          ...(props.name && { name: props.name }), // TODO: change to `name: props.name` in v6
          multiple: props.multiple,
          tabIndex: '-1',
          style: { display: 'none' },
          required: props.required,
          value: props.value,
          ref: nativeSelectRef,
          onChange: handleChange,
        },
        props.options && createNativeOptions(props.options),
      )
  },
})

export { CMultiSelectNativeSelect }