<script lang="ts" setup>
import { Tooltip } from 'ant-design-vue'
import { Icon } from '@iconify/vue'
import type { CSSProperties, RendererElement } from 'vue'
import { computed, useSlots } from 'vue'
import type { TooltipPlacement } from 'ant-design-vue/es/tooltip/Tooltip'
import { isString } from 'lodash-es'
import { getSlot } from '@/utils/slotsHelp'
import { useDesign } from '@/hooks/useDesign'

const props = withDefaults(
  defineProps<{
    maxWidth?: string
    showIndex?: boolean
    color?: string
    fontSize?: string
    placement?: TooltipPlacement
    text?: string | string[]
  }>(), {
    maxWidth: '600px',
    color: '#fff',
    fontSize: '14px',
    text: () => [],
  },
)

const slots = useSlots()

const slot = getSlot(slots)

const { prefixCls } = useDesign('basic-help')

const getOverlayStyle = computed<CSSProperties>(() => ({ maxWidth: props.maxWidth }))

const getTooltipStyle = computed<CSSProperties>(() => ({ color: props.color, fontSize: props.fontSize }))

const getTitle = computed(() => {
  const { text } = props
  if (isString(text)) return [{ title: text, index: 1 }]
  return text.map((item, index) => ({ title: item, index: index + 1 }))
})
</script>

<template>
  <Tooltip
    :overlay-class-name="`${prefixCls}__wrap`" :auto-adjust-overflow="true" :overlay-style="getOverlayStyle"
    :placement="placement"
  >
    <template #title>
      <div :style="getTooltipStyle">
        <p v-for="item in getTitle" :key="item.index">
          {{ item.title }}
        </p>
      </div>
    </template>
    <span :class="prefixCls" class="flex items-center">
      <component :is="slot as RendererElement" v-if="slots?.default" />
      <Icon v-if="!slots?.default" icon="ph:question" class="cursor-pointer text-base" />
    </span>
  </Tooltip>
</template>