<script setup>

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

const {type} = props

defineShortcuts({
  'backspace': () => {
    router.back()
  },
  'arrowleft': () => {
    if(openTab.value > 0){
      openTab.value -= 1
      router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
    }
  },
  'arrowright': () => {
    if(openTab.value < dataType.showTabs.length - 1) {
      openTab.value += 1
      router.push(`${router.currentRoute.value.path}?tabIndex=${openTab.value}`)
    }
  },
})

const emit = defineEmits(["updateNeeded"])

const router = useRouter()
const route = useRoute()
const dataStore = useDataStore()
const modal = useModal()

const dataType = dataStore.dataTypes[type]

const openTab = ref(route.query.tabIndex || 0)



const getAvailableQueryStringData = (keys) => {
  let returnString =""

  function addParam (key,value) {
    if(returnString.length  === 0) {
      returnString += `${key}=${value}`
    } else {
      returnString += `&${key}=${value}`

    }
  }


  if(props.item.customer) {
    addParam("customer", props.item.customer.id)
  } else if(type === "customers") {
    addParam("customer", props.item.id)
  }

  if(props.item.project) {
    addParam("project", props.item.project.id)
  } else if(type === "projects") {
    addParam("project", props.item.id)
  }

  if(props.item.plant) {
    addParam("plant", props.item.plant.id)
  } else if(type === "plants") {
    addParam("plant", props.item.id)
  }

  if(keys) {
    Object.keys(keys).forEach(key => {
      addParam(key, keys[key])
    })
  }

  return returnString

}

const onTabChange = (index) => {
  router.push(`${router.currentRoute.value.path}?tabIndex=${index}`)
}

</script>

<template>
  <UDashboardNavbar
      v-if="props.inModal"
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #center>
      <h1
          v-if="item"
          :class="['text-xl','font-medium']"
      >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
    </template>
    <template #right>
      <UButton
          @click="modal.close()"
          color="red"
          class="ml-2"
          icon="i-heroicons-x-mark"
          variant="outline"
      />
    </template>
  </UDashboardNavbar>
  <UDashboardNavbar
      v-else-if="!props.inModal && platform !== 'mobile'"
      :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}`)*/"
      >
          Zurück
      </UButton>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/standardEntity/${type}`)"
      >
          Übersicht
      </UButton>
    </template>
    <template #center>
      <h1
          v-if="item"
          :class="['text-xl','font-medium']"
      >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
    </template>
    <template #right>
      <UButton
          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
      >
        Bearbeiten
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardNavbar
      v-else-if="!props.inModal && platform === 'mobile'"
      :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}`)*/"
      >
          Zurück
      </UButton>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/standardEntity/${type}`)"
      >
          Übersicht
      </UButton>
    </template>-->
    <template #toggle>
      <div></div>
    </template>
    <template #center>
      <h1
          v-if="item"
          :class="['text-xl','font-medium','text-truncate']"
      >{{item ? `${dataType.labelSingle}${props.item[dataType.templateColumns.find(i => i.title).key] ? ': ' + props.item[dataType.templateColumns.find(i => i.title).key] : ''}`: '' }}</h1>
    </template>
    <template #right>
      <UButton
          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
      >
        Bearbeiten
      </UButton>
    </template>
  </UDashboardNavbar>

  <UTabs
      :items="dataType.showTabs"
      v-if="props.item.id && platform !== 'mobile'"
      class="p-5"
      v-model="openTab"
      @change="onTabChange"
  >
    <template #item="{item:tab}">
      <div v-if="tab.label === 'Informationen'" class="flex flex-row">

        <EntityShowSubInformation
            :top-level-type="type"
            :item="props.item"
            class="w-1/2 mr-5"
            :platform="platform"
        />

        <EntityShowSubHistoryDisplay
            :top-level-type="type"
            :item="props.item"
            class="w-1/2"
            :platform="platform"
        />
      </div>

      <EntityShowSubFiles
          :item="props.item"
          :query-string-data="getAvailableQueryStringData()"
          v-else-if="tab.label === 'Dateien'"
          :top-level-type="type"
          type="files"
          @updateNeeded="emit('updateNeeded')"
          :platform="platform"
      />
      <EntityShowSubPhases
          :item="props.item"
          :top-level-type="type"
          v-else-if="tab.label === 'Phasen'"
          :query-string-data="getAvailableQueryStringData()"
          @updateNeeded="emit('updateNeeded')"
          :platform="platform"
      />
      <EntityShowSubCreatedDocuments
          :item="props.item"
          :top-level-type="type"
          v-else-if="tab.label === 'Ausgangsbelege'"
          :query-string-data="getAvailableQueryStringData()"
          :platform="platform"
      />
      <EntityShowSubCostCentreReport
          :top-level-type="type"
          :item="props.item"
          v-else-if="tab.label === 'Auswertung Kostenstelle'"
          :platform="platform"
      />

      <EntityShowSub
          :item="props.item"
          :query-string-data="getAvailableQueryStringData()"
          :tab-label="tab.label"
          :top-level-type="type"
          v-else
          :platform="platform"
      />
    </template>
  </UTabs>
  <UDashboardPanelContent v-else style="overflow-x: hidden;">
    <div v-for="sub in dataType.showTabs" :key="sub.key">
      <div v-if="sub.label === 'Informationen'">

        <EntityShowSubInformation
            :top-level-type="type"
            :item="props.item"
            :platform="platform"
        />

        <EntityShowSubHistoryDisplay
            :top-level-type="type"
            :item="props.item"
            :platform="platform"
        />
      </div>

      <EntityShowSubFiles
          :item="props.item"
          :query-string-data="getAvailableQueryStringData()"
          v-else-if="sub.label === 'Dateien'"
          :top-level-type="type"
          type="files"
          @updateNeeded="emit('updateNeeded')"
          :platform="platform"
      />
      <EntityShowSubPhases
          :item="props.item"
          :top-level-type="type"
          v-else-if="sub.label === 'Phasen'"
          :query-string-data="getAvailableQueryStringData()"
          @updateNeeded="emit('updateNeeded')"
          :platform="platform"
      />
      <EntityShowSubCreatedDocuments
          :item="props.item"
          :top-level-type="type"
          v-else-if="sub.label === 'Ausgangsbelege'"
          :query-string-data="getAvailableQueryStringData()"
          :platform="platform"
      />
      <EntityShowSubCostCentreReport
          :top-level-type="type"
          :item="props.item"
          v-else-if="sub.label === 'Auswertung Kostenstelle'"
          :platform="platform"
      />

      <EntityShowSub
          :item="props.item"
          :query-string-data="getAvailableQueryStringData()"
          :tab-label="sub.label"
          :top-level-type="type"
          v-else
          :platform="platform"
      />
    </div>

  </UDashboardPanelContent>

</template>

<style scoped>


</style>