<template>
  <RouterLink
    :to="route"
    class="p-4 rounded-lg bg-white dark:bg-gray-800 shadow-md text-gray-800 dark:text-gray-300"
  >
    <div class="flex items-center justify-between mb-2" v-if="qrCodeDoc">
      <div class="flex items-center gap-2">
        <QRCodePlacementIcon :placement="qrCodeDoc.placement" />
        <h2 class="text-lg font-semibold text-gray-900 dark:text-gray-100">
          {{ qrCodeDoc.name }}
        </h2>
      </div>
    </div>
    <div class="text-gray-500 dark:text-gray-400">
      <span class="text-nowrap">{{ formatedCreatedAt }}</span>
    </div>
  </RouterLink>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ChatDocument, QRCodeDocument } from '@hereconnect/types'
import { ROUTE_NAMES } from '@/constants/routes'

const props = defineProps<{
  chatDoc: ChatDocument
  qrCodeDoc?: QRCodeDocument
}>()

const formatDate = (date: string) => {
  // Форматирование даты
  const options: Intl.DateTimeFormatOptions = {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
    hour: 'numeric',
    minute: 'numeric',
  }
  return new Date(date).toLocaleDateString(['ru-RU'], options)
}

const route = computed(() => {
  return {
    name:
      props.chatDoc.role === 'owner' ? ROUTE_NAMES.MANAGE_QR_CODE_CHAT : ROUTE_NAMES.PUBLIC_CHAT,
    params: { qr_code_uri: props.chatDoc.qr_code_uri, chat: props.chatDoc.chat },
  }
})

const formatedCreatedAt = computed(() => formatDate(props.chatDoc.created_at))
</script>
