<script setup>
import dayjs from "dayjs"
const props = defineProps({
  type: {
    type: String,
    required: true
  },
  elementId: {
    type: String,
    required: true
  },
  renderHeadline: {
    type: Boolean,
    default: false
  }
})

const auth = useAuthStore()

const toast = useToast()
const showAddHistoryItemModal = ref(false)
const colorMode = useColorMode()

const items = ref([])
const platform = ref("default")

const setup = async () => {

  if(await useCapacitor().getIsPhone()) platform.value = "mobile"

  if(props.type && props.elementId){
    items.value = await useNuxtApp().$api(`/api/resource/${props.type}/${props.elementId}/history`)
  } /*else {

  }*/
}

setup()



const addHistoryItemData = ref({
  text: ""
})

const addHistoryItem = async () => {

  const res = await useNuxtApp().$api(`/api/resource/${props.type}/${props.elementId}/history`, {
    method: "POST",
    body: addHistoryItemData.value
  })




  addHistoryItemData.value = {}
  toast.add({title: "Eintrag erfolgreich erstellt"})
  showAddHistoryItemModal.value = false
  await setup()


}

const renderText = (text) => {
  const regex = /(@\w*)/g

  text = text.replaceAll(regex, "<a class='text-primary-500'>$&</a>")

  return text
}

</script>

<template>
  <UModal
    v-model="showAddHistoryItemModal"

  >
    <UCard class="h-full">
      <template #header>
        <div class="flex items-center justify-between">
          <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
            Eintrag hinzufügen
          </h3>
          <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="showAddHistoryItemModal = false" />
        </div>
      </template>

      <UFormGroup
        label="Text:"
      >
        <UTextarea
          v-model="addHistoryItemData.text"
          @keyup.meta.enter="addHistoryItem"
        />
<!-- TODO: Add Dropdown and Checking for Usernames  -->
<!--        <template #help>
          <UKbd>{{metaSymbol}}</UKbd> <UKbd>Enter</UKbd> Speichern
        </template>-->

      </UFormGroup>


      <template #footer>
        <UButton @click="addHistoryItem">Speichern</UButton>
      </template>
    </UCard>
  </UModal>
  <Toolbar
      v-if="!props.renderHeadline && props.elementId && props.type"
  >
    <UButton
        @click="showAddHistoryItemModal = true"
    >
      + Eintrag
    </UButton>
  </Toolbar>
  <div v-else-if="props.renderHeadline && props.elementId && props.type">
    <div :class="`flex justify-between`">
      <p class=""><span class="text-xl">Logbuch</span> <UBadge variant="outline">{{items.length}}</UBadge></p>
      <UButton
          @click="showAddHistoryItemModal = true"
      >
        + Eintrag
      </UButton>
    </div>
    <UDivider class="my-3"/>
  </div>

  <!-- ITEM LIST  -->
  <div style="height: 90%; overflow-y: scroll">
    <div
        v-if="items.length > 0"
        v-for="(item,index) in items.slice().reverse()"
    >
      <UDivider
          class="my-3"
          v-if="index !== 0"
      />
      <div class="flex items-center gap-3">
        <UAvatar
            v-if="!item.created_by"
            :src="colorMode.value === 'light' ? '/Logo.png' : '/Logo_Dark.png' "
        />
        <UAvatar
            :alt="item.created_by_profile?.full_name"
            v-else
        />
        <div>
          <h3 v-if="item.created_by">{{item.created_by_profile?.full_name}}</h3>
          <h3 v-else>FEDEO Bot</h3>
          <span v-html="renderText(item.text)"/><br>
          <span class="text-gray-500">{{dayjs(item.created_at).format("DD.MM.YY HH:mm")}}</span>
        </div>
      </div>
    </div>
  </div>



</template>

<style scoped>

</style>