<script setup>
import dayjs from "dayjs";
import MaterialComposing from "~/components/materialComposing.vue";
import PersonalComposing from "~/components/personalComposing.vue";

const props = defineProps({
  type: {
    required: true,
    type: String
  },
  mode: {
    required: true,
    type: String
  },
  createQuery: {
    type: Object
  },
  item: {
    required: true,
    type: Object
  },
  inModal: {
    type: Boolean,
  }
})

const emit = defineEmits(["returnData"])


const {type} = props

defineShortcuts({
  'backspace': () => {
    router.push(`/${type}`)
  },
  'arrowleft': () => {
    if(openTab.value > 0){
      openTab.value -= 1
    }
  },
  'arrowright': () => {
    if(openTab.value < 3) {
      openTab.value += 1
    }
  },
})


const router = useRouter()
const route = useRoute()
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()
const modal = useModal()

const dataType = dataStore.dataTypes[type]
const openTab = ref(0)

const item = ref(JSON.parse(props.item))
console.log(item.value)

const oldItem = ref(null)
const generateOldItemData = () => {
  oldItem.value = JSON.parse(props.item)
}
generateOldItemData()


const setupCreate = () => {
  dataType.templateColumns.forEach(datapoint => {
    if(datapoint.key.includes(".")){
      !item.value[datapoint.key.split(".")[0]] ? item.value[datapoint.key.split(".")[0]] = {} : null
    }

    if(datapoint.inputType === "editor") {
      if(datapoint.key.includes(".")){
        item.value[datapoint.key.split(".")[0]][datapoint.key.split(".")[1]] = {}
      } else {
        item.value[datapoint.key] = {}
      }


    }

  })
}
setupCreate()

const setupQuery = () => {
  console.log("setupQuery")
  console.log(props.mode)
  if(props.mode === "create" && (route.query || props.createQuery)) {

    console.log(route.query)

    let data = !props.inModal ? route.query : props.createQuery

    Object.keys(data).forEach(key => {
      if(dataType.templateColumns.find(i => i.key === key)) {
        if (["customer", "contract", "plant", "contact", "project"].includes(key)) {
          item.value[key] = Number(data[key])
        } else {
          item.value[key] = data[key]
        }
      } else if(key === "resources") {
        /*item.value[key] = data[key]*/
        JSON.parse(data[key]).forEach(async (i) => {
          console.log(i)
          let type = i.substring(0,1)
          let id = i.substring(2,i.length)
          console.log(type)
          console.log(id)
          let holder = ""
          if(type === "P"){
            holder = "profiles"
          } else if(type === "F"){
            holder = "vehicles"
            id = Number(id)
          } else if(type === "I"){
            holder = "inventoryitems"
            id = Number(id)
          } else if(type === "G"){
            holder = "inventoryitemgroups"
          }

          if(typeof item.value[holder] === "object") {
            item.value[holder].push(id)
          } else {
            item.value[holder] = [id]
          }


        })


      }
    })
  }
}
setupQuery()

const loadedOptions = ref({})
const loadOptions = async () => {
  let optionsToLoad = dataType.templateColumns.filter(i => i.selectDataType).map(i => {
    return {
      option: i.selectDataType,
      key: i.key
    }
  })

  for await(const option of optionsToLoad) {
    if(option.option === "countrys") {
      loadedOptions.value[option.option] = (await supabase.from("countrys").select()).data
    } else if(option.option === "units") {
      loadedOptions.value[option.option] = (await supabase.from("units").select()).data
    } else {
      loadedOptions.value[option.option] = (await useSupabaseSelect(option.option))

      if(dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter){
        loadedOptions.value[option.option] = loadedOptions.value[option.option].filter(i => dataType.templateColumns.find(x => x.key === option.key).selectDataTypeFilter(i, item))
      }
    }
  }
}

loadOptions()

const contentChanged = (content, datapoint) => {
  if(datapoint.key.includes(".")){
    item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html = content.html
    item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].text = content.text
    item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].json = content.json
  } else {
    item[datapoint.key].html = content.html
    item[datapoint.key].text = content.text
    item[datapoint.key].json = content.json
  }
}

const saveAllowed = ref(false)
const calcSaveAllowed = (item) => {
  let allowedCount = 0

  dataType.templateColumns.filter(i => i.inputType).forEach(datapoint => {
    if(datapoint.required) {

      if(datapoint.key.includes(".")){
        if(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]) allowedCount += 1
      } else {
        if(item[datapoint.key]) allowedCount += 1
      }
    } else {
      allowedCount += 1
    }
  })

  saveAllowed.value = allowedCount >= dataType.templateColumns.filter(i => i.inputType).length
}
//calcSaveAllowed()

watch(item.value, async (newItem, oldItem) => {
  calcSaveAllowed(newItem)
})

