<script setup>
import { dashIfEmpty } from 'src/filters';
import { useI18n } from 'vue-i18n';
import { useClipboard } from 'src/composables/useClipboard';

const $props = defineProps({
    label: { type: String, default: null },
    value: {
        type: [String, Boolean, Number],
        default: null,
    },
    info: { type: String, default: null },
    dash: { type: Boolean, default: true },
    copy: { type: Boolean, default: false },
});

const { t } = useI18n();
const { copyText } = useClipboard();

function copyValueText() {
    copyText($props.value, {
        component: {
            copyValue: $props.value,
        },
    });
}
</script>
<style scoped>
.label,
.value {
    white-space: pre-line;
    word-wrap: break-word;
}
</style>
<template>
    <div class="vn-label-value">
        <div v-if="$props.label || $slots.label" class="label">
            <slot name="label">
                <span>{{ $props.label }}</span>
            </slot>
        </div>
        <div class="value">
            <slot name="value">
                <span :title="$props.value">
                    {{ $props.dash ? dashIfEmpty($props.value) : $props.value }}
                </span>
            </slot>
        </div>
        <div class="info" v-if="$props.info">
            <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
                <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
                    {{ $props.info }}
                </QTooltip>
            </QIcon>
        </div>
        <div class="copy" v-if="$props.copy && $props.value" @click="copyValueText()">
            <QIcon name="Content_Copy" color="primary">
                <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
            </QIcon>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.vn-label-value:hover .copy {
    visibility: visible;
    cursor: pointer;
}
.copy {
    visibility: hidden;
}
.info {
    margin-left: 5px;
}
</style>
