<script setup>
import { computed } from 'vue';
import { dashIfEmpty } from 'src/filters';

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 isBooleanValue = computed(() => typeof $props.value === 'boolean');

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">
            <span v-if="isBooleanValue">
                <QIcon
                    :name="$props.value ? `check` : `close`"
                    :color="$props.value ? `positive` : `negative`"
                    size="sm"
                />
            </span>
            <slot v-else 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">
                <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" />
        </div>
    </div>
</template>

<style lang="scss" scoped>
.copy {
    &:hover {
        cursor: pointer;
    }
}
</style>
