<template>
  <div>
    <section>
      <app-boards-header
        :h2data="compdata.title"
        v-model="selectedSort"
        :sortOptions="sortOptions"
      />
    </section>

    <app-board-list
      v-model="selectedSort"
      :title="compdata.title"
      :sortOptions="sortOptions"
      :userRole="userRole"
      :current-page="currentPage"
      :total-pages="totalPages"
      :page-numbers="pageNumbers"
      :show-select-boxes="showSelectBoxes"
      :uploadRoute="currentUploadRoute"
      @toggle-select-boxes="showSelectBoxes = !showSelectBoxes"
      @delete-selected="onDeleteSelected"
      @go-to-page="onGoToPage"
      @prev-page="onPrevPage"
      @next-page="onNextPage"
      :isLoading="isLoading"
      :loadingMessage="loadingMessage"
    >
      <template #list>
        <app-board-list-single
          v-for="item in currentItems"
          :key="item.docId"
          :userId="item.userId"
          :item="item"
          :showSelectBox="showSelectBoxes"
          :selected="selectedItems.includes(item)"
          @select="onToggleSelect(item)"
          :iconName="['fas', 'bell']"
          :routeName="currentBoardRouteName"
        />
      </template>
    </app-board-list>
  </div>
</template>

<script setup lang="ts">
definePageMeta({
  prerender: false,
});

import LoadingSection from '@/components/LoadingSection.vue';
import AppBoardsHeader from '@/components/boards/BoardHeader.vue';
import AppBoardList from '@/components/boards/BoardList.vue';
import AppBoardListSingle from '@/components/boards/BoardListSingle.vue';
import type { OrderByDirection, BoardAccessMode } from '@/types';

// custom settings
const access: BoardAccessMode = 'admin';
const currentCollection = 'projects';
const currentUploadRoute = '/cms/upload';
const currentBoardRouteName = '/cms';
const compData = {
  title: '공지사항',
  itemsPerPage: 20,
  defaultSort: 'desc' as OrderByDirection,
};
const loading = '게시물을 불러오는 중입니다...';

// Composable
import { useBoardList } from '@/composables/useBoardList';

const {
  isLoading,
  loadingMessage,
  compdata,
  currentItems,
  currentPage,
  pageNumbers,
  selectedSort,
  sortOptions,
  userRole,
  totalPages,
  selectedItems,
  showSelectBoxes,
  onToggleSelect,
  onDeleteSelected,
  onGoToPage,
  onPrevPage,
  onNextPage,
} = useBoardList(currentCollection, {
  title: compData.title,
  itemsPerPage: compData.itemsPerPage,
  defaultSort: compData.defaultSort,
  access: access,
  loadingMessage: loading,
});
</script>
