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

const $props = defineProps({
    label: { type: String, default: null },
    tooltip: { 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,
        },
    });
}
const val = computed(() => $props.value);
</script>
<template>
    <div class="vn-label-value" :data-cy="`${$attrs['data-cy'] ?? 'vnLv'}${label ?? ''}`">
        <QCheckbox
            v-if="typeof value === 'boolean'"
            v-model="val"
            :label="label"
            disable
            dense
            size="sm"
        />
        <template v-else>
            <div v-if="label || $slots.label" class="label">
                <slot name="label">
                    <QTooltip v-if="tooltip">{{ tooltip }}</QTooltip>
                    <span style="color: var(--vn-label-color)">
                        {{ label }}
                    </span>
                </slot>
            </div>
            <div class="value" v-if="value || $slots.value">
                <slot name="value">
                    <span :title="value" style="text-overflow: ellipsis">
                        {{ dash ? dashIfEmpty(value) : value }}
                    </span>
                </slot>
            </div>
            <div class="info" v-if="info">
                <QIcon name="info" class="cursor-pointer" size="xs" color="grey">
                    <QTooltip class="bg-dark text-white shadow-4" :offset="[10, 10]">
                        {{ info }}
                    </QTooltip>
                </QIcon>
            </div>
            <div class="copy" v-if="copy && value" @click="copyValueText()">
                <QIcon name="Content_Copy" color="primary">
                    <QTooltip>{{ t('globals.copyClipboard') }}</QTooltip>
                </QIcon>
            </div>
        </template>
    </div>
</template>
<style lang="scss" scoped>
.vn-label-value {
    &:hover .copy {
        visibility: visible;
        cursor: pointer;
    }

    .label,
    .value {
        white-space: pre-line;
        word-wrap: break-word;
    }
    .copy {
        visibility: hidden;
    }

    .info {
        margin-left: 5px;
    }
}

:deep(.q-checkbox.disabled) {
    opacity: 1 !important;
}
</style>
