<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import { breakpointsTailwind } from '@vueuse/core'
import type { Activity } from '~/types'
import InboxActivity from '~/components/inbox/InboxActivity.vue'



const tabItems = [{
  label: 'All',
  value: 'all'
}, {
  label: 'Unread',
  value: 'unread'
}]
const selectedTab = ref('all')
const activities = ref()

// const searchKey = "04be59c1f633e2bb434082fc1a6fcc6ce97e3630e3fcf9e814e1f03a386c03e1"

// const { data: activities } = await useFetch<Activity[]>('https://search.carpa.com/indexes/activities_ES/search?attributesToRetrieve=["title"]&q=', { default: () => [], headers: {
//     Authorization: `Bearer ${searchKey}`
//   } })

const { search, result } = useMeiliSearch('activities_ES')

activities.value = await( search('',
  {
    attributesToRetrieve: ['_id', 'title', 'slug', 'date', 'activity', 'city', 'state', 'country'],
    attributesToCrop: ['body:250'],
    attributesToHighlight: ['body'],
    cropLength: 250,
    limit: 30,
    sort: ['date:desc'],

}

) )

// Filter activities based on the selected tab
const filteredActivities = computed(() => {
  // if (selectedTab.value === 'unread') {
  //   return activities.hits.filter(activity => !!activity.unread)
  // }
  console.log( 'Activities', activities )
  return activities.value?.hits
})

const selectedActivity = ref<Activity | null>()

const isActivityPanelOpen = computed({
  get() {
    return !!selectedActivity.value
  },
  set(value: boolean) {
    if (!value) {
      selectedActivity.value = null
    }
  }
})

// Reset selected activity if it's not in the filtered activities
watch(filteredActivities, () => {
  if (!filteredActivities.value.find(activity => activity.id === selectedActivity.value?.id)) {
    selectedActivity.value = null
  }
})

const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('lg')
</script>

<template>
  <UDashboardPanel
    id="inbox-1"
    :default-size="25"
    :min-size="20"
    :max-size="30"
    resizable
  >
    <UDashboardNavbar title="Actividades">
      <template #leading>
        <UDashboardSidebarCollapse />
      </template>
      <template #trailing>
        <UBadge :label="filteredActivities?.length" variant="subtle" />
      </template>

      <template #right>
        <UTabs
          v-model="selectedTab"
          :items="tabItems"
          :content="false"
          size="xs"
        />
      </template>
    </UDashboardNavbar>
    <InboxList v-model="selectedActivity" :activities="filteredActivities" />
  </UDashboardPanel>

  <InboxActivity v-if="selectedActivity" :activity="selectedActivity" @close="selectedActivity = null" />
  <div v-else class="hidden lg:flex flex-1 items-center justify-center">
    <UIcon name="i-lucide-inbox" class="size-32 text-dimmed" />
  </div>

  <ClientOnly>
    <USlideover v-if="isMobile" v-model:open="isActivityPanelOpen">
      <template #content>
        <InboxActivity v-if="selectedActivity" :activity="selectedActivity" @close="selectedActivity = null" />
      </template>
    </USlideover>
  </ClientOnly>
</template>
