<script setup lang="ts">
import { Icon } from '@iconify/vue/dist/iconify.js';

defineEmits<{ (e: 'labelClick', value: string, index: number | null): void }>();

withDefaults(
  defineProps<{
    label: string;
    value?: string | string[];
    icon?: string;
    iconSize?: string;
    tooltip?: boolean;
    clickable?: boolean;
  }>(),
  {
    label: '-',
    value: '-',
  },
);
</script>

<template>
  <article class="row items-center">
    <Icon
      v-if="icon"
      :icon
      class="app-text-muted q-pr-sm"
      :width="iconSize || '2rem'"
    />
    <span :id="`dd-wrapper-${label}`" class="row col">
      <span
        :id="`dd-label-${label}`"
        class="col-12 app-text-muted-2"
        style="font-size: 10px"
      >
        {{ label }}
      </span>
      <span :id="`dd-value-wrapper-${label}`" class="col-12 ellipsis">
        <slot name="value">
          <span
            :class="{ 'link cursor-pointer': clickable }"
            v-if="typeof value === 'string'"
            @click="clickable ? $emit('labelClick', value, null) : undefined"
            :id="`link-${value}`"
            :for="`link-${value}`"
          >
            {{ value }}
            <q-tooltip v-if="tooltip" :delay="500">{{ value }}</q-tooltip>
          </span>
          <span
            :id="`dd-value-${label}`"
            v-else
            :class="{ 'link cursor-pointer': clickable }"
          >
            <span
              v-for="(item, index) in value"
              :key="index"
              @click="$emit('labelClick', item, index)"
              class="link cursor-pointer"
              :id="`link-${item}`"
              :for="`link-${item}`"
            >
              {{ item }}
              <span v-if="index < value.length - 1">,&nbsp;</span>

              <q-tooltip v-if="tooltip" :delay="500">{{ item }}</q-tooltip>
            </span>
          </span>
        </slot>
      </span>
    </span>
  </article>
</template>

<style scoped>
.link {
  color: hsl(var(--info-bg));
  text-decoration: underline;
}
</style>
