<template>
    <AppDrawer v-model="drawerOpen" title="Export des heures">
        <form class="space-y-4" @submit.prevent="handleSubmit">
            <div>
                <label class="text-md font-semibold text-neutral-700" for="hours-export-date">
                    Date <span class="text-red-600">*</span>
                </label>
                <input
                    id="hours-export-date"
                    v-model="selectedDate"
                    type="date"
                    class="mt-2 w-full rounded-md border border-black px-3 py-2 text-md text-neutral-900"
                >
            </div>

            <div>
                <label class="text-md font-semibold text-neutral-700">
                    Sites <span class="text-red-600">*</span>
                </label>
                <MalioSelectCheckbox
                    v-model="selectedSites"
                    :options="siteOptions"
                    groupClass="w-full mt-2"
                    label="Sites"
                    display-select-all
                />
            </div>

            <div class="flex justify-center pt-2">
                <button
                    type="submit"
                    class="flex w-[200px] items-center justify-center gap-2 rounded-md bg-primary-500 px-4 py-2 text-md font-semibold text-white hover:bg-secondary-500 disabled:opacity-50 disabled:cursor-not-allowed"
                    :disabled="isLoading || !selectedDate || selectedSites.length === 0"
                >
                    <template v-if="isLoading">Génération en cours...</template>
                    <template v-else>Exporter</template>
                </button>
            </div>
        </form>
    </AppDrawer>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import AppDrawer from '~/components/AppDrawer.vue'
import type { Site } from '~/services/dto/site'

const props = defineProps<{
    modelValue: boolean
    sites: Site[]
    initialDate: string
    initialSiteIds: number[]
    isLoading?: boolean
}>()

const emit = defineEmits<{
    (event: 'update:modelValue', value: boolean): void
    (event: 'submit', payload: { date: string; siteIds: number[] }): void
}>()

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

const selectedDate = ref(props.initialDate)
const selectedSites = ref<number[]>([...props.initialSiteIds])

const siteOptions = computed(() =>
    props.sites.map((site) => ({ label: site.name, value: site.id }))
)

const handleSubmit = () => {
    if (!selectedDate.value || selectedSites.value.length === 0) return
    emit('submit', { date: selectedDate.value, siteIds: [...selectedSites.value] })
}

watch(
    () => props.modelValue,
    (isOpen) => {
        if (isOpen) {
            selectedDate.value = props.initialDate
            selectedSites.value = [...props.initialSiteIds]
        }
    }
)
</script>
