<script setup>
definePageMeta({
  layout: "default"
})


import dayjs from "dayjs";


const supabase = useSupabaseClient()
const user = useSupabaseUser()

const dataStore = useDataStore()
const selectedChat = ref({})
const messageText = ref("")
const createMessage = async () => {
  const {data,error} = await supabase
      .from("messages")
      .insert([{
        text: messageText.value,
        origin: user.value.id,
        destination: selectedChat.value.id
      }])
      .select()

  if(error) {
    console.log(error)
  }
  messageText.value = ""
  console.log("OK")
  dataStore.fetchMessages()


}



</script>

<template>
  <div class="flex h-full">
    <div class="w-1/5 mr-2">
      <a
          v-for="chat in dataStore.chats"
          @click="selectedChat = chat"
      >
        <UAlert
            :title="chat.title ? chat.title : chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')"
            :avatar="{alt: chat.members.map(i => { if(i !== user.id) return dataStore.getProfileById(i).fullName}).join(' ')}"
            :color="selectedChat.id === chat.id ? 'primary' : 'white'"
            variant="outline"
        />

      </a>
    </div>
    <div class="w-full">
<!--      <UCard class="h-full" v-if="selectedChat.id">
        <template #header>
          <Placeholder class="h-8"/>
        </template>

        <div class="h-full">
          <UAlert
              v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
              :color="message.origin === user.id ? 'primary' : 'white'"
              variant="outline"
              :avatar="{alt: dataStore.getProfileById(message.origin).fullName}"
              :title="message.text"
              :description="dayjs(message.created_at).isSame(dayjs(), 'day') ? dayjs(message.created_at).format('HH:mm') : dayjs(message.created_at).format('DD.MM.YY HH:mm')"
              class="mb-3"
          />
        </div>

        <template #footer>
          <div class="h-8">
            <UButtonGroup class="w-full">
              <UInput
                  class="flex-auto"
                  placeholder="Neue Nachricht"
                  v-model="messageText"
                  @keyup.enter="createMessage"
              />
              <UButton
                @click="createMessage"
              >
                Senden
              </UButton>
            </UButtonGroup>

          </div>

        </template>
      </UCard>-->

      <div class="w-full  h-full px-5 flex flex-col justify-between" v-if="selectedChat.id">
        <div class="flex flex-col mt-5">

          <div
            v-for="message in dataStore.getMessagesByChatId(selectedChat.id)"
          >
            <div class="flex justify-end mb-4" v-if="message.origin === user.id">
              <div
                  class="mr-2 py-3 px-4 bg-primary-400 rounded-bl-3xl rounded-tl-3xl rounded-tr-xl text-white"
              >
                {{message.text}}
              </div>
              <UAvatar
                :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
                size="md"
              />
            </div>
            <div class="flex justify-start mb-4" v-else>
              <UAvatar
                  :alt="dataStore.getProfileById(message.origin) ? dataStore.getProfileById(message.origin).fullName : ''"
                  size="md"
              />
              <div
                  class="ml-2 py-3 px-4 bg-gray-400 rounded-br-3xl rounded-tr-3xl rounded-tl-xl text-white"
              >
                {{message.text}}
              </div>
            </div>
          </div>
        </div>



        <div class="py-5">
          <UButtonGroup class="w-full">
            <UInput
                variant="outline"
                color="primary"
                placeholder="Neue Nachricht"
                v-model="messageText"
                @keyup.enter="createMessage"
                class="flex-auto"
            />
            <UButton
              @click="createMessage"
            >
              Senden
            </UButton>
          </UButtonGroup>


        </div>
      </div>

    </div>
  </div>


</template>

<style scoped>

</style>