<script setup>
  const dataStore = useDataStore()

  defineShortcuts({
    '+': () => {
      editTemplateModalOpen.value = true
    }
  })

  const editTemplateModalOpen = ref(false)
  const itemInfo = ref({})



</script>

<template>
  <UDashboardNavbar
    title="Text Vorlagen"
  >
      <template #right>
        <UButton
          @click="editTemplateModalOpen = true"
        >
          + Erstellen
        </UButton>
      </template>
  </UDashboardNavbar>
  <UDashboardToolbar>

  </UDashboardToolbar>
  <UDashboardPanelContent>
    <UCard class="mt-5 mx-5">
      <template #header>
        Variablen
      </template>
      <table>
        <tr>
          <th class="text-left">Variable</th>
          <th class="text-left">Beschreibung</th>
        </tr>
        <tr>
          <td>vorname</td>
          <td>Vorname</td>
        </tr>
        <tr>
          <td>nachname</td>
          <td>Nachname</td>
        </tr>
        <tr>
          <td>zahlungsziel_in_tagen</td>
          <td>Zahlungsziel in Tagen</td>
        </tr>
      </table>

    </UCard>

    <div class="w-3/4 mx-auto mt-5">
      <UCard
          v-for="template in dataStore.texttemplates"
          class="mb-3"
      >
        <p class="text-2xl">{{dataStore.documentTypesForCreation[template.documentType].label}}</p>
        <p class="text-xl">{{template.pos === 'startText' ? 'Einleitung' : 'Ende'}}</p>
        <p class="text-justify">{{template.text}}</p>
        <UButton
            @click="itemInfo = template;
             editTemplateModalOpen = true"
          icon="i-heroicons-pencil-solid"
          variant="outline"
        />
      </UCard>
    </div>
  </UDashboardPanelContent>

  <USlideover
    v-model="editTemplateModalOpen"
  >
    <UCard class="h-full">
      <template #header>
        {{itemInfo.id ? 'Vorlage bearbeiten' : 'Vorlage erstellen'}}
      </template>

      <UForm class="h-full">
        <UFormGroup
          label="Dokumententyp:"
        >
          <USelectMenu
            :options="Object.keys(dataStore.documentTypesForCreation).map(i => {
              return {
                label: dataStore.documentTypesForCreation[i].label,
                key: i
              }
            })"
            v-model="itemInfo.documentType"
          />
        </UFormGroup>
        <UFormGroup
          label="Position:"
        >
          <USelectMenu
            :options="[{label:'Einleitung',key: 'startText'},{label:'Ende',key: 'endText'}]"
            v-model="itemInfo.pos"
          />
        </UFormGroup>
        <UFormGroup
          label="Text:"
        >
          <UTextarea
            v-model="itemInfo.text"
          />
        </UFormGroup>
      </UForm>

      <template #footer>
        <UButton
          @click="dataStore.createNewItem('texttemplates',itemInfo);
                  editTemplateModalOpen = false"
          v-if="!itemInfo.id"
        >Erstellen</UButton>
        <UButton
          @click="dataStore.updateItem('texttemplates',itemInfo);
                  editTemplateModalOpen = false"
          v-if="itemInfo.id"
        >Speichern</UButton>
      </template>
    </UCard>
  </USlideover>



</template>

<style scoped>

</style>