<script setup>
import { toDateFormat } from 'src/filters/date.js';

defineProps({ date: { type: [Date, String], required: true } });

function getBadgeAttrs(date) {
    let today = Date.vnNew();
    today.setHours(0, 0, 0, 0);
    let timeTicket = new Date(date);
    timeTicket.setHours(0, 0, 0, 0);

    let timeDiff = today - timeTicket;

    if (timeDiff == 0) return { color: 'warning', class: 'black-text-color' };
    if (timeDiff < 0) return { color: 'success', class: 'black-text-color' };
    return { color: 'transparent', class: 'normal-text-color' };
}

function formatShippedDate(date) {
    if (!date) return '-';
    const dateSplit = date.split('T');
    const [year, month, day] = dateSplit[0].split('-');
    const newDate = new Date(year, month - 1, day);
    return toDateFormat(newDate);
}
</script>
<template>
    <QBadge v-bind="getBadgeAttrs(date)" class="q-pa-sm" style="font-size: 14px">
        {{ formatShippedDate(date) }}
    </QBadge>
</template>
<style lang="scss">
.black-text-color {
    color: var(--vn-black-text-color);
}
.normal-text-color {
    color: var(--vn-text-color);
}
</style>
