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


    import { useQuasar } from 'quasar';
    import { ref, computed, watch, onMounted } from 'vue';
    import { useTimesheetStore } from 'src/stores/timesheet-store';

    // ========== constants ========================================

    const CURRENT_DATE_STRING = new Date().toISOString().slice(0, 10);

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

    const emit = defineEmits<{
        'onCurrentDayComponentFound': [component: HTMLElement | undefined];
    }>();

    const q = useQuasar();
    const timesheetStore = useTimesheetStore();

    const mobileAnimationDirection = ref('fadeInLeft');
    const currentDayComponent = ref<HTMLElement[] | null>(null);
    const currentDayComponentWatcher = ref(currentDayComponent);

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

    const animationStyle = computed(() => q.platform.is.mobile ? mobileAnimationDirection.value : 'fadeInDown');

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

    const getMobileDayRef = (iso_date_string: string): string => {
        return iso_date_string === CURRENT_DATE_STRING ? 'currentDayComponent' : '';
    };

    onMounted(async () => {
        await timesheetStore.getCurrentFederalHolidays();
    });

    watch(currentDayComponentWatcher, () => {
        if (currentDayComponent.value && q.platform.is.mobile) {
            emit('onCurrentDayComponentFound', currentDayComponent.value[0])
        }
    });
</script>

<template>
    <div class="fit column no-wrap q-pb-lg">
        <div
            v-for="timesheet of timesheetStore.timesheets"
            :key="timesheet.timesheet_id"
            class="col-auto column no-wrap"
        >
            <transition-group
                appear
                :enter-active-class="`animated ${animationStyle}`"
            >
                <div
                    v-for="day, dayIndex in timesheet.days"
                    :key="day.date"
                    :ref="getMobileDayRef(day.date)"
                    class="col-auto row q-pa-sm full-width relative-position"
                    :style="`animation-delay: ${dayIndex / 15}s;`"
                >
                    <ShiftListDayMobile
                        v-model="timesheet.days[dayIndex]!"
                        :timesheet-id="timesheet.timesheet_id"
                        :is-timesheet-approved="timesheet.is_approved"
                    />
                </div>
            </transition-group>
        </div>
    </div>
</template>

<style
    scoped
    lang="scss"
>
@each $size in (1, 2, 3, 4, 5, 10, 15, 20, 25, 50, 75, 100, 200) {
    .mobile-rounded-#{$size} {
        border-radius: #{$size}px !important;
    }

    .mobile-rounded-#{$size}>div:first-child {
        border-radius: #{$size}px #{$size}px 0 0 !important;
    }

    .mobile-rounded-#{$size}>div:last-child {
        border-radius: 0 0 #{$size}px #{$size}px !important;
    }
}
</style>