<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"
            :disabled="disabled"
            required
          />
        </div>

        <div class="form-control">
          <label class="label">
            <span class="label-text">Couleur</span>
          </label>
          <div v-if="siteRef.color" class="flex items-center gap-3">
            <input
              :value="siteRef.color"
              type="color"
              class="w-10 h-10 rounded cursor-pointer border border-base-300"
              :disabled="disabled"
              @input="(e: Event) => { siteRef.color = (e.target as HTMLInputElement).value }"
            >
            <input
              v-model="siteRef.color"
              type="text"
              placeholder="#000000"
              class="input input-bordered input-sm flex-1"
              :disabled="disabled"
              maxlength="7"
            >
            <button
              type="button"
              class="btn btn-ghost btn-xs"
              :disabled="disabled"
              @click="siteRef.color = ''"
            >
              Effacer
            </button>
          </div>
          <button
            v-else
            type="button"
            class="btn btn-outline btn-sm w-fit"
            :disabled="disabled"
            @click="siteRef.color = '#3b82f6'"
          >
            Choisir une couleur
          </button>
        </div>

        <SiteContactFormFields :form="siteRef" :disabled="disabled" />

        <div class="modal-action">
          <button type="button" class="btn" @click="emit('close')">
            Annuler
          </button>
          <button type="submit" class="btn btn-primary" :disabled="disabled">
            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
  color: 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
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

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>
