<script
    setup
    lang="ts"
>
    import { computed, onMounted, ref } from 'vue';
    import { useEmployeeStore } from 'src/stores/employee-store';
    import { useEmployeeListApi } from 'src/modules/employee-list/composables/use-employee-api';

    // ========== state ===================================

    const { presetId } = defineProps<{
        presetId: number;
    }>();

    const emit = defineEmits<{
        'onConfirmDelete': [void];
    }>();

    const employee_store = useEmployeeStore();
    const employee_list_api = useEmployeeListApi();

    const employee_amount_using_preset = ref(0);
    const delete_input_string = ref('');

    // ========== computed ==================================

    const is_approve_deletion = computed(() => ['SUPPRIMER', 'DELETE'].includes(delete_input_string.value));

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

    const onClickDeleteConfirm = async () => {
        const success = await employee_list_api.deleteSchedulePreset(presetId);
        
        if (success && employee_store.employee.preset_id === presetId)
            employee_store.employee.preset_id = null;
        
        emit('onConfirmDelete');
    };

    onMounted(() => {
        const employees_with_preset = employee_store.employee_list.filter(employee => employee.preset_id === presetId);
        employee_amount_using_preset.value = employees_with_preset.length;
    })
</script>

<template>
    <div
        class="column flex-center bg-secondary q-pa-md rounded-10 shadow-24"
        style="border: 2px solid var(--q-negative); width: 40vw !important;"
    >
        <span class="col-auto text-weight-bold text-uppercase text-center text-negative text-h5 q-pb-lg">
            {{ $t('shared.label.remove') }}
        </span>

        <div
            v-if="employee_amount_using_preset > 0"
            class="col row flex-center text-weight-medium text-center q-mb-lg"
        >
            <span class="col-auto">{{ $t('employee_management.schedule_presets.delete_warning_employee_1') }}</span>
            <span class="col-auto q-px-sm text-h6 text-weight-bolder text-negative">{{ employee_amount_using_preset
                }}</span>
            <span class="col-auto">{{ $t('employee_management.module_access.preset_employee') +
                (employee_amount_using_preset > 1 ? 's' : '') }}</span>
            <span>{{ $t('employee_management.schedule_presets.delete_warning_employee_2') }}</span>
        </div>

        <div class="col">
            <span class="text-weight-bold text-uppercase">{{ $t('employee_management.schedule_presets.delete_warning')
                }}</span>
            <q-input
                v-model="delete_input_string"
                standout
                dense
                rounded
                :placeholder="$t('employee_management.enter_delete_input')"
                input-class="text-center"
                :input-style="delete_input_string.length > 0 ? '' : 'opacity: 0.6;'"
                class="q-my-sm"
            />
        </div>

        <div class="col-auto row">
            <q-space />
            <q-btn
                push
                dense
                :disable="!is_approve_deletion"
                :color="is_approve_deletion ? 'negative' : 'grey-6'"
                :label="$t('shared.label.remove')"
                class="q-px-md"
                @click="onClickDeleteConfirm"
            />
        </div>
    </div>
</template>