<template>
    <form>
        <div class="grid grid-cols-3 gap-x-40 gap-y-8 mb-8">
            <UiNumberInput
                :key="localWeight.type"
                :label="'POIDS'"
                labelClass="font-bold uppercase text-xl "
                v-model="localWeight.weight"
                :disabled="!isAdmin"
                :min="0"
                wrapper-class="flex-col"
                required
            />

            <UiDateInput
                label="Date de pesée"
                v-model="localWeight.weighedAt"
                :disabled="!isAdmin"
                required
            />

            <UiNumberInput
                label="Dsd"
                class="col-start-2"
                labelClass="font-bold uppercase"
                v-model="localWeight.dsd"
                :disabled="!isAdmin"
                wrapper-class="flex-col"
                required
            />
        </div>
    </form>
</template>

<script setup lang="ts">
import type {WeightEntryData} from '~/services/dto/weight-data'
import {reactive, watch} from "vue";

const props = defineProps<{
    modelValue: WeightEntryData
    isAdmin: boolean
}>()

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

const localWeight = reactive<WeightEntryData>({...props.modelValue})

watch(
    () => props.modelValue,
    (value) => {
        Object.assign(localWeight, value)
    },
    {deep: true}
)

watch(
    localWeight,
    (value) => {
        emit('update:modelValue', {...value})
    },
    {deep: true}
)
</script>
