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 makeUAvatarSupportingTextProps = propsFactory(
  {
    size: {
      type: String,
      default: Sizes.sm,
      required: false,
    },
    color: {
      type: String,
      default: 'gray-700',
      required: false,
    },

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

export type UAvatarSupportingTextProps = ExtractPropTypes<
  typeof makeUAvatarSupportingTextProps
>

export type UAvatarSupportingTextSlots = {
  default: never
}

export const UAvatarSupportingText =
  genericComponent<UAvatarSupportingTextSlots>()({
    name: 'UAvatarSupportingText',

    props: makeUAvatarSupportingTextProps(),

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

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

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

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

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