<script
    setup
    lang="ts"
>   
    import ShiftList from 'src/modules/timesheets/components/shift-list.vue';

    import { computed, ref } from 'vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';
    import { useTimesheetApi } from 'src/modules/timesheets/composables/use-timesheet-api';
    import type { QScrollArea, TouchSwipeValue } from 'quasar';

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

    const { mode = 'normal' } = defineProps<{
        mode: 'normal' | 'approval';
    }>();

    const mobile_animation_direction = ref('fadeInLeft');

    const timesheet_page = ref<QScrollArea | null>(null);

    const scroll_y = computed(() => timesheet_page.value?.getScrollPosition().top ?? 0);

    const handleSwipe: TouchSwipeValue = (details) => {
        mobile_animation_direction.value = details.direction === 'left' ? 'fadeInRight' : 'fadeInLeft';
        if (details.distance && details.distance.x && Math.abs(details.distance.x) > 15) {
            timesheet_api.getTimesheetsBySwiping(details.direction === 'left' ? 1 : -1).catch(error => console.error(error));
        }
    };

    const onTodayComponentFound = (today_component: HTMLElement | undefined) => {
        if (timesheet_page.value && today_component)
            timesheet_page.value.setScrollPosition('vertical', today_component.offsetTop, 800);
    }
</script>

<template>
    <div
        class="column fit relative-position"
        :style="$q.platform.is.mobile && $q.screen.width < $q.screen.height ? 'margin-bottom: 40px' : ''"
        v-touch-swipe.horizontal="handleSwipe"
    >
        <q-scroll-area
            ref="timesheet_page"
            :horizontal-offset="[0, 3]"
            class="col absolute-full hide-scrollbar"
            :thumb-style="{ opacity: '0' }"
            :bar-style="{ opacity: '0' }"
        >
            <!-- Show if no timesheets found (further than one month from present) -->
            <div
                v-if="timesheet_store.timesheets.length < 1 && !timesheet_store.is_loading"
                class="col-auto column flex-center fit q-py-lg"
                style="min-height: 20vh;"
            >
                <span class="text-uppercase text-weight-bolder text-center">{{ $t('shared.error.no_data_found')
                    }}</span>
                <q-icon
                    name="las la-calendar"
                    color="accent"
                    size="10em"
                    class="absolute"
                    style="opacity: 0.2;"
                />
            </div>

            <!-- Else show timesheets if found -->
            <ShiftList @on-current-day-component-found="onTodayComponentFound" />
        </q-scroll-area>

        <q-page-sticky
            v-if="mode === 'normal'"
            position="bottom-right"
            :offset="$q.screen.width > $q.screen.height ? [15, 15] : [15, 65]"
            class="z-top"
        >
            <transition
                appear
                enter-active-class="animated zoomIn"
                leave-active-class="animated zoomOut"
            >
                <q-btn
                    v-if="scroll_y > 400"
                    fab
                    icon="las la-chevron-up"
                    color="white"
                    text-color="accent"
                    class="shadow-12"
                    @click="timesheet_page!.setScrollPosition('vertical', 0, 300)"
                />
            </transition>
        </q-page-sticky>
    </div>
</template>