<script>
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
import { SidebarMenu } from "vue-sidebar-menu";
import "vue-sidebar-menu/dist/vue-sidebar-menu.css";
import { h, markRaw } from "vue";

const separator = {
  template: '<hr style="border-color: rgba(0, 0, 0, 0.1); margin: 20px;">',
};

const faIcon = (props) => {
  return {
    element: markRaw({
      render: () => h("div", [h(FontAwesomeIcon, { size: "lg", ...props })]),
    }),
  };
};

export default {
  name: "SideBarView",
  components: {
    SidebarMenu,
  },

  // props: {
  //     sidebar: {
  //         type: Boolean,
  //         required: false
  //     }
  // },
  data() {
    return {
      menu: [
        {
          header: "Services",
          hiddenOnCollapse: true,
        },
        {
          href: "/",
          title: "Home",
          icon: faIcon({ icon: "fa-solid fa-house" }),
        },
        {
          href: "/about",
          title: "About",
          icon: faIcon({ icon: "fa-solid fa-question" }),
        },
        {
          component: markRaw(separator),
        },
        {
          href: "/referenceId",
          title: "Contacts Lookup",
          icon: faIcon({ icon: "fa-solid fa-rectangle-list" }),
        },
        {
          href: "/interactionsFlow",
          title: "Interactions Flow",
          icon: faIcon({ icon: "fa-solid fa-route" }),
        },
        {
          href: "/customerAccount/12345",
          title: "Customer Account Example",
          icon: faIcon({ icon: "fa-solid fa-id-card" }),
        },
      ],
      collapsed: false,
    };
  },

  mounted() {
    this.onResize();
    window.addEventListener("resize", this.onResize);
    console.log();
  },
  methods: {
    onResize() {
      if (window.innerWidth <= 767) {
        this.isOnMobile = true;
        this.collapsed = true;
      } else {
        this.isOnMobile = false;
        this.collapsed = false;
      }
    },
  },
};
</script>
<template>
  <div v-if="$route.query.sidebar" id="sidebar">
    <sidebar-menu
      v-model:collapsed="collapsed"
      :menu="menu"
      :show-one-child="true"
      :relative="true"
    />
  </div>
</template>
<style></style>
