<script
    setup
    lang="ts"
>
    import { useShiftStore } from 'src/stores/shift-store';
    import { computed, ref } from 'vue';

    const shift_store = useShiftStore();
    const is_counting_error_display_time = ref(false);

    const is_showing_errors = computed(() => {
        if (shift_store.shift_errors.length > 0 && !is_counting_error_display_time.value) {
            onShowingErrorMessage();
        }

        return shift_store.shift_errors.length > 0;
    });

    const onShowingErrorMessage = () => {
        is_counting_error_display_time.value = true;

        setTimeout(() => { 
            is_counting_error_display_time.value = false
            shift_store.shift_errors = [];
         }, 5000);
    };
</script>

<template>
    <q-slide-transition>
        <div
            clickable
            v-if="is_showing_errors"
            class="full-width q-px-md q-mb-sm"
            @click="shift_store.shift_errors = []"
        >
            <q-list>
                <q-item
                    clickable
                    dense
                    v-for="error, index in shift_store.shift_errors"
                    :key="index"
                    class="row items-center full-width bg-dark shadow-2 rounded-5 q-my-xs"
                    style="border: 2px solid var(--q-negative)"
                >
                    <q-item-label class="text-weight-medium text-caption  q-ml-md">
                        {{ $t('timesheet.errors.' + error) }}
                    </q-item-label>
                </q-item>
            </q-list>

        </div>
    </q-slide-transition>
</template>