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'
import AvatarVariant from '@/types/avatarVariants'
import { UAvatarSupportingText } from './UAvatarSupportingText'
import { UAvatarText } from './UAvatarText'
import { UAvatar } from './UAvatar'

export const makeUAvatarGroupProps = propsFactory(
  {
    size: {
      type: String,
      default: Sizes.sm,
      required: false,
    },
    variant: {
      type: String,
      default: AvatarVariant.default,
      required: false,
    },
    imagePath: {
      type: String,
      required: false,
    },
    avatarIcon: {
      type: String,
      default: 'imageUser',
      required: false,
    },
    avatarNote: String,
    profileName: String,
    profileText: String,

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

export type UAvatarGroupProps = ExtractPropTypes<typeof makeUAvatarGroupProps>

export type UAvatarGroupSlots = {
  default: never
}

export const UAvatarGroup = genericComponent<UAvatarGroupSlots>()({
  name: 'UAvatarGroup',

  props: makeUAvatarGroupProps(),

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

  setup(props, { emit, slots }) {
    const avatarIcon = computed(() => {
      return props.avatarIcon ? props.avatarIcon : ''
    })

    const imageSpacing = computed(() => {
      const spacingMapping: Record<string, string> = {
        sm: 'gap-[10px]',
        xl: 'gap-[16px]',
      }

      return spacingMapping[props.size] || 'gap-[12px]'
    })

    const classes = computed(() => ({
      'box-border flex items-center justify-center w-fit': true,
      [imageSpacing.value]: true,
    }))

    return () => (
      <div class={classes.value} onClick={(e) => emit('click', e)}>
        <UAvatar
          avatar-icon={avatarIcon.value}
          size={props.size}
          image-path={props.imagePath}
        >
          {props.avatarNote}
        </UAvatar>
        <div>
          <UAvatarText size={props.size} color="gray-700">
            {props.profileName}
          </UAvatarText>
          <UAvatarSupportingText size={props.size} color="gray-600">
            {props.profileText}
          </UAvatarSupportingText>
        </div>
      </div>
    )
  },
})