<script
    setup
    lang="ts"
>
    /* eslint-disable */
    import { date, useQuasar } from 'quasar';
    import { computed, onMounted, onUpdated, ref } from 'vue';

    const { title, startDate = "", endDate = "" } = defineProps<{
        title: string;
        startDate?: string;
        endDate?: string;
    }>();

    const q = useQuasar();

    const emit = defineEmits<{ 'onGetComponentHeight': [value: number] }>();

    const selfRef = ref<HTMLElement | null>(null);

    const date_format_options = computed(() => q.platform.is.mobile ? { day: 'numeric', month: 'short', year: 'numeric' } : { day: 'numeric', month: 'long', year: 'numeric', });

    onUpdated(() => {
        if (selfRef.value) {
            emit('onGetComponentHeight', selfRef.value.offsetHeight);
        }
    });

    onMounted(() => {
        if (selfRef.value) {
            emit('onGetComponentHeight', selfRef.value.offsetHeight);
        }
    })
</script>

<template>
    <div
        ref="selfRef"
        class="column text-uppercase text-center text-weight-bolder text-h4 q-pt-md"
    >
        <!-- <span
            v-if="!$q.platform.is.mobile"
            class="col q-pt-lg"
        >
            {{ $t(title) }}
        </span> -->

        <transition
            enter-active-class="animated fadeInDown"
            leave-active-class="animated fadeOutDown"
            mode="out-in"
        >
            <div
                :key="startDate"
                v-if="startDate.length > 0"
                class="col row flex-center full-width q-py-none q-my-none"
                :class="$q.platform.is.mobile ? 'q-my-sm' : ''"
            >
                <div class="text-accent text-weight-bold text-h6">
                    {{ $d(date.extractDate(startDate, 'YYYY-MM-DD'), date_format_options) }}
                </div>
                <div class="text-body2 q-mx-md text-weight-medium">
                    {{ $t('shared.misc.to') }}
                </div>
                <div class="text-accent text-weight-bold text-h6">
                    {{ $d(date.extractDate(endDate, 'YYYY-MM-DD'), date_format_options) }}
                </div>
            </div>
        </transition>
    </div>
</template>