import { defineComponent } from 'vue'
import { getPrefixCls } from '../_utils/getPrefixCls'

export default defineComponent({
  name: 'Group',
  props: {
    prepend: { type: String, default: '' },
    append: { type: String, default: '' },
    size: { type: String as () => 'small' | 'medium' | 'large', default: 'medium' },
  },
  setup(props, { slots }) {
    const prefixCls = getPrefixCls('group')

    const renderNode = (slotName: 'prepend' | 'append', propValue: string) => {
      // slot 优先
      if (slots[slotName])
        return slots[slotName]!()
      if (propValue)
        return <div class={`${prefixCls}-${slotName}`}>{propValue}</div>
      return null
    }

    return () => (
      <div class={[`${prefixCls}-wrapper`, `${prefixCls}-size-${props.size}`]}>
        {renderNode('prepend', props.prepend)}
        {slots.default?.()}
        {renderNode('append', props.append)}
      </div>
    )
  },
})