<script setup>
import { computed, ref } from "vue";
const props = defineProps({
  label: { type: String, required: true, default: "" },
  value: { type: [String, null], required: false, default: "" },
  horizontal: { type: Boolean, required: false, default: false },
  size: { type: String, required: false, default: "large" },
  truncate: { type: Boolean, required: false, default: false },
  notFoundText: { type: String, required: false, default: "-" }
});
const valueText = ref(null);
const isTooltip = ref(false);
const calSize = computed(() => props.size === "medium" ? "text-subtitle-1" : "text-h6");
const calTruncate = computed(() => props.truncate ? "text-truncate" : "");
const setTruncate = (event) => {
  const target = event.target;
  isTooltip.value = target.offsetWidth < target.scrollWidth;
};
const valueData = computed(() => {
  return props.value ? props.value : props.notFoundText;
});
</script>

<template>
  <div
      v-if="props.horizontal"
      class="d-flex align-top"
      v-bind="$attrs"
      @resize="setTruncate"
  >
    <div class="text-medium-emphasis text-no-wrap">
      <slot name="label">{{ props.label }}:</slot>
    </div>
    <div :class="`ml-1 ${calTruncate}`" ref="valueText">
      <slot name="value" :value="valueData">
        <div v-if="!props.truncate">{{ valueData }}</div>
        <div
            v-else
            @mouseover="setTruncate"
            @mouseout="isTooltip = false"
        >
          <v-tooltip :model-value="isTooltip" location="bottom">
            <template #activator="{ props }">
              <div
                  class="text-truncate"
                  v-bind="isTooltip ? props : ''"
              >
                {{ valueData }}
              </div>
            </template>
            <span>{{ valueData }}</span>
          </v-tooltip>
        </div>
      </slot>
    </div>
  </div>

  <v-card v-else variant="text" v-bind="$attrs">
    <VCardSubtitle class="ma-0 pa-0 text-black">
      <slot name="label">{{ props.label }}</slot>
    </VCardSubtitle>
    <VCardText :class="`pa-0 mb-2 ${calSize}`">
      <div :class="calTruncate" ref="valueText">
        <slot name="value" :value="valueData">
          <div v-if="!props.truncate">{{ valueData }}</div>
          <div
              v-else
              @mouseover="setTruncate"
              @mouseout="isTooltip = false"
          >
            <v-tooltip :model-value="isTooltip" location="bottom">
              <template #activator="{ props }">
                <div
                    class="text-truncate"
                    v-bind="isTooltip ? props : ''"
                >
                  {{ valueData }}
                </div>
              </template>
              <span>{{ valueData }}</span>
            </v-tooltip>
          </div>
        </slot>
      </div>
    </VCardText>
  </v-card>
</template>

<style scoped>
/* Add any necessary styles here */
</style>
