<script setup lang="ts">
import { useRouter } from "vue-router"
import AppLeftSidebar from "~/components/AppLeftSidebar.vue"
import AppRightSidebar from "~/components/AppRightSidebar.vue"
import { useDates } from "~/composables/useDates"
import { usePageNavigation } from "~/composables/usePageNavigation"
import { useSidebarIndex } from "~/composables/useSidebarIndex"
import { useTimelineDensity } from "~/composables/useTimelineDensity"
import { useUiStore } from "~/stores/ui"

const router = useRouter()
const ui = useUiStore()
const { navigateToPage, navigateToTag } = usePageNavigation()
const { lastDays, getToday } = useDates()
const { densityMap } = useTimelineDensity()
const { pages, tags } = useSidebarIndex()

const searchTrigger = ref(0)

function handleSelectDate(date: string) {
  ui.setActiveDate(date)
  router.push(`/?date=${date}`)
}

function handleSearch() {
  searchTrigger.value++
  ui.rightSidebarOpen = true
}

const dateKeys = lastDays(14)
const today = getToday()
</script>

<template>
  <div class="flex h-screen overflow-hidden bg-default">
    <AppLeftSidebar
      v-model:open="ui.leftSidebarOpen"
      :today="today"
      :active-date="ui.activeDate"
      :date-keys="dateKeys"
      :density-map="densityMap"
      :pages="pages"
      :tags="tags"
      @select-date="handleSelectDate"
      @search="handleSearch"
      @page-clicked="navigateToPage($event)"
      @tag-clicked="navigateToTag($event)"
    />

    <UMain class="flex flex-col flex-1 min-w-0">
      <slot />
    </UMain>

    <AppRightSidebar v-model:open="ui.rightSidebarOpen" :search-trigger="searchTrigger" />
  </div>
</template>
