<script setup>
import dayjs from "dayjs";
import {useSupabaseSelectSomeDocuments} from "~/composables/useSupabase.js";

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

const {type} = props

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


const router = useRouter()
const dataStore = useDataStore()
const profileStore = useProfileStore()
const supabase = useSupabaseClient()

const dataType = dataStore.dataTypes[type]

const documents = ref([])

const setup = async () => {
  if(props.item.documents) {
    documents.value = await useSupabaseSelectSomeDocuments(props.item.documents.map(i => i.id)) || []
  }
}

setup()


const openTab = ref(0)

const renderedPhases = computed(() => {
  console.log(props.item.phases)
  if(type === "projects" && props.item.phases) {
    return props.item.phases.map((phase,index,array) => {

      let isAvailable = false

      if(phase.active) {
        isAvailable = true
      } else if(index > 0 && array[index-1].active ){
        isAvailable = true
      } else if(index > 1 && array[index-1].optional && array[index-2].active){
        isAvailable = true
      } else if(array.findIndex(i => i.active) > index) {
        isAvailable = true
      }


      return {
        ...phase,
        label: phase.optional ? `${phase.label}(optional)`: phase.label,
        disabled: !isAvailable,
        defaultOpen: phase.active ? true : false
      }
    })
  } else {
    return []
  }
})

const changeActivePhase = async (key) => {
  let item = await useSupabaseSelectSingle("projects",props.item.id,'*')

  let phaseLabel = ""

  item.phases = item.phases.map(p => {
    if(p.active) p.active = false

    if(p.key === key) {
      p.active = true
      p.activated_at = dayjs().format()
      p.activated_by = profileStore.activeProfile.id
      phaseLabel = p.label
    }

    return p
  })

  await supabase.from("projects").update({phases: item.phases}).eq("id",item.id)
  const {error} = await supabase.from("historyitems").insert({
    createdBy: profileStore.activeProfile.id,
    tenant: profileStore.currentTenant,
    text: `Aktive Phase zu "${phaseLabel}" gewechselt`,
    project: item.id
  })
}

const invoiceDeliveryNotes = () => {
  router.push(`/createDocument/edit?type=invoices&linkedDocuments=[${props.item.createddocuments.filter(i => i.type === "deliveryNotes").map(i => i.id)}]`)
}

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

  if(props.item.customer) {
    returnString += `&customer=${props.item.customer.id}`
  } else if(type === "customers") {
    returnString += `&customer=${props.item.id}`
  }

  if(props.item.project) {
    returnString += `&project=${props.item.project.id}`
  } else if(type === "projects") {
    returnString += `&project=${props.item.id}`
  }

  return returnString

}

</script>