const createItem = async () => {
  let ret = null

  if(props.inModal) {
    ret = await dataStore.createNewItem(type,item.value,true)
  } else {
    ret = dataStore.createNewItem(type,item.value)
  }

  emit('returnData', ret)
}

const updateItem = async () => {
  let ret = null

  if(props.inModal) {
    ret = await dataStore.updateItem(type,item.value, oldItem.value,true)
  } else {
    ret = await dataStore.updateItem(type,item.value, oldItem.value)
  }

  emit('returnData', ret)
}


</script>

<template>
  <UDashboardNavbar
      v-if="!props.inModal"
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.back()/*router.push(`/standardEntity/${type}`)*/"
      >
<!--        {{dataType.label}}-->
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="item"
          :class="['text-xl','font-medium']"
      >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
    </template>
    <template #right>
      <ButtonWithConfirm
          color="rose"
          variant="outline"
          @confirmed="dataStore.updateItem(type,{...item,archived: true}, oldItem)"
      >
        <template #button>
          Archivieren
        </template>
        <template #header>
          <span class="text-md text-black dark:text-white font-bold">Archivieren bestätigen</span>
        </template>
        Möchten Sie das {{dataType.labelSingle}} {{item[dataType.templateColumns.find(i => i.title).key]}} wirklich archivieren?
      </ButtonWithConfirm>
      <UButton
          v-if="item.id"
          @click="updateItem"
          :disabled="!saveAllowed"
      >
        Speichern
      </UButton>
      <UButton
          v-else
          @click="createItem"
          :disabled="!saveAllowed"
      >
        Erstellen
      </UButton>
      <UButton
          @click="router.push(item.id ? `/standardEntity/${type}/show/${item.id}` : `/standardEntity/${type}`)"
          color="red"
          class="ml-2"
      >
        Abbrechen
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardNavbar
      v-else
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #center>
      <h1
          v-if="item"
          :class="['text-xl','font-medium']"
      >{{item.id ? `${dataType.labelSingle} bearbeiten` : `${dataType.labelSingle} erstellen` }}</h1>
    </template>
    <template #right>
      <UButton
          v-if="item.id"
          @click="updateItem"
          :disabled="!saveAllowed"
      >
        Speichern
      </UButton>
      <UButton
          v-else
          @click="createItem"
          :disabled="!saveAllowed"
      >
        Erstellen
      </UButton>
      <UButton
          @click="modal.close()"
          color="red"
          class="ml-2"
          icon="i-heroicons-x-mark"
          variant="outline"
      />
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>
    <UForm
        class="p-5"
    >
      <div class="flex flex-row">
        <div
            v-for="(columnName,index) in dataType.inputColumns"
            :class="['w-1/2', ... index < dataType.inputColumns.length -1 ? ['mr-5'] : []]"
        >
          <UDivider>{{columnName}}</UDivider>

          <!--
           Die Form Group darf nur in der ersten bearbeitet werden und muss dann runterkopiert werden
           -->


          <UFormGroup
              v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && i.inputColumn === columnName)"
              :label="datapoint.label"
          >
            <template #help>
              <component
                  v-if="datapoint.helpComponent"
                  :is="datapoint.helpComponent"
                  :item="item"
              />
            </template>
            <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
              <UInput
                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                  class="flex-auto"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-if="['text','number'].includes(datapoint.inputType)"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  :type="datapoint.inputType"
                  :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
              >
                <template #trailing v-if="datapoint.inputTrailing">
                  <span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
                </template>
              </UInput>
              <UToggle
                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-else-if="datapoint.inputType === 'bool'"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
              <USelectMenu
                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                  class="flex-auto"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-else-if="datapoint.inputType === 'select'"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  :option-attribute="datapoint.selectOptionAttribute"
                  :value-attribute="datapoint.selectValueAttribute || 'id'"
                  :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
                  :searchable="datapoint.selectSearchAttributes"
                  :search-attributes="datapoint.selectSearchAttributes"
                  :multiple="datapoint.selectMultiple"
              >
                <template #empty>
                  Keine Optionen verfügbar
                </template>
              </USelectMenu>
              <UTextarea
                  :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                  class="flex-auto"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-else-if="datapoint.inputType === 'textarea'"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  rows="4"
              />
              <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
                <UButton
                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                    icon="i-heroicons-calendar-days-20-solid"
                    :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                    variant="outline"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

                />

                <template #panel="{ close }">
                  <LazyDatePicker
                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                      v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  />
                </template>
              </UPopover>
              <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
                <UButton
                    :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                    icon="i-heroicons-calendar-days-20-solid"
                    :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                    variant="outline"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

                />

                <template #panel="{ close }">
                  <LazyDatePicker
                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                      v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                      mode="datetime"
                  />
                </template>
              </UPopover>
              <!-- TODO: DISABLED FOR TIPTAP -->
              <Tiptap
                  v-else-if="datapoint.inputType === 'editor'"
                  @updateContent="(i) => contentChanged(i,datapoint)"
                  :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
              />

              <UButton
                  v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
                  @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
                  variant="outline"
                  color="white"
                  icon="i-heroicons-x-mark"
              />
            </InputGroup>
            <InputGroup class="w-full" v-else>
              <UInput
                  class="flex-auto"
                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-if="['text','number'].includes(datapoint.inputType)"
                  v-model="item[datapoint.key]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  :type="datapoint.inputType"
                  :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
              >
                <template #trailing v-if="datapoint.inputTrailing">
                  {{datapoint.inputTrailing}}
                </template>
              </UInput>
              <UToggle
                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-else-if="datapoint.inputType === 'bool'"
                  v-model="item[datapoint.key]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
              <USelectMenu
                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                  class="flex-auto"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-else-if="datapoint.inputType === 'select'"
                  v-model="item[datapoint.key]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  :option-attribute="datapoint.selectOptionAttribute"
                  :value-attribute="datapoint.selectValueAttribute || 'id'"
                  :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
                  :searchable="datapoint.selectSearchAttributes"
                  :search-attributes="datapoint.selectSearchAttributes"
                  :multiple="datapoint.selectMultiple"
                  searchable-placeholder="Suche..."
              >
                <template #empty>
                  Keine Optionen verfügbar
                </template>
              </USelectMenu>
              <UTextarea
                  :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                  class="flex-auto"
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-else-if="datapoint.inputType === 'textarea'"
                  v-model="item[datapoint.key]"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  rows="4"
              />
              <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
                <UButton
                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                    icon="i-heroicons-calendar-days-20-solid"
                    :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                    variant="outline"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />

                <template #panel="{ close }">
                  <LazyDatePicker
                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                      v-model="item[datapoint.key]" @close="close"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  />
                </template>
              </UPopover>
              <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
                <UButton
                    :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                    icon="i-heroicons-calendar-days-20-solid"
                    :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                    variant="outline"
                    :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                />

                <template #panel="{ close }">
                  <LazyDatePicker
                      @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                      v-model="item[datapoint.key]"
                      @close="close"
                      :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                      mode="datetime"
                  />
                </template>
              </UPopover>
              <!-- TODO: Color/Required for TipTap and MaterialComposing -->
              <Tiptap
                  v-else-if="datapoint.inputType === 'editor'"
                  @updateContent="(i) => contentChanged(i,datapoint)"
                  :preloadedContent="item[datapoint.key].html"
              />


              <MaterialComposing
                  v-else-if="datapoint.inputType === 'materialComposing'"
                  :item="item"
              />
              <PersonalComposing
                  v-else-if="datapoint.inputType === 'personalComposing'"
                  :item="item"
              />

              <UButton
                  v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
                  @click="item[datapoint.key] = null"
                  variant="outline"
                  color="white"
                  icon="i-heroicons-x-mark"
              />
            </InputGroup>
            <!--        <div
                        v-if="profileStore.ownTenant.ownFields"
                    >
                      <UDivider
                          class="mt-3"
                      >Eigene Felder</UDivider>

                      <UFormGroup
                          v-for="field in profileStore.ownTenant.ownFields.contracts"
                          :key="field.key"
                          :label="field.label"
                      >
                        <UInput
                            v-if="field.type === 'text'"
                            v-model="item.ownFields[field.key]"
                        />
                        <USelectMenu
                            v-else-if="field.type === 'select'"
                            :options="field.options"
                            v-model="item.ownFields[field.key]"
                        />
                      </UFormGroup>
                    </div>-->

          </UFormGroup>
        </div>
      </div>
      <UFormGroup
          v-for="datapoint in dataType.templateColumns.filter(i => i.inputType && !i.inputColumn)"
          :label="datapoint.label"
      >
        <template #help>
          <component
              v-if="datapoint.helpComponent"
              :is="datapoint.helpComponent"
              :item="item"
          />
        </template>
        <InputGroup class="w-full" v-if="datapoint.key.includes('.')">
          <UInput
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-if="['text','number'].includes(datapoint.inputType)"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :type="datapoint.inputType"
              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
          >
            <template #trailing v-if="datapoint.inputTrailing">
              <span class="text-gray-500 dark:text-gray-400 text-xs">{{datapoint.inputTrailing}}</span>
            </template>
          </UInput>
          <UToggle
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'primary'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'bool'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <USelectMenu
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'select'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :option-attribute="datapoint.selectOptionAttribute"
              :value-attribute="datapoint.selectValueAttribute || 'id'"
              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
              :searchable="datapoint.selectSearchAttributes"
              :search-attributes="datapoint.selectSearchAttributes"
              :multiple="datapoint.selectMultiple"
          >
            <template #empty>
              Keine Optionen verfügbar
            </template>
          </USelectMenu>
          <UTextarea
              :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'textarea'"
              v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              rows="4"
          />
          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

            />

            <template #panel="{ close }">
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
            </template>
          </UPopover>
          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? 'primary' : 'rose') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] ? dayjs(item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"

            />

            <template #panel="{ close }">
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]" @close="close"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  mode="datetime"
              />
            </template>
          </UPopover>
          <!-- TODO: DISABLED FOR TIPTAP -->
          <Tiptap
              v-else-if="datapoint.inputType === 'editor'"
              @updateContent="(i) => contentChanged(i,datapoint)"
              :preloadedContent="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]].html"
          />

          <UButton
              v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
              @click="item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]] = null"
              variant="outline"
              color="white"
              icon="i-heroicons-x-mark"
          />
        </InputGroup>
        <InputGroup class="w-full" v-else>
          <UInput
              class="flex-auto"
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-if="['text','number'].includes(datapoint.inputType)"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :type="datapoint.inputType"
              :placeholder="datapoint.inputIsNumberRange ? 'Leer lassen für automatisch generierte Nummer' : ''"
          >
            <template #trailing v-if="datapoint.inputTrailing">
              {{datapoint.inputTrailing}}
            </template>
          </UInput>
          <UToggle
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'primary'"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'bool'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
          />
          <USelectMenu
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'select'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              :option-attribute="datapoint.selectOptionAttribute"
              :value-attribute="datapoint.selectValueAttribute || 'id'"
              :options="datapoint.selectManualOptions || loadedOptions[datapoint.selectDataType]"
              :searchable="datapoint.selectSearchAttributes"
              :search-attributes="datapoint.selectSearchAttributes"
              :multiple="datapoint.selectMultiple"
              searchable-placeholder="Suche..."
          >
            <template #empty>
              Keine Optionen verfügbar
            </template>
          </USelectMenu>
          <UTextarea
              :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
              class="flex-auto"
              @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
              v-else-if="datapoint.inputType === 'textarea'"
              v-model="item[datapoint.key]"
              :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              rows="4"
          />
          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'date'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YYYY') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
            />

            <template #panel="{ close }">
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key]" @close="close"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
              />
            </template>
          </UPopover>
          <UPopover :popper="{ placement: 'bottom-start' }" v-else-if="datapoint.inputType === 'datetime'">
            <UButton
                :color="datapoint.required ? (item[datapoint.key] ? 'primary' : 'rose') : 'white'"
                icon="i-heroicons-calendar-days-20-solid"
                :label="item[datapoint.key] ? dayjs(item[datapoint.key]).format('DD.MM.YY HH:mm') : 'Datum auswählen'"
                variant="outline"
                :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
            />

            <template #panel="{ close }">
              <LazyDatePicker
                  @change="datapoint.inputChangeFunction ? datapoint.inputChangeFunction(item,loadedOptions) : null"
                  v-model="item[datapoint.key]"
                  @close="close"
                  :disabled="datapoint.disabledFunction ? datapoint.disabledFunction(item) : false"
                  mode="datetime"
              />
            </template>
          </UPopover>
          <!-- TODO: Color/Required for TipTap and MaterialComposing -->
          <Tiptap
              v-else-if="datapoint.inputType === 'editor'"
              @updateContent="(i) => contentChanged(i,datapoint)"
              :preloadedContent="item[datapoint.key].html"
          />


          <MaterialComposing
            v-else-if="datapoint.inputType === 'materialComposing'"
            :item="item"
          />
          <PersonalComposing
              v-else-if="datapoint.inputType === 'personalComposing'"
              :item="item"
          />

          <UButton
              v-if="['text','number','select','date','datetime','textarea'].includes(datapoint.inputType)"
              @click="item[datapoint.key] = null"
              variant="outline"
              color="white"
              icon="i-heroicons-x-mark"
          />
        </InputGroup>
<!--        <div
            v-if="profileStore.ownTenant.ownFields"
        >
          <UDivider
              class="mt-3"
          >Eigene Felder</UDivider>

          <UFormGroup
              v-for="field in profileStore.ownTenant.ownFields.contracts"
              :key="field.key"
              :label="field.label"
          >
            <UInput
                v-if="field.type === 'text'"
                v-model="item.ownFields[field.key]"
            />
            <USelectMenu
                v-else-if="field.type === 'select'"
                :options="field.options"
                v-model="item.ownFields[field.key]"
            />
          </UFormGroup>
        </div>-->

      </UFormGroup>
    </UForm>
  </UDashboardPanelContent>
</template>

<style scoped>
td {
  border-bottom: 1px solid lightgrey;
  vertical-align: top;
  padding-bottom: 0.15em;
  padding-top: 0.15em;
}
</style>