<script
    setup
    lang="ts"
>
    import { ref } from 'vue';
    import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { getHoursMinutesStringFromHoursFloat } from 'src/utils/date-and-time-utils';

    const timesheet_store = useTimesheetStore();
    const timesheet_api = useTimesheetApi();

    const show_autofill = ref(false);

    const onClickApplyPreset = async (timesheet_id: number) => {
        show_autofill.value = false;
        await timesheet_api.applyPreset(timesheet_id);
    }
</script>

<template>
    <div
        v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
        class="row items-start q-px-sm q-pt-sm full-width"
    >
        <!-- per timesheet -->
        <div
            v-for="timesheet, timesheet_index in timesheet_store.timesheets"
            :key="timesheet_index"
            class="col column flex-center q-pa-sm"
        >
            <!-- container -->
            <div
                class="rounded-5 relative-position q-px-sm q-pt-sm q-pb-xs full-width shadow-4"
                style="border: 1px solid var(--q-accent);"
                @click="show_autofill = !show_autofill"
            >
                <!-- icon to show preset is available -->
                <q-icon
                    v-if="timesheet.days.every(day => day.shifts.length < 1)"
                    name="schedule_send"
                    size="sm"
                    color="accent"
                    class="absolute-top-right bg-secondary"
                    style="transform: translate(10px, -10px);"
                />

                <!-- label for week number -->
                <div
                    class="self-start text-uppercase text-weight-bolder text-overline text-accent bg-secondary absolute-top-left q-px-xs"
                    style="font-size: 1em; top: -7px; left: 10px; line-height: 1em;"
                >
                    {{
                        getHoursMinutesStringFromHoursFloat(timesheet.weekly_hours.regular +
                            timesheet.weekly_hours.evening +
                            timesheet.weekly_hours.emergency +
                            timesheet.weekly_hours.overtime)
                    }}
                </div>

                <!-- preview of current number of shifts -->
                <div
                    class="col row flex-center"
                    style="height: 20px;"
                >
                    <div
                        v-for="day, day_index in timesheet.days"
                        :key="day_index"
                        class="col row flex-center"
                    >
                        <q-badge
                            :color="day.shifts.length > 0 ? (day.shifts.every(shift => shift.is_approved) ? 'accent shadow-2' : 'white shadow-2') : 'blue-grey-5'"
                            :class="day.shifts.length > 0 ? (day.shifts.every(shift => shift.is_approved) ? 'q-px-xs' : 'q-pa-sm') : ''"
                            :style="day.shifts.length > 0 ? '' : 'opacity: 0.5'"
                        >
                            <q-icon
                                v-if="day.shifts.every(shift => shift.is_approved) && day.shifts.length > 0"
                                name="check"
                                class="q-pa-none"
                            />
                        </q-badge>
                    </div>
                </div>
            </div>

            <!-- button to apply weekly schedule preset -->
            <q-slide-transition>
                <div
                    class="col-auto flex-center row q-pt-xs full-width"
                    v-if="show_autofill"
                >
                    <q-btn
                        v-if="timesheet.days.every(day => day.shifts.length < 1)"
                        push
                        dense
                        color="accent"
                        :label="$t('timesheet.apply_preset')"
                        class="full-width"
                        @click="onClickApplyPreset(timesheet.timesheet_id)"
                    />
                </div>
            </q-slide-transition>
        </div>
    </div>
</template>