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


import dayjs from "dayjs";


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

const dataStore = useDataStore()
const profileStore = useProfileStore()
const selectedChat = ref({})
const messageText = ref("")

</script>

<template>
  <div class="flex h-full">
    <div class="w-1/5 mr-2 scrollList">
      <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 profileStore.getProfileById(i).fullName}).join(' ')"
            :avatar="{alt: chat.members.map(i => { if(i !== user.id) return profileStore.getProfileById(i).fullName}).join(' ')}"
            :color="selectedChat.id === chat.id ? 'primary' : 'white'"
            variant="outline"
        >
          <template #title="{title}">
            {{title}} <!-- TODO: Add Unread Counter  <UBadge class="ml-1">{{dataStore.getMessagesByChatId(chat.id).filter(i => !i.read ).length}}</UBadge>-->
          </template>
        </UAlert>

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

        <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="profileStore.getProfileById(message.origin) ? profileStore.getProfileById(message.origin).fullName : ''"
                size="md"
            />
          </div>
          <div class="flex justify-start mb-4" v-else>
            <UAvatar
                :alt="profileStore.getProfileById(message.origin) ? profileStore.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="dataStore.createNewItem('messages',{
                  text: messageText,
                  origin: user.id,
                  destination: selectedChat.id
                })"
              class="flex-auto"
          />
          <UButton
              @click="dataStore.createNewItem('messages',{
                  text: messageText,
                  origin: user.id,
                  destination: selectedChat.id
                })"
          >
            Senden
          </UButton>
        </UButtonGroup>


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


</template>

<style scoped>

</style>