<script setup lang="ts">
import { format } from 'date-fns'
import type { Activity } from '~/types'

defineProps<{
  activity: Activity
}>()

const emits = defineEmits(['close'])

const dropdownItems = [[{
  label: 'Mark as unread',
  icon: 'i-lucide-check-circle'
}, {
  label: 'Mark as important',
  icon: 'i-lucide-triangle-alert'
}], [{
  label: 'Star thread',
  icon: 'i-lucide-star'
}, {
  label: 'Mute thread',
  icon: 'i-lucide-circle-pause'
}]]

const toast = useToast()

const reply = ref('')
const loading = ref(false)

const meilisearch = useMeiliSearchRef()

const body = computed(async() => {
  // let item = meilisearch.index('activities_ES').getDocument(activity.value._id)
  // return await item.body
})

</script>

<template>
  <UDashboardPanel id="inbox-2">
    <UDashboardNavbar :title="activity.title" :toggle="false">
      <template #leading>
        <UButton
          icon="i-lucide-x"
          color="neutral"
          variant="ghost"
          class="-ms-1.5"
          @click="emits('close')"
        />
      </template>

      <template #right>
        <UTooltip text="Archive">
          <UButton
            icon="i-lucide-inbox"
            color="neutral"
            variant="ghost"
          />
        </UTooltip>

        <UTooltip text="Reply">
          <UButton icon="i-lucide-reply" color="neutral" variant="ghost" />
        </UTooltip>

        <UDropdownMenu :items="dropdownItems">
          <UButton
            icon="i-lucide-ellipsis-vertical"
            color="neutral"
            variant="ghost"
          />
        </UDropdownMenu>
      </template>
    </UDashboardNavbar>

    <div class="flex flex-col sm:flex-row justify-between gap-1 p-4 sm:px-6 border-b border-default">
      <div class="flex items-start gap-4 sm:my-1.5">
        <!-- <UAvatar
          v-bind="activity.from.avatar"
          :alt="activity.from.name"
          size="3xl"
        /> -->

        <div class="min-w-0">
          <p class="font-semibold text-muted text-sm text-highlighted">
            {{ formatDate(new Date(activity.date).getTime()/1000) }}
          </p>
          <p class="text-muted">
            <!-- {{ activity.email }} -->
          </p>
        </div>
      </div>

      <p class="max-sm:pl-16 text-muted text-sm sm:mt-2">
        {{ formatLocation( activity ) }}
      </p>
    </div>

    <div class="flex-1 p-4 sm:p-6 overflow-y-auto">

      {{ activity._id }}
      <p class="whitespace-pre-wrap" v-html="body">
       
      </p>
    </div>

    
  </UDashboardPanel>
</template>
