<template>
  <pn-page-template>
    <template #title>
      {{ $t('chat_card__title') }}
    </template>
    
    <template #card-actions>
      <q-btn
        rounded color="primary"
        class="w100"
        @click="onSubmit"
        v-if="chat"
        >
        {{ $t("chat_card__go_chat") }}
      </q-btn>
    </template>

    <div
      v-if="chat"
      class="flex column items-center q-px-md q-pt-md q-pb-sm"
      >
      <pn-auto-avatar
        :img="chat.logo"
        :name="chat.name"
        size="100px"
        rounded
      />
      <div
        class="flex row items-start justify-center q-pt-md text-bold text-center"
        >
        {{ chat.name }}
      </div>
      <div
        v-if="chat.description"
        class="flex row items-start justify-center text-caption text-center text-grey"
        >
        {{ chat.description }}
      </div>
    </div>
    <div class="q-pb-md w100" v-if="chat">
      <pn-chat-type-item
        :access="chat.bot_access"
        :time="chat.bot_access_date"
      />
      <pn-chat-type-item
        v-if="chat.state !== 1"
        :state="chat.state"
        :time="chat.state_date ?? 0"
      />
    </div>

    <q-list v-if="chatUsers.length !== 0">
      <q-item-label class="text-caption text-bold q-py-none" header>
        {{ $t('chat_card__members') + ' (' + chatUsers.length +')' }}
      </q-item-label>
      <q-item
        v-for="item in chatUsers"
        :key="item.id"
        v-ripple
        clickable
        class="w100"
        @click="goUserInfo(item.id)"
        >
        <pn-user-list-item-body :item showStatus>
          <q-item-label  class="text-caption text-amber-10" lines="1" v-if="chat?.owner_id === item.id">
            <div class="flex items-center">
              <q-icon name="star" class="q-pr-xs"/>
              {{ $t('chat_card__owner') }}
            </div>
          </q-item-label>
        </pn-user-list-item-body>
      </q-item>
    </q-list>
  </pn-page-template>

</template>

<script setup lang="ts">
  import { ref, computed, watch, inject } from 'vue'
  import { useRouter, useRoute } from 'vue-router'
  import { useChatsStore } from 'stores/chats'
  import { useUsersStore } from 'stores/users'
  import { useCompaniesStore } from 'stores/companies'
  import { parseIntString } from 'utils/helpers'
  import { useUserSection } from 'composables/useUserSection'
  import pnChatTypeItem from 'components/pnChatTypeItem.vue'
  import pnUserListItemBody from 'components/pnUserListItemBody.vue'
  import type { Chat } from 'types/Chat'
  import type { WebApp } from '@twa-dev/types'

  const tg = inject('tg') as WebApp

  const router = useRouter()
  const route = useRoute()
  const chatsStore = useChatsStore()
  const usersStore = useUsersStore()

  const chat = ref<Chat | null>(null)
  const chatId = computed(() => parseIntString(route.params.chatId))

  function initChat() {
    if (chatsStore.isInit && chatId.value) {
      const foundChat = chatsStore.chatById(chatId.value)
      if (foundChat) {
        chat.value = { ...foundChat } as Chat
      }
    }
  }

  if (chatsStore.isInit) initChat()

  watch(() => chatsStore.isInit, initChat)

  function onSubmit () {
    if (chat.value) tg.openTelegramLink('https://t.me/c/' + chat.value.telegram_id + '/' + chat.value.message_id)
  }

  const users = computed(() => usersStore.users)
  const companiesStore = useCompaniesStore()
  const { userSection } = useUserSection()

  const chatUsers = computed(() => {
    if (!chat.value) return []
    const idSet = new Set(chat.value.users)
    const arr = users.value.filter(el => idSet.has(el.id))
    return arr.map(el => ({
      ...el,
      ...userSection(el),
      companyName: 
        (el.company_id && companiesStore.companyById(el.company_id))
        ? companiesStore.companyById(el.company_id)?.name ?? null
        : null
    }))
  })

  async function goUserInfo (id: number) {
    await router.push({ name: 'user_info', params: { id: route.params.id, userId: id }})
  }

</script>
