<script>
import { defineComponent } from "vue";
import { isActive } from "../helpers/utils";
import DropdownTransition from "./DropdownTransition";
import { useInstance } from "../helpers/composable";

export default defineComponent({
  name: "SidebarGroup",
  props: ["item", "open", "collapsable", "depth"],
  components: { DropdownTransition },
  render(h) {
    const { item, open, collapsable, depth } = this;

    return h(
      "section",
      {
        class: [
          "sidebar-group",
          {
            collapsable,
            "is-sub-group": depth !== 0,
          },
          `depth-${depth}`,
          "yellow",
        ],
      },
      [
        h(
          item.path ? "router-link" : "p",
          {
            class: [
              "sidebar-heading",
              {
                clickable: item.path,
                open,
                // active: this.isActive($route, this.item.path, $store),
              },
            ],
            on: {
              click: () => this.$emit("toggle"),
            },
            props: {
              to: item.path,
            },
          },
          [
            h("span", item.title),
            collapsable ? h("span", { class: ["arrow", open ? "down" : "right"] }) : null,
          ]
        ),
        h("SidebarLinks", {
          class: "sidebar-group-items",
          props: {
            items: item.children,
            sidebarDepth: item.sidebarDepth,
            depth: depth + 1,
          },
          directives: [{ name: "show", value: open || !collapsable }],
        }),
      ]
    );
  },
  setup(props, ctx) {
    const instance = useInstance();

    instance.$options.components.SidebarLinks = require("./SidebarLinks.vue").default;

    return { isActive };
  },
});
</script>

<style lang="stylus">
.sidebar-group
  background var(--background-color)
  .sidebar-group
    padding-left 0.5em
  &:not(.collapsable)
    .sidebar-heading:not(.clickable)
      cursor auto
      color var(--text-color)
  // refine styles of nested sidebar groups
  &.is-sub-group
    padding-left 0
    & > .sidebar-heading
      font-size 0.95em
      line-height 1.4
      font-weight normal
      padding-left 2rem
      &:not(.clickable)
        opacity 0.5
    & > .sidebar-group-items
      padding-left 1rem
      & > li > .sidebar-link
        font-size: 0.95em;
        border-left none
  &.depth-2
    & > .sidebar-heading
      border-left none

.sidebar-heading
  position relative
  color var(--text-color)
  transition color .15s ease
  cursor pointer
  font-size 1em
  font-weight 500
  padding 0.35rem 1.5rem 0.35rem 1.25rem
  width 100%
  box-sizing border-box
  margin 0
  &.open, &:hover
    color $accentColor
  .arrow
    position absolute
    top 0
    bottom 0
    right 1em
    margin auto
  &.clickable
    &.active
      font-weight 600
      color $accentColor
      border-left-color $accentColor
    &:hover
      color $accentColor

.sidebar-group-items
  transition height .1s ease-out
  font-size 0.95em
  overflow hidden
</style>
