<script
    setup
    lang="ts"
>
    import SchedulePresetsDialogRow from './schedule-presets-dialog-row.vue';
    import SchedulePresetsDialogDelete from 'src/modules/employee-list/components/schedule-presets-dialog-delete.vue';

    import { useEmployeeListApi } from '../composables/use-employee-api';
    import { SchedulePresetShift } from '../models/schedule-presets.models';
    import { useSchedulePresetsStore } from 'src/stores/schedule-presets.store';
    import { isShiftOverlap } from 'src/modules/timesheets/utils/shift.util';

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

    const schedulePresetStore = useSchedulePresetsStore();
    const employee_list_api = useEmployeeListApi();

    const onClickSaveSchedulePreset = async () => {
        const success = await employee_list_api.saveSchedulePreset();

        if (success)
            closePresetManager();
    }

    const closePresetManager = () => {
        emit('onClose');
        schedulePresetStore.isManagerOpen = false;
    }
</script>

<template>
    <q-dialog
        v-model="schedulePresetStore.isManagerOpen"
        full-width
    >
        <SchedulePresetsDialogDelete
            v-if="schedulePresetStore.schedule_preset_dialog_mode === 'delete'"
            :preset-id="schedulePresetStore.current_schedule_preset.id"
            @on-confirm-delete="closePresetManager"
        />

        <div
            v-else
            class="column flex-center bg-secondary rounded-10 shadow-24 no-wrap"
            style="border: 2px solid var(--q-accent); width: 50vw !important;"
        >
            <div
                class="row col-auto flex-center bg-primary full-width"
                style="border-radius: 8px 8px 0 0;"
            >
                <span class="row col-auto text-uppercase text-weight-bold text-white q-py-sm">{{
                    schedulePresetStore.current_schedule_preset.id === -1 ?
                        $t('shared.label.add') :
                        $t('shared.label.modify') }}
                </span>
            </div>

            <div class="row col-auto q-px-sm flex-center full-width q-pt-md">
                <div class="col-8 bg-dark rounded-10 shadow-2 ellipsis">
                    <q-input
                        v-model="schedulePresetStore.current_schedule_preset.name"
                        standout
                        dense
                        hide-bottom-space
                        :placeholder="$t('employee_management.schedule_presets.preset_name_placeholder')"
                        input-class="text-weight-bold text-center"
                    >
                        <template #prepend>
                            <q-icon
                                name="edit"
                                color="accent"
                                class="q-ml-sm"
                            />
                        </template>
                    </q-input>
                </div>
            </div>

            <div class="column col full-width q-py-sm q-px-lg no-wrap scroll">
                <div
                    v-for="weekday of schedulePresetStore.current_schedule_preset.weekdays"
                    :key="weekday.day"
                    class="row col-auto items-center q-my-xs shadow-2 bg-dark rounded-10 ellipsis"
                    style="min-height: 50px;"
                >
                    <span class="col-2 text-uppercase text-weight-bold q-ml-sm ellipsis">{{
                        $t(`shared.weekday.${weekday.day.toLowerCase()}`) }}
                    </span>

                    <div class="col column">
                        <div
                            v-for="_shift, index in weekday.shifts"
                            :key="index"
                        >
                            <SchedulePresetsDialogRow
                                v-model:shift="weekday.shifts[index]!"
                                :error="weekday.is_error"
                                @click-delete="weekday.shifts.splice(index, 1)"
                                @blur-time-field="weekday.is_error = isShiftOverlap(weekday.shifts)"
                            />
                        </div>
                    </div>

                    <div class="col-auto self-stretch">
                        <q-btn
                            square
                            icon="more_time"
                            color="accent"
                            class="full-height q-ma-none q-px-sm"
                            tabindex="-1"
                            @click="weekday.shifts.push(new SchedulePresetShift(weekday.day))"
                        />
                    </div>
                </div>
            </div>

            <div class="col-auto row self-end q-px-lg q-mt-sm full-width">
                <q-space />
                <q-btn
                    :disable="schedulePresetStore.current_schedule_preset.name === ''"
                    push
                    dense
                    :color="schedulePresetStore.current_schedule_preset.name === '' ? 'grey-7' : 'accent'"
                    icon="download"
                    :label="$t('shared.label.save')"
                    class="col-auto q-px-md q-mb-sm"
                    @click="onClickSaveSchedulePreset"
                />
            </div>
        </div>
    </q-dialog>
</template>
