import { genericComponent, propsFactory } from '@/utils'
import { makeComponentProps } from '@/composables/component'
import { makeTagProps } from '@/composables/tag'
import { h, ref, watch } from 'vue'
import { UTelegramIcon } from '@/components/UIntegrationIcon/integration-icons/UTelegramIcon'
import { UWhatsappIcon } from '@/components/UIntegrationIcon/integration-icons/UWhatsapp'
import { UViberIcon } from '@/components/UIntegrationIcon/integration-icons/UViberIcon'

// Create a map of icons
const iconComponents = {
  telegram: UTelegramIcon,
  whatsapp: UWhatsappIcon,
  viber: UViberIcon,
} as { [key: string]: any }

export const makeUIntegrationIconProps = propsFactory(
  {
    icon: {
      type: String,
      default: 'telegram',
      required: true,
    },
    size: {
      type: String,
      default: 'sm',
      required: false,
    },
    ...makeComponentProps(),
    ...makeTagProps(),
  },
  'UIntegrationIcon'
)

export const UIntegrationIcon = genericComponent()({
  name: 'UIntegrationIcon',

  props: makeUIntegrationIconProps(),

  setup(props) {
    const iconComponent = ref(iconComponents[props.icon] || UTelegramIcon)

    const getIconComponent = (icon: string) => {
      return iconComponents[icon] || UTelegramIcon
    }

    watch(
      () => props.icon,
      (newValue) => {
        iconComponent.value = getIconComponent(newValue)
      }
    )

    return () => (
      <div class={['flex items-center']}>
        {h(iconComponent.value, { size: props.size })}
      </div>
    )
  },
})

export type UIntegrationIconInstance = InstanceType<typeof UIntegrationIcon>