<script setup lang="ts">
import { Head } from '@inertiajs/vue3';
import { ref } from 'vue';
import AttendanceCard from '@/components/card/AttendanceCard.vue';
import { Card, CardContent } from '@/components/ui/card';
import AdminLayout from '@/layouts/AdminLayout.vue';
import type { AttendanceListItem, CalendarRange, TodayAttendance } from '@/types/attendance';
import AttendanceWebcamModal from './form/AttendanceWebcamModal.vue';
import AttendanceCalendar from './table/AttendanceCalendar.vue';

const props = defineProps<{
    attendances: AttendanceListItem[];
    todayAttendance: TodayAttendance;
    isOnLeave: boolean;
    canCheckIn: boolean;
    canManageAll: boolean;
    calendarRange: CalendarRange;
}>();

const webcamModalOpen = ref(false);
const webcamMode = ref<'check-in' | 'check-out'>('check-in');

function openCheckInModal() {
    webcamMode.value = 'check-in';
    webcamModalOpen.value = true;
}

function openCheckOutModal() {
    webcamMode.value = 'check-out';
    webcamModalOpen.value = true;
}
</script>

<template>

    <Head title="Presensi" />

    <AdminLayout>
        <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
            <div class="space-y-1">
                <h2 class="text-2xl font-bold tracking-tight">
                    Presensi
                </h2>
            </div>
        </div>

        <AttendanceCard
            :today-attendance="todayAttendance"
            :is-on-leave="isOnLeave"
            :can-check-in="canCheckIn"
            @check-in="openCheckInModal"
            @check-out="openCheckOutModal"
        />

        <Card class="min-w-0 overflow-hidden">
            <CardContent class="min-w-0">
                <AttendanceCalendar :attendances="attendances" :calendar-range="calendarRange"
                    :can-manage-all="canManageAll" />
            </CardContent>
        </Card>

        <AttendanceWebcamModal v-if="canCheckIn" v-model:open="webcamModalOpen" :mode="webcamMode" />
    </AdminLayout>
</template>
