<script setup>
import { useToc } from "../../../composables/extend/useToc";
import bDiv from "../../html-block/Div";
import bButton from "../../html-inline/Button";
import BIcon from "../../icon/BIcon";
import Collapse from "../../bootstrap/collapse/Collapse";
import List from "../../html-block/List";
import ListItem from "../../html-block/ListItem.vue";
import bA from "../../html-inline/Anchor";
const props = defineProps({
  selector: {
    type: String,
    default: "#content"
  },
  color: {
    type: String,
    default: "primary"
  }
});
const { tocs, shown } = useToc(props.selector);
</script>

<template>
 <b-div
  v-if="tocs.length > 0"
  margin="t-3 b-3 y-lg-0 b-lg-3"
  padding=""
  text-color="body-secondary"
  :class="{ toc: shown }"
  :style="`--ub-toc-color:var(--bs-${props.color});`"
 >
  <b-button
   color="outline-secondary"
   margin="b-2 b-md-0"
   padding="2"
   text-decoration="none"
   relative-width="100"
   toggle="collapse"
   target=".tocContents"
  >
   <slot />
   <BIcon
    icon="bi:chevron-expand"
    margin="s-2"
   />
  </b-button>

  <Collapse
   class="tocContents"
   display="print-none"
   overflow="auto"
  >
   <nav class="TableOfContents">
    <List
     v-if="tocs.length > 0"
     unstyled
     margin="s-3"
    >
     <ListItem
      v-for="toc in tocs"
      :key="toc.id"
      class="py-1"
     >
      <b-a
       :to="`#${toc.id}`"
       padding="s-2"
       active-class=""
       dismiss="collapse"
       class="d-block text-start text-decoration-none text-body-secondary link-opacity-50-hover text-break"
      >
       {{ toc.content }}
      </b-a>
      <ul
       v-if="toc.items.length > 0"
       class="list-unstyled ms-2"
      >
       <!--  BSコンポーネントにするとSPY非対応になる -->
       <li
        v-for="h3 in toc.items"
        :key="h3.id"
        class="py-1"
       >
        <b-a
         :to="`#${h3.id}`"
         padding="s-2"
         active-class=""
         dismiss="collapse"
         class="text-start text-decoration-none text-body-secondary link-opacity-50-hover text-break "
        >
         {{ h3.content }}
        </b-a>
       </li>
      </ul>
     </ListItem>
    </List>
   </nav>
  </Collapse>
 </b-div>
</template>

<style scoped>

</style>
