<template>
  <div ref="wrapper" class="table-short-text" v-bind="attrs">
    <UTooltip v-if="isMobile" :text="text" :open="open">
      {{ truncate(text, maxLength) }}
      <Icon
        v-if="!hideIcon"
        name="heroicons:information-circle"
        @click="open = !open"
      />
    </UTooltip>

    <UTooltip v-else :text="text">
      <span>{{ truncate(text, maxLength) }}</span>
    </UTooltip>
  </div>
</template>

<script setup lang="ts">
import { onClickOutside, useMediaQuery } from '@vueuse/core'

defineProps<{ text: string, maxLength: number, hideIcon: boolean }>()
const attrs = useAttrs()

const wrapper = ref<HTMLElement | null>(null)
const open = ref(false)

const isMobile = useMediaQuery('(max-width: 1280px)')

onClickOutside(wrapper, () => {
  open.value = false
})

function truncate(text: string, max = 15) {
  return text?.length > max ? `${text?.slice(0, max)}…` : text
}
</script>
