<template>
    <div class="relative grid grid-cols-2 gap-x-8 gap-y-3 rounded bg-white p-4 shadow">
        <h3 class="col-span-2 text-sm font-semibold text-neutral-700">
            {{ title }}
        </h3>
        <MalioButtonIcon
            v-if="removable && !readonly"
            icon="mdi:trash-can-outline"
            class="absolute right-2 top-2"
            button-class="!text-red-600"
            :aria-label="$t('common.delete')"
            @click="$emit('remove')"
        />

        <MalioInputText
            :label="$t('directory.contacts.fields.lastName')"
            :model-value="modelValue.lastName ?? ''"
            :readonly="readonly"
            @update:model-value="update('lastName', $event)"
        />
        <MalioInputText
            :label="$t('directory.contacts.fields.firstName')"
            :model-value="modelValue.firstName ?? ''"
            :readonly="readonly"
            @update:model-value="update('firstName', $event)"
        />
        <MalioInputText
            class="col-span-2"
            :label="$t('directory.contacts.fields.jobTitle')"
            :model-value="modelValue.jobTitle ?? ''"
            :readonly="readonly"
            @update:model-value="update('jobTitle', $event)"
        />
        <MalioInputText
            :label="$t('directory.contacts.fields.email')"
            :model-value="modelValue.email ?? ''"
            :readonly="readonly"
            @update:model-value="update('email', $event)"
        />
        <MalioInputText
            :label="$t('directory.contacts.fields.phonePrimary')"
            :model-value="modelValue.phonePrimary ?? ''"
            :readonly="readonly"
            @update:model-value="update('phonePrimary', $event)"
        />
        <MalioInputText
            :label="$t('directory.contacts.fields.phoneSecondary')"
            :model-value="modelValue.phoneSecondary ?? ''"
            :readonly="readonly"
            @update:model-value="update('phoneSecondary', $event)"
        />
    </div>
</template>

<script setup lang="ts">
import type { Contact } from '~/modules/directory/services/dto/contact'

const props = defineProps<{
    modelValue: Contact
    title: string
    removable?: boolean
    readonly?: boolean
}>()

const emit = defineEmits<{
    'update:modelValue': [value: Contact]
    'remove': []
}>()

function update(field: keyof Contact, value: string): void {
    emit('update:modelValue', { ...props.modelValue, [field]: value === '' ? null : value })
}
</script>
