<script setup>
import { uniqueId, delay } from "../../../composables/utils/helpers";
import Offcanvas from "../../bootstrap/offcanvas/Offcanvas";
import OffcanvasHeader from "../../bootstrap/offcanvas/OffcanvasHeader";
import OffcanvasTitle from "../../bootstrap/offcanvas/OffcanvasTitle";
import OffcanvasBody from "../../bootstrap/offcanvas/OffcanvasBody";
import CloseButton from "../../bootstrap/button/CloseButton";
import Accordion from "../../bootstrap/accordion/Accordion";
import AccordionItem from "../../bootstrap/accordion/AccordionItem";
import AccordionHeader from "../../bootstrap/accordion/AccordionHeader";
import AccordionButton from "../../bootstrap/accordion/AccordionButton";
import AccordionCollapse from "../../bootstrap/accordion/AccordionCollapse";
import AccordionBody from "../../bootstrap/accordion/AccordionBody";
import ListGroupList from "../../bootstrap/list-group/ListGroupList";
import ListGroupItem from "../../bootstrap/list-group/ListGroupItem";
import Anchor from "../../html-inline/Anchor";
import bIcon from "../../icon/BIcon";
import ViewState from "../../integration/ViewState.vue";
import { useDynamicRouteParam } from "../../../composables/extend/dynamicRoute/useDynamicRouteParam";
import { useRoute, onMounted } from "#imports";
const props = defineProps({
  data: {
    type: Object
  },
  src: {
    type: String
  },
  title: {
    type: String,
    default: "Browse docs"
  },
  activeBackgroundColor: {
    type: String,
    default: "primary"
  },
  offcanvasType: {
    type: String,
    default: "lg"
  },
  color: {
    type: String,
    default: "transparent"
  },
  backgroundColor: {
    type: String,
    default: "transparent"
  }
});
defineOptions({
  inheritAttrs: false
});
const route = useRoute();
const lang = useDynamicRouteParam("lang");
onMounted(async () => {
  await delay(1e3);
  const el = document.getElementById(`sl${route.path}`);
  if (el) {
    el.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "start" });
  }
});
</script>

<template>
 <ViewState
  v-if="src || data"
  v-slot="routes"
  :key="src || uniqueId()"
  :src="src"
  :data="data"
 >
  <Offcanvas
   v-bind="$attrs"
   :type="props.offcanvasType"
   placement="start"
  >
   <OffcanvasHeader border="bottom">
    <OffcanvasTitle>{{ title }}</OffcanvasTitle>
    <CloseButton dismiss="offcanvas" />
   </OffcanvasHeader>
   <OffcanvasBody>
    <nav
     class="w-100"
     aria-label="Docs navigation"
    >
     <Accordion
      :color="props.color"
      :background-color="backgroundColor"
      button-icon-width="1rem"
      active-color="body"
     >
      <AccordionItem
       v-for="item in routes.data"
       :key="item.name"
       active
      >
       <AccordionHeader level="2">
        <AccordionButton
         padding="x-0 y-3"
         rounded
        >
         <b-icon
          :icon="item.icon"
          :color="item.color"
          margin="e-3"
         /><b-strong>{{ item.name }}</b-strong>
        </AccordionButton>
       </AccordionHeader>
       <AccordionCollapse>
        <AccordionBody padding="0">
         <ListGroupList
          flush
          :color="backgroundColor"
          border-color="transparent"
          background-color="transparent"
          order="start"
         >
          <ListGroupItem
           v-for="secondItem in item.children"
           :key="secondItem.path"
           flex
           justify-content="between"
           align-items="center"
           padding="s-2 e-0 y-0"
          >
           <Anchor
            dynamic-route
            :to="secondItem.path"
            active-class="active"
            :lang="lang"
            :active-background-color="activeBackgroundColor"
            active-border-color="transparent"
            aria-current="page"
            relative-width="100"
            button
            small
text-alignment="start" padding="y-2 s-3" margin="e-3"
           >
            {{ secondItem.name }}
            <!-- <Badge background-color="primary" pill>
             New
            </Badge> -->
           </Anchor>
          </ListGroupItem>
         </ListGroupList>
        </AccordionBody>
       </AccordionCollapse>
      </AccordionItem>
     </Accordion>
    </nav>
   </OffcanvasBody>
  </Offcanvas>
 </ViewState>
</template>
