<script
    setup
    lang="ts"
>
    import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    const timesheet_store = useTimesheetStore();
    const timesheet_api = useTimesheetApi();
</script>

<template>
    <div
        v-if="$q.platform.is.mobile && $q.screen.width < $q.screen.height"
        class="col-auto 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);"
            >
                <!-- label for week number -->
                <div
                    class="self-start text-uppercase text-weight-bolder text-accent bg-secondary absolute-top-left q-px-xs"
                    style="font-size: 0.8em; top: -7px; left: 10px; line-height: 1em;"
                >{{ $t('timesheet.week') + ` ${timesheet_index + 1}` }}</div>

                <!-- hours worked in the week -->
                <div class="col-auto row">
                    <span class="text-weight-bolder text-uppercase text-accent text-caption q-mr-sm">{{
                        $t('timesheet.total_hours') }}</span>
                    <span>{{
                        (timesheet.weekly_hours.regular +
                            timesheet.weekly_hours.evening +
                            timesheet.weekly_hours.emergency +
                            timesheet.weekly_hours.overtime).toFixed(2)
                    }}</span>
                </div>

                <!-- label for current shifts preview -->
                <div
                    class="col-auto full-width text-center text-weight-medium text-caption text-uppercase q-mt-xs"
                    style="font-size: 0.65em; line-height: 1.2em;"
                > {{ $t('timesheet.current_shifts') }}</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' : 'dark 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 -->
            <div class="col-auto flex-center row q-pt-xs full-width">
                <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="timesheet_api.applyPreset(timesheet.timesheet_id)"
                />
            </div>
        </div>
    </div>
</template>