<template>
    <AppDrawer v-model="drawerOpen" title="Imprimer les absences">
        <form class="space-y-4" @submit.prevent="handleSubmit">
            <div class="grid grid-cols-2 gap-4">
                <div>
                    <label class="text-md font-semibold text-neutral-700" for="print-from">
                        Date de début <span class="text-red-600">*</span>
                    </label>
                    <input
                        id="print-from"
                        v-model="printForm.from"
                        type="date"
                        :class="fromFieldClass"
                    />
                    <p v-if="showFromError" class="mt-1 text-sm text-red-600">
                        La date de début est obligatoire.
                    </p>
                </div>
                <div>
                    <label class="text-md font-semibold text-neutral-700" for="print-to">
                        Date de fin <span class="text-red-600">*</span>
                    </label>
                    <input
                        id="print-to"
                        v-model="printForm.to"
                        type="date"
                        :class="toFieldClass"
                    />
                    <p v-if="showToError" class="mt-1 text-sm text-red-600">
                        La date de fin est obligatoire.
                    </p>
                </div>
            </div>

            <div class="space-y-2">
                <p class="text-md font-semibold text-neutral-700">
                    Sites <span class="text-red-600">*</span>
                </p>
                <div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
                    <div v-for="site in sites" :key="site.id" class="flex items-center gap-2">
                        <div :style="{ backgroundColor: site.color }" class="h-4 w-4 rounded"></div>
                        <label class="text-md" :for="`print-site-${site.id}`">{{ site.name }}</label>
                        <input
                            :id="`print-site-${site.id}`"
                            v-model="printForm.siteIds"
                            :value="site.id"
                            type="checkbox"
                            class="h-4 w-4"
                        />
                    </div>
                </div>
                <p v-if="showSitesError" class="text-sm text-red-600">
                    Sélectionne au moins un site.
                </p>
            </div>

            <div class="space-y-2">
                <p class="text-md font-semibold text-neutral-700">
                    Type de contrat <span class="text-red-600">*</span>
                </p>
                <div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
                    <div v-for="nature in contractNatures" :key="nature.value" class="flex items-center gap-2">
                        <label class="text-md" :for="`print-contract-nature-${nature.value}`">{{ nature.label }}</label>
                        <input
                            :id="`print-contract-nature-${nature.value}`"
                            v-model="printForm.contractNatures"
                            :value="nature.value"
                            type="checkbox"
                            class="h-4 w-4"
                        />
                    </div>
                </div>
                <p v-if="showContractNaturesError" class="text-sm text-red-600">
                    Sélectionne au moins un type de contrat.
                </p>
            </div>

            <div class="space-y-2">
                <p class="text-md font-semibold text-neutral-700">
                    Temps de travail <span class="text-red-600">*</span>
                </p>
                <div class="flex flex-wrap gap-4 rounded-md border border-neutral-300 px-3 py-2">
                    <div v-for="workContract in workContracts" :key="workContract.id" class="flex items-center gap-2">
                        <label class="text-md" :for="`print-work-contract-${workContract.id}`">{{ workContract.name }}</label>
                        <input
                            :id="`print-work-contract-${workContract.id}`"
                            v-model="printForm.workContractIds"
                            :value="workContract.id"
                            type="checkbox"
                            class="h-4 w-4"
                        />
                    </div>
                </div>
                <p v-if="showWorkContractsError" class="text-sm text-red-600">
                    Sélectionne au moins un temps de travail.
                </p>
            </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"
                    :class="submitButtonClass"
                >
                    Imprimer
                </button>
            </div>
        </form>
    </AppDrawer>
</template>

<script setup lang="ts">
import { computed, reactive, toRef, watch } from 'vue'
import AppDrawer from '~/components/AppDrawer.vue'

type SiteOption = {
    id: number
    name: string
    color: string
}

type ContractNatureOption = {
    value: 'CDI' | 'CDD' | 'INTERIM'
    label: string
}

type WorkContractOption = {
    id: number
    name: string
}

const props = defineProps<{
    modelValue: boolean
    sites: SiteOption[]
    contractNatures: ContractNatureOption[]
    workContracts: WorkContractOption[]
    printForm: {
        from: string
        to: string
        siteIds: number[]
        contractNatures: Array<'CDI' | 'CDD' | 'INTERIM'>
        workContractIds: number[]
    }
}>()

const emit = defineEmits<{
    (event: 'update:modelValue', value: boolean): void
    (event: 'submit'): void
    (event: 'cancel'): void
}>()

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

const printForm = toRef(props, 'printForm')

const validationTouched = reactive({
    from: false,
    to: false,
    sites: false,
    contractNatures: false,
    workContracts: false
})

const isFromValid = computed(() => printForm.value.from.trim() !== '')
const isToValid = computed(() => printForm.value.to.trim() !== '')
const isSitesValid = computed(() => printForm.value.siteIds.length > 0)
const isContractNaturesValid = computed(() => {
    if (props.contractNatures.length === 0) return true
    return printForm.value.contractNatures.length > 0
})
const isWorkContractsValid = computed(() => {
    if (props.workContracts.length === 0) return true
    return printForm.value.workContractIds.length > 0
})
const isFormValid = computed(
    () =>
        isFromValid.value &&
        isToValid.value &&
        isSitesValid.value &&
        isContractNaturesValid.value &&
        isWorkContractsValid.value
)

const showFromError = computed(() => validationTouched.from && !isFromValid.value)
const showToError = computed(() => validationTouched.to && !isToValid.value)
const showSitesError = computed(() => validationTouched.sites && !isSitesValid.value)
const showContractNaturesError = computed(() => validationTouched.contractNatures && !isContractNaturesValid.value)
const showWorkContractsError = computed(() => validationTouched.workContracts && !isWorkContractsValid.value)

const baseInputClass =
    'mt-2 w-full rounded-md border px-3 py-2 text-md text-neutral-900'
const fromFieldClass = computed(() => {
    if (showFromError.value) {
        return `${baseInputClass} border-red-500`
    }
    return `${baseInputClass} border-neutral-300`
})
const toFieldClass = computed(() => {
    if (showToError.value) {
        return `${baseInputClass} border-red-500`
    }
    return `${baseInputClass} border-neutral-300`
})

const submitButtonClass = computed(() => {
    if (!isFormValid.value) {
        return 'opacity-50 cursor-not-allowed'
    }
    return ''
})

const handleSubmit = () => {
    validationTouched.from = true
    validationTouched.to = true
    validationTouched.sites = true
    validationTouched.contractNatures = true
    validationTouched.workContracts = true
    if (!isFormValid.value) return
    emit('submit')
}

const handleCancel = () => {
    emit('cancel')
    emit('update:modelValue', false)
}

watch(
    () => props.modelValue,
    (isOpen) => {
        if (!isOpen) {
            validationTouched.from = false
            validationTouched.to = false
            validationTouched.sites = false
            validationTouched.contractNatures = false
            validationTouched.workContracts = false
        }
    }
)
</script>