<template>
  <UDashboardNavbar
      :ui="{center: 'flex items-stretch gap-1.5 min-w-0'}"
  >
    <template #left>
      <UButton
          icon="i-heroicons-chevron-left"
          variant="outline"
          @click="router.push(`/standardEntity/${type}`)"
      >
        {{dataType.label}}
      </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>
      <ButtonWithConfirm
          color="rose"
          variant="outline"
          @confirmed="dataStore.updateItem(type,{...item, archived: true})"
      >
        <template #button>
          Archivieren
        </template>
        <template #header>
          <span class="text-md text-black font-bold">Archivieren bestätigen</span>
        </template>
        Möchten Sie das Fahrzeug {{item.name}} wirklich archivieren?
      </ButtonWithConfirm>
      <UButton
          @click="router.push(`/standardEntity/${type}/edit/${item.id}`)"
      >
        Bearbeiten
      </UButton>
    </template>
  </UDashboardNavbar>
  <UDashboardPanelContent>

  </UDashboardPanelContent>
  <UTabs
      :items="dataType.showTabs"
      v-if="props.item.id"
      class="p-5"
      v-model="openTab"
  >
    <template #item="{item}">
      <div class="scroll">
        <div v-if="item.label === 'Informationen'" class="flex flex-row mt-5">
          <UCard class="w-1/2 mr-5">
            <UAlert
                v-if="item.archived"
                color="rose"
                variant="outline"
                :title="`${dataType.labelSingle} archiviert`"
                icon="i-heroicons-light-bulb"
                class="mb-5"
            />
            <div class="text-wrap">
              <table class="w-full">
                <tbody>
                <tr
                    v-for="datapoint in dataType.templateColumns"
                >
                  <td>{{datapoint.label}}:</td>
                  <td>
                    <component v-if="datapoint.component" :is="datapoint.component" :row="props.item" :in-show="true"></component>
                    <div v-else>
                      <span v-if="datapoint.key.includes('.')">{{props.item[datapoint.key.split('.')[0]][datapoint.key.split('.')[1]]}}{{datapoint.unit}}</span>
                      <span v-else>{{props.item[datapoint.key]}} {{datapoint.unit}}</span>
                    </div>
                  </td>
                </tr>
                </tbody>

              </table>
            </div>

          </UCard>
          <UCard class="w-1/2">
            <HistoryDisplay
                :type="type.substring(0,type.length-1)"
                v-if="props.item.id"
                :element-id="props.item.id"
                render-headline
            />
          </UCard>
        </div>
        <div v-else-if="item.label === 'Dokumente'">
          <UCard class="mt-5">
            <Toolbar>
              <DocumentUpload
                  :type="type.substring(0,type.length-1)"
                  :element-id="item.id"
              />
            </Toolbar>

            <DocumentList
                :documents="documents"
            />
          </UCard>
        </div>
        <div v-else-if="item.label === 'Projekte'">
          <UCard class="mt-5">
            <Toolbar>
              <UButton
                  @click="router.push(`/standardEntity/projects/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
              >
                + Projekt
              </UButton>
            </Toolbar>
            <UTable
                :rows="props.item.projects"
                @select="(row) => router.push(`/standardEntity/projects/show/${row.id}`)"
                :columns="[{label: 'Name', key: 'name'},{label: 'Phase', key: 'phase'}]"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Projekte' }"

            >
              <template #phase-data="{row}">
                {{row.phases ? row.phases.find(i => i.active).label : ""}}
              </template>
            </UTable>

          </UCard>
        </div>
        <div v-else-if="item.label === 'Objekte'">
          <UCard class="mt-5">
            <Toolbar>
              <UButton
                  @click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
              >
                + Objekt
              </UButton>
              <UButton
                  v-if="type === 'customers'"
                  @click="router.push(`/standardEntity/plants/create?${type.substring(0,type.length-1)}=${props.item.id}&name=${encodeURIComponent(`${props.item.infoData.street}, ${props.item.infoData.zip} ${props.item.infoData.city}`)}`)"
              >
                + Kundenadresse als Objekt
              </UButton>
            </Toolbar>
            <UTable
                :rows="props.item.plants"
                @select="(row) => router.push(`/standardEntity/plants/show/${row.id}`)"
                :columns="[{label: 'Name', key: 'name'}]"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Objekte' }"

            >

            </UTable>
          </UCard>
        </div>
        <div v-else-if="item.label === 'Aufgaben'">
          <UCard class="mt-5">
            <Toolbar>
              <UButton
                  @click="router.push(`/standardEntity/tasks/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
              >
                + Aufgabe
              </UButton>
            </Toolbar>
            <UTable
                :rows="props.item.tasks"
                @select="(row) => router.push(`/standardEntity/tasks/show/${row.id}`)"
                :columns="[{label: 'Name', key: 'name'}]"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Aufgaben' }"
            />
          </UCard>
        </div>
        <div v-else-if="item.label === 'Verträge'">
          <UCard class="mt-5">
            <Toolbar>
              <UButton
                  @click="router.push(`/standardEntity/contracts/create?${type.substring(0,type.length-1)}=${props.item.id}`)"
              >
                + Vertrag
              </UButton>
            </Toolbar>
            <UTable
                :rows="props.item.contracts"
                @select="(row) => router.push(`/standardEntity/contracts/show/${row.id}`)"
                :columns="[{label: 'Name', key: 'name'},{label: 'Aktiv', key: 'active'}]"
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine zugehörigen Verträge' }"

            ></UTable>
          </UCard>
        </div>
        <div v-else-if="item.label === 'Überprüfungen'">
          <UCard class="mt-5">
            <UTable
                :rows="props.item.checks"
                :columns="[{key:'name',label: 'Name'},{key:'rhythm',label: 'Rhythmus'},{key:'description',label: 'Beschreibung'}]"
                class="w-full"
                :ui="{ divide: 'divide-gray-200 dark:divide-gray-800' }"
                @select="(i) => router.push(`/checks/show/${i.id}`) "
                :empty-state="{ icon: 'i-heroicons-circle-stack-20-solid', label: 'Keine Überprüfungen anzuzeigen' }"
            >
              <template #rhythm-data="{row}">
                {{row.distance}}
                <span v-if="row.distanceUnit === 'dayjs'">Tage</span>
                <span v-if="row.distanceUnit === 'years'">Jahre</span>
              </template>
            </UTable>
          </UCard>
        </div>
        <div v-else-if="item.label === 'Phasen'">
          <UCard class="mt-5">
            <UAccordion
                :items="renderedPhases"
            >
              <template #default="{item,index,open}">
                <UButton
                    variant="ghost"
                    :color="item.active ? 'primary' : 'white'"
                    class="mb-1"
                    :disabled="true"
                >
                  <template #leading>
                    <div class="w-6 h-6  flex items-center justify-center -my-1">
                      <UIcon :name="item.icon" class="w-4 h-4 " />
                    </div>
                  </template>

                  <span class="truncate"> {{item.label}}</span>

                  <template #trailing>
                    <UIcon
                        name="i-heroicons-chevron-right-20-solid"
                        class="w-5 h-5 ms-auto transform transition-transform duration-200"
                        :class="[open && 'rotate-90']"
                    />
                  </template>

                </UButton>
              </template>
              <template #item="{item, index}">
                <UCard class="mx-5">
                  <template #header>
                    <span class="dark:text-white text-black">{{item.label}}</span>
                  </template>
                  <InputGroup>
                    <!-- TODO: Reactive Change Phase                  -->
                    <UButton
                        v-if="!item.activated_at && index !== 0 "
                        @click="changeActivePhase(item.key)"
                    >
                      Phase aktivieren
                    </UButton>
                    <UButton
                        v-if="item.active"
                        v-for="button in item.quickactions"
                        @click="router.push(`${button.link}&customer=${itemInfo.customer.id}&project=${itemInfo.id}`)"
                    >
                      {{button.label}}
                    </UButton>
                  </InputGroup>

                  <div>
                    <p v-if="item.activated_at" class="dark:text-white text-black">Aktiviert am: {{dayjs(item.activated_at).format("DD.MM.YY HH:mm")}} Uhr</p>
                    <p v-if="item.activated_by" class="dark:text-white text-black">Aktiviert durch: {{profileStore.getProfileById(item.activated_by).fullName}}</p>
                    <p v-if="item.description" class="dark:text-white text-black">Beschreibung: {{item.description}}</p>
                  </div>
                </UCard>


              </template>
            </UAccordion>
          </UCard>
        </div><div v-else-if="item.label === 'Ausgangsbelege'">
          <UCard class="mt-5">

            <Toolbar>
              <UButton
                @click="router.push(`/createDocument/edit/?type=quotes${getAvailableQueryStringData()}`)"
              >
                + Angebot
              </UButton>
              <UButton
                @click="router.push(`/createDocument/edit/?type=confirmationOrders${getAvailableQueryStringData()}`)"
              >
                + Auftragsbestätigung
              </UButton>
              <UButton
                @click="router.push(`/createDocument/edit/?type=deliveryNotes${getAvailableQueryStringData()}`)"
              >
                + Lieferschein
              </UButton>
              <UButton
                @click="router.push(`/createDocument/edit/?type=advanceInvoices${getAvailableQueryStringData()}`)"
              >
                + Abschlagsrechnung
              </UButton>
              <UButton
                @click="router.push(`/createDocument/edit/?type=invoices${getAvailableQueryStringData()}`)"
              >
                + Rechnung
              </UButton>
              <UButton
                @click="invoiceDeliveryNotes"
                v-if="type === 'projects'"
              >
                Lieferscheine abrechnen
              </UButton>
            </Toolbar>

            <UTable
              :rows="props.item.createddocuments"
              :columns="[{key:'state',label: 'Status'},{key:'documentNumber',label: 'Nummer'},{key:'documentDate',label: 'Datum'},{key:'type',label: 'Typ'}]"
              @select="(i) => router.push(i.state === 'Entwurf' ? `/createDocument/edit/${i.id}`:`/createDocument/show/${i.id}`)"
            >
              <template #documentDate-data="{row}">
                {{dayjs(row.documentDate).format("DD.MM.YY HH:mm")}}
              </template>
              <template #type-data="{row}">
                {{dataStore.documentTypesForCreation[row.type].labelSingle}}
              </template>
            </UTable>

          </UCard>
        </div>
      </div>



    </template>

  </UTabs>

</template>

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

.scroll {
  height: 80vh;
  overflow-y: scroll;
  padding: 0.3em;
}
</style>