<script setup>

import {useFunctions} from "~/composables/useFunctions.js";
import dayjs from "dayjs";

const profileStore = useProfileStore()
const toast = useToast()
const auth = useAuthStore()

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

const setup = async () => {
  itemInfo.value = await useEntities("tickets").selectSingle(useRoute().params.id,"*, ticketmessages(*), created_by(*)")
  loaded.value = true
}

setup()

const messageContent = ref("")

const addMessage = async () => {
  const res = await useEntities("ticketmessages").create({
    auth_user: auth.user.user_id,
    content: messageContent.value,
    ticket: itemInfo.value.id,
    internal: false,
    type: "Nachricht"
  })
}



</script>

<template>
  <UDashboardNavbar title="Support Ticket">
    <template #badge>
      <UBadge
        variant="outline"
        v-if="itemInfo.status === 'Offen'"
        color="yellow"
      >{{itemInfo.status}}</UBadge>
      <UBadge
        variant="outline"
        v-if="itemInfo.status === 'Geschlossen'"
        color="primary"
      >{{itemInfo.status}}</UBadge>
    </template>
    <template #center>
      {{itemInfo.title}}
    </template>
    <template #right />
  </UDashboardNavbar>
  <UDashboardPanelContent v-if="loaded">

    <UAlert
        v-for="item in itemInfo.ticketmessages.filter(i => !i.internal)"
        :title="`${item.type}`"
        class="mb-3"
        :color="item.profile.tenant === 5 ? 'primary' : 'white'"
        variant="outline"
    >
      <template #description>
        <p>{{item.content}}</p>
        <p class="mt-1 text-gray-600 dark:text-gray-400">{{dayjs(item.created_at).format("DD.MM.YYYY HH:mm")}}</p>
      </template>
    </UAlert>

    <InputGroup>
      <UTextarea
        class="w-full mr-2"
        placeholder="Neue Nachricht senden"
        v-model="messageContent"
      />
      <UButton
        @click="addMessage"
      >
        Senden
      </UButton>
    </InputGroup>

  </UDashboardPanelContent>
  <UProgress animation="carousel" v-else class="w-3/4 mx-auto"/>



</template>

<style scoped>

</style>
