<template>
    <MalioDrawer v-model="drawerOpen">
        <template #header>
            <h2 class="text-[32px] font-semibold text-primary-500">Export heures</h2>
        </template>
        <form class="space-y-4" @submit.prevent="handleSubmit">
            <div>
                <label class="text-md font-semibold text-neutral-700" for="yearly-hours-year">
                    Année <span class="text-red-600">*</span>
                </label>
                <select
                    id="yearly-hours-year"
                    v-model="selectedYear"
                    :class="selectFieldClass"
                >
                    <option v-for="y in years" :key="y" :value="y">{{ y }}</option>
                </select>
            </div>

            <div>
                <label class="text-md font-semibold text-neutral-700" for="yearly-hours-month">
                    Mois
                </label>
                <select
                    id="yearly-hours-month"
                    v-model="selectedMonth"
                    :class="selectFieldClass"
                >
                    <option value="">Toute l'année</option>
                    <option v-for="m in months" :key="m.value" :value="m.value">{{ m.label }}</option>
                </select>
            </div>

            <div class="flex justify-center pt-2">
                <MalioButton
                    label="Imprimer"
                    button-class="w-[200px]"
                    @click="handleSubmit"
                />
            </div>
        </form>
    </MalioDrawer>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'

const props = defineProps<{
    modelValue: boolean
    employeeId: number
}>()

const emit = defineEmits<{
    (event: 'update:modelValue', value: boolean): void
    (event: 'submit', payload: { year: number; month: number | null }): void
}>()

const drawerOpen = computed({
    get: () => props.modelValue,
    set: (value: boolean) => emit('update:modelValue', value)
})

const currentYear = new Date().getFullYear()
const years = Array.from({ length: 6 }, (_, i) => currentYear - i)
const months = [
    { value: 1, label: 'Janvier' },
    { value: 2, label: 'Février' },
    { value: 3, label: 'Mars' },
    { value: 4, label: 'Avril' },
    { value: 5, label: 'Mai' },
    { value: 6, label: 'Juin' },
    { value: 7, label: 'Juillet' },
    { value: 8, label: 'Août' },
    { value: 9, label: 'Septembre' },
    { value: 10, label: 'Octobre' },
    { value: 11, label: 'Novembre' },
    { value: 12, label: 'Décembre' }
]
const selectedYear = ref(currentYear)
const selectedMonth = ref<number | ''>('')

const baseInputClass = 'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
const selectFieldClass = computed(() => `${baseInputClass} border-neutral-300`)

const handleSubmit = () => {
    emit('submit', {
        year: selectedYear.value,
        month: selectedMonth.value === '' ? null : selectedMonth.value
    })
}

watch(
    () => props.modelValue,
    (isOpen) => {
        if (!isOpen) {
            selectedYear.value = currentYear
            selectedMonth.value = ''
        }
    }
)
</script>
