<script
    setup
    lang="ts"
>
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    // ========== state ========================================
    const emit = defineEmits<{
        clickSaveNo: [];
        clickSaveYes: [];
    }>();

    const timesheetStore = useTimesheetStore();

    // ========== methods ========================================

    const onClickSaveOptionButton = (option: 'cancel' | 'no' | 'yes') => {
        switch(option) {
            case 'cancel':
                timesheetStore.isShowingUnsavedWarning = false;
                break;
            case 'no':
                emit('clickSaveNo');
                break;
            case 'yes':
                emit('clickSaveYes');
                break;
        }
    }
</script>

<template>
    <q-dialog
        v-model="timesheetStore.isShowingUnsavedWarning"
        backdrop-filter="blur(4px)"
    >
        <q-card
            class="bg-dark shadow-12 flex-center"
            style="border: 2px solid var(--q-accent);"
        >
            <div class="column flex-center q-py-sm q-px-md text-center">
                <span class="col-auto text-bold text-uppercase" style="font-size: 1.2em;">
                    {{ $t('timesheet.unsaved_changes_title') }}
                </span>
                <span class="">{{ $t('timesheet.unsaved_changes_caption') }}</span>
            </div>

            <div class="col-auto row full-width">
                <q-btn
                    flat
                    :label="$t('shared.label.cancel')"
                    class="col"
                    @click="onClickSaveOptionButton('cancel')"
                />

                <q-btn
                    flat
                    color="negative"
                    :label="$t('shared.misc.no')"
                    class="col"
                    @click="onClickSaveOptionButton('no')"
                />

                <q-btn
                    flat
                    color="accent"
                    :label="$t('shared.misc.yes')"
                    class="col"
                    @click="onClickSaveOptionButton('yes')"
                />
            </div>
        </q-card>
    </q-dialog>
</template>