<script setup>
import dayjs from "dayjs"
const props = defineProps({
  type: {
    required: true,
    type: String
  },
  elementId: {
    required: true,
    type: String
  }
})
const dataStore = useDataStore()
const user = useSupabaseUser()
const supabase = useSupabaseClient()
const toast = useToast()
const {type, elementId} = props
const showAddHistoryItemModal = ref(false)
const colorMode = useColorMode()

const historyItems = computed(() => {

  let items = []

  if(type === "customer") {
    items = dataStore.historyItems.filter(i => i.customer === elementId)
  } else if(type === "vendor") {
    items = dataStore.historyItems.filter(i => i.vendor === elementId)
  } else if(type === "project") {
    items = dataStore.historyItems.filter(i => i.project === elementId)
  } else if(type === "plant") {
    items = dataStore.historyItems.filter(i => i.plant === elementId)
  } else if(type === "incomingInvoice") {
    items = dataStore.historyItems.filter(i => i.incomingInvoice === elementId)
  } else if(type === "document") {
    items = dataStore.historyItems.filter(i => i.document === elementId)
  }

  return items.reverse()

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

const addHistoryItem = async () => {
  addHistoryItemData.value.user = user.value.id

  if(type === "customer") {
    addHistoryItemData.value.customer = elementId
  } else if(type === "vendor") {
    addHistoryItemData.value.vendor = elementId
  } else if(type === "project") {
    addHistoryItemData.value.project = elementId
  } else if(type === "plant") {
    addHistoryItemData.value.plant = elementId
  } else if(type === "incomingInvoice") {
    addHistoryItemData.value.incomingInvoice = elementId
  } else if(type === "document") {
    addHistoryItemData.value.document = elementId
  }


  const {data,error} = await supabase
      .from("historyItems")
      .insert([addHistoryItemData.value])
      .select()

  if(error) {
    console.log(error)
  } else {
    toast.add({title: "Eintrag erfolgreich erstellt"})
    showAddHistoryItemModal.value = false
    await dataStore.fetchHistoryItems()
  }

}

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>
      <template #header>
        Eintrag hinzufügen
      </template>

      <UFormGroup
        label="Text:"
      >
        <UTextarea
          v-model="addHistoryItemData.text"
        />
      </UFormGroup>


      <template #footer>
        <UButton @click="addHistoryItem">Hinzufügen</UButton>
      </template>
    </UCard>
  </UModal>
  <UCard class="mt-5">
    <template #header>
      <InputGroup>
        <UButton
          @click="showAddHistoryItemModal = true"
        >
          + Eintrag
        </UButton>
      </InputGroup>
    </template>
    <div
      v-if="historyItems.length > 0"
      v-for="(item,index) in historyItems"
    >
      <UDivider
          class="my-3"
          v-if="index !== 0"
      />
      <div class="flex items-center gap-3">
        <UAvatar
            v-if="!item.user"
            :src="colorMode.value === 'light' ? '/spaces_hell.svg' : '/spaces.svg' "
        />
        <UAvatar
            :alt="dataStore.profiles.find(profile => profile.id === item.user).fullName"
            v-else
        />
        <div>
          <h3 v-if="item.user">{{dataStore.profiles.find(profile => profile.id === item.user) ? dataStore.profiles.find(profile => profile.id === item.user).fullName : ""}}</h3>
          <h3 v-else>Spaces 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>


  </UCard>
</template>

<style scoped>

</style>