import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { genericComponent, propsFactory } from '@/utils'
import { ExtractPropTypes, computed } from 'vue'
import Sizes from '@/types/sizes'

export const makeUAvatarTextProps = propsFactory(
  {
    size: {
      type: String,
      default: Sizes.sm,
      required: false,
    },
    color: {
      type: String,
      default: 'gray-700',
      required: false,
    },

    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'UAvatarText'
)

export type UAvatarTextProps = ExtractPropTypes<typeof makeUAvatarTextProps>

export type UAvatarTextSlots = {
  default: never
}

export const UAvatarText = genericComponent<UAvatarTextSlots>()({
  name: 'UAvatarText',

  props: makeUAvatarTextProps(),

  emits: {
    click: (e: MouseEvent) => true,
  },

  setup(props, { emit, slots }) {
    const textSize = computed(() => {
      if (props.size == 'lg') return 'text-text-md'
      if (props.size == 'xl') return 'text-text-lg'
      return 'text-text-sm'
    })

    const defaultClassesAvatarText = computed(
      () => `${textSize.value} text-${props.color}`
    )

    const classes = computed(() => ({
      'font-semibold': true,
      [defaultClassesAvatarText.value]: true,
    }))

    return () => (
      <div class={classes.value} onClick={(e) => emit('click', e)}>
        {slots.default?.()}
      </div>
    )
  },
})