<template>
  <div v-if="visible" class="modal modal-open">
    <div class="modal-box max-w-md">
      <h3 class="font-bold text-lg mb-4">Ajouter un nouveau site</h3>
      <form @submit.prevent="emit('submit')" class="space-y-4">
        <div class="form-control">
          <label class="label">
            <span class="label-text">Nom du site</span>
          </label>
          <input
            v-model="siteName"
            type="text"
            placeholder="Ex: Usine principale"
            class="input input-bordered"
            required
          />
        </div>

        <SiteContactFormFields :form="siteRef" />

        <div class="modal-action">
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
          <button type="submit" class="btn btn-primary">
            Créer le site
          </button>
        </div>
      </form>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, toRef } from 'vue'
import type { PropType } from 'vue'
import SiteContactFormFields from '~/components/sites/SiteContactFormFields.vue'

type SiteForm = {
  name: string
  contactName: string
  contactPhone: string
  contactAddress: string
  contactPostalCode: string
  contactCity: string
}

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  site: {
    type: Object as PropType<SiteForm>,
    required: true
  }
})

const emit = defineEmits(['close', 'submit'])

const siteRef = toRef(props, 'site')

const siteName = computed({
  get: () => siteRef.value.name,
  set: (value: string) => {
    siteRef.value.name = value
  }
})
</script>
