<script setup>
import { inject } from 'vue'
import { ICON } from 'src/composables/useHelpers'
import TagEditor from 'src/components/shared/TagEditor.vue'

const props = defineProps({ modelValue: Object }) // { job, subject, address, note, duration, priority, tags, latitude, longitude }
const emit = defineEmits(['update:modelValue', 'confirm', 'cancel'])

const store = inject('store')
const MAPBOX_TOKEN = inject('MAPBOX_TOKEN')
const getTagColor = inject('getTagColor')
const onCreateTag = inject('onCreateTag')
const onUpdateTag = inject('onUpdateTag')
const onRenameTag = inject('onRenameTag')
const onDeleteTag = inject('onDeleteTag')
const searchAddr = inject('searchAddr')
const addrResults = inject('addrResults')
const selectAddr = inject('selectAddr')

function close () { emit('update:modelValue', null); emit('cancel') }
</script>

<template>
<div v-if="modelValue" class="sb-overlay" @click.self="close">
  <div class="sb-modal sb-modal-wo">
    <div class="sb-modal-hdr">
      <span>✏ Modifier la job</span>
      <button class="sb-rp-close" @click="close">✕</button>
    </div>
    <div class="sb-modal-body sb-wo-body">
      <div class="sb-wo-form">
        <div class="sb-form-row">
          <label class="sb-form-lbl">Titre</label>
          <input class="sb-form-input" v-model="modelValue.subject" autofocus />
        </div>
        <div class="sb-form-row">
          <label class="sb-form-lbl">Adresse</label>
          <div class="sb-addr-wrap">
            <input class="sb-form-input" v-model="modelValue.address" placeholder="123 rue Exemple"
                   @input="searchAddr(modelValue.address)" @blur="setTimeout(()=>addrResults.length=0,200)" autocomplete="off" />
            <div v-if="addrResults.length" class="sb-addr-dropdown">
              <div v-for="a in addrResults" :key="a.address_full" class="sb-addr-item"
                   @mousedown.prevent="selectAddr(a, modelValue)">
                <strong>{{ a.address_full }}</strong>
                <span v-if="a.code_postal" class="sb-addr-cp">{{ a.code_postal }}</span>
                <span v-if="a.ville" class="sb-addr-city">{{ a.ville }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="sb-form-row">
          <label class="sb-form-lbl">Note</label>
          <textarea class="sb-form-input" v-model="modelValue.note" rows="2" placeholder="Ex: chien dangereux, sonner 2x…" style="resize:vertical"></textarea>
        </div>
        <div class="sb-form-row">
          <label class="sb-form-lbl">Durée (h)</label>
          <input type="number" class="sb-form-input" v-model.number="modelValue.duration" min="0.25" max="24" step="0.25" />
        </div>
        <div class="sb-form-row">
          <label class="sb-form-lbl">Priorité</label>
          <select class="sb-form-sel" v-model="modelValue.priority">
            <option value="low">Basse</option>
            <option value="medium">Moyenne</option>
            <option value="high">Haute</option>
          </select>
        </div>
        <div class="sb-form-row">
          <label class="sb-form-lbl">Tags / Skills</label>
          <TagEditor v-model="modelValue.tags" :all-tags="store.allTags" :get-color="getTagColor"
                    @create="onCreateTag" @update-tag="onUpdateTag" @rename-tag="onRenameTag" @delete-tag="onDeleteTag" />
        </div>
      </div>
      <div v-if="modelValue.latitude" class="sb-wo-minimap">
        <img :src="'https://api.mapbox.com/styles/v1/mapbox/dark-v11/static/pin-s+6366f1('+modelValue.longitude+','+modelValue.latitude+')/'+modelValue.longitude+','+modelValue.latitude+',14,0/280x280@2x?access_token='+MAPBOX_TOKEN"
             alt="Carte" class="sb-minimap-img" />
      </div>
    </div>
    <div class="sb-modal-ftr">
      <button class="sbf-primary-btn" @click="emit('confirm')">✓ Enregistrer</button>
      <button class="sb-rp-btn" @click="close">Annuler</button>
    </div>
  </div>
</div>
</template>
