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

export default defineComponent({
  functional: true,

  props: ["item", "sidebarDepth"],

  render(
    h,
    {
      parent: { $page, $site, $route, $store, $themeConfig, $themeLocaleConfig },
      props: { item, sidebarDepth },
    }
  ) {
    const selfActive = isActive($route, item.path, $store);

    const active =
      item.type === "auto"
        ? selfActive ||
          item.children.some((c) =>
            isActive($route, item.basePath + "#" + c.slug, $store)
          )
        : selfActive;
    // const link = renderLink(h, item.path, item.title || item.path, active);
    const link = renderLink(h, item.path, item.title || item.path, active);

    return link;
  },
});

function renderLink(h, to, text, active) {
  let WBCItemSideBarObj = {
    // comp: "router-link",
    // dive: true,
    options: {
      // props: {
      //   to,
      //   activeClass: "",
      //   exactActiveClass: "",
      // },
      // html: (thatt) => text,
      class: { active, "sidebar-link": true },
      // html: {
      //   dive: true,
      //   options: {
      //   },
      //   html: (that) => text,
      // },
      // slots: {
      //   default: (that) => text,
      // },
    },

    tracker: (that) => {
      that.data.options.html = {
        dive: true,
        options: {},
        html: (thatt) => text,
      };

      that.data.options.to = to;
      that.data.options.class.active = active;
    },
  };
  return h("WBC", {
    class: "sidebar-link sidebar-header",
    props: {
      item: WBCItemSideBarObj,
    },
  });
}
</script>

<style lang="stylus">
.sidebar .sidebar-sub-headers
  padding-left 1.5rem
  font-size 0.95em

.sidebar-sub-headers a.sidebar-link
  margin 0 1rem 0 0.6rem

a.sidebar-link
  font-size 1em
  font-weight 400
  display block!important
  color var(--text-color)
  padding 0.35rem 1rem 0.35rem 2.25rem
  line-height 1.7
  background var(--background-color)
  // margin 0 0 0 1.5rem
  box-sizing: border-box
  &:hover
    color $accentColor
  &.active
    font-weight 600
    color $accentColor
    background var(--default-color-8)
    border-right 3px solid $accentColor
  .sidebar-group &
    // padding-left 2rem
  .sidebar-sub-headers &
    padding-top 0.25rem
    padding-bottom 0.25rem
    border-left none
    &.active
      font-weight 500
      background transparent
      color $accentColor
</style>
