<template>
    <div class="max-h-[80vh] overflow-auto rounded-lg border border-neutral-200 bg-white">
        <div class="min-w-[900px]">
            <div class="grid" :style="gridStyle">
                <div
                    class="sticky left-0 z-20 border-b border-neutral-200 bg-tertiary-500 px-4 py-3 text-md font-semibold text-neutral-700"
                >
                    Employés
                </div>
                <div
                    v-for="day in daysInMonth"
                    :key="day.date"
                    class="border-b border-neutral-200 bg-tertiary-500 px-2 py-3 text-center text-xs font-semibold text-neutral-700"
                >
                    <div>{{ day.label }}</div>
                    <div class="text-[10px] text-neutral-500">{{ day.weekday }}</div>
                </div>

                <template v-for="employee in visibleEmployees" :key="employee.id">
                    <div
                        class="sticky left-0 z-10 border-b border-neutral-100 px-4 py-3 text-md font-semibold text-black"
                        :style="{ backgroundColor: employee.site?.color ?? '#304998' }"
                    >
                        {{ formatEmployeeName(employee) }}
                    </div>
                    <div
                        v-for="day in daysInMonth"
                        :key="employee.id + '-' + day.date"
                        class="border-b border-neutral-100 px-2 py-2 text-center text-xs text-neutral-800"
                    >
                        <button
                            type="button"
                            class="flex h-8 w-full items-center justify-center rounded-md border border-neutral-200 text-[11px] font-semibold text-neutral-800 hover:border-primary-500/40"
                            :class="isHolidayDate(day.date) ? 'cursor-not-allowed opacity-80' : ''"
                            :style="getCellStyle(employee.id, day.date)"
                            :disabled="isHolidayDate(day.date)"
                            @click="handleCellClick(employee, day.date)"
                        >
                            <span v-if="getCellCode(employee.id, day.date)">
                                {{ getCellCode(employee.id, day.date) }}
                            </span>
                        </button>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { Employee } from '~/services/dto/employee'

type DayInfo = {
    date: string
    label: string
    weekday: string
}

defineProps<{
    daysInMonth: DayInfo[]
    visibleEmployees: Employee[]
    gridStyle: Record<string, string>
    getCellStyle: (employeeId: number, date: string) => Record<string, string> | undefined
    getCellCode: (employeeId: number, date: string) => string
    formatEmployeeName: (employee: Employee) => string
    isHolidayDate: (date: string) => boolean
}>()

const emit = defineEmits<{
    (event: 'cell-click', employee: Employee, date: string): void
}>()

const handleCellClick = (employee: Employee, date: string) => {
    emit('cell-click', employee, date)
}
</script>
