<script setup>

const props = defineProps({
  queryStringData: {
    type: String
  },
  item: {
    type: Object,
    required: true
  },
  tabLabel: {
    type: String,
    required: true
  },
  type: {
    type: String,
  },
  topLevelType: {
    type: String,
    required: true
  },
  platform: {
    type: String,
    required: true
  }
})

let type = ref("")



const dataStore = useDataStore()
const tempStore = useTempStore()

const router = useRouter()

let dataType = null

const selectedColumns = ref(null)
const columns = computed(() => dataType.templateColumns.filter((column) => !column.disabledInTable && selectedColumns.value.find(i => i.key === column.key)))

const loaded = ref(false)

const setup = () => {
  if(!props.type && props.tabLabel ) {
    if(props.tabLabel === "Aufgaben") {
      type.value = "tasks"
    } else if(props.tabLabel === "Projekte") {
      type.value = "projects"
    } else if(props.tabLabel === "Termine") {
      type.value = "events"
    } else if(props.tabLabel === "Objekte") {
      type.value = "plants"
    } else if(props.tabLabel === "Ansprechpartner") {
      type.value = "contacts"
    } else if(props.tabLabel === "Verträge") {
      type.value = "contracts"
    } else if(props.tabLabel === "Überprüfungen") {
      type.value = "checks"
    }
  } else {
    type.value = props.type
  }

  dataType = dataStore.dataTypes[type.value]

  selectedColumns.value = tempStore.columns[type.value] ? tempStore.columns[type.value] : dataType.templateColumns.filter(i => !i.disabledInTable)

  loaded.value = true
}

setup()


</script>

<template>
  <UCard class="mt-5" v-if="loaded" :style="props.platform !== 'mobile' ? 'height: 80vh' : ''">
    <template #header v-if="props.platform === 'mobile'">
      <span>{{dataType.label}}</span>
    </template>
    <Toolbar>
      <UButton
          @click="router.push(`/standardEntity/${type}/create?${props.queryStringData}`)"
      >
        + {{dataType.labelSingle}}
      </UButton>
      <UButton
          v-if="props.topLevelType === 'customers' && type === 'plants'"
          @click="router.push(`/standardEntity/plants/create?${props.queryStringData}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
      >
        + Kundenadresse als Objekt
      </UButton>

      <template #right>
        <USelectMenu
            v-model="selectedColumns"
            icon="i-heroicons-adjustments-horizontal-solid"
            :options="dataType.templateColumns.filter(i => !i.disabledInTable)"
            multiple
            class="hidden lg:block"
            by="key"
            :color="selectedColumns.length !== dataType.templateColumns.filter(i => !i.disabledInTable).length ? 'primary' : 'white'"
            :ui-menu="{ width: 'min-w-max' }"
            @change="tempStore.modifyColumns(type,selectedColumns)"
        >
          <template #label>
            Spalten
          </template>
        </USelectMenu>
      </template>

    </Toolbar>
    <EntityTable
      :type="type"
      :columns="columns"
      :rows="props.item[type]"
      style
    />
  </UCard>

</template>

<style scoped>

</style>