<template lang="pug">
  .sidebar.flex.flex-col.justify-between.flex-auto.pt-4.px-2.pb-7.rounded
    .flex.flex-col.gap-y-4
      base-button-sidebar(
        v-for="button in pageSettings.filter((el) => el.id !== 'settings')",
        :path="button.path",
        :id="button.id",
        :active="button.active",
        :change-style-page="changeStylePage"
      )
        q-icon(:name="`app:${button.icon}`", size="25px")
    .flex.text-4xl.flex-col.gap-y-6
      base-button-sidebar(
        :path="getSettings.path",
        :id="getSettings.id",
        :active="getSettings.active",
        :change-style-page="changeStylePage"
      )
        q-icon(:name="`app:${getSettings.icon}`", size="25px")
</template>

<script>
import BaseButtonSidebar from "@/components/base/BaseSidebarButton";

export default {
  name: "TheSidebar",
  components: { BaseButtonSidebar },
  data() {
    return {
      pageSettings: [
        {
          id: "calendar",
          path: "#/calendar",
          active: true,
          icon: "icon-calendar-2",
        },
        {
          id: "user",
          path: "#/clients",
          active: false,
          icon: "icon-person-2",
        },
        {
          id: "settings",
          path: "#/settings",
          icon: "icon-settings",
          active: false,
        },
      ],
      currentPageBorder: true,
    };
  },
  methods: {
    changeStylePage(e) {
      this.pageSettings.forEach((el, index) => {
        el.id === e.currentTarget.id
          ? (this.pageSettings[index].active = true)
          : (this.pageSettings[index].active = false);
      });
    },
  },
  computed: {
    getSettings() {
      return this.pageSettings.find((el) => el.id === "settings");
    },
  },
  mounted() {
    let href = window.location.href.slice(22);
    this.pageSettings.forEach((el, index) => {
      el.path === href.substr(href.lastIndexOf("#"))
        ? (this.pageSettings[index].active = true)
        : (this.pageSettings[index].active = false);
    });
  },
  watch: {
    "$route.path"() {
      if (this.$router.currentRoute._value.fullPath === "/calendar") {
        this.currentPageBorder = true;
        this.pageSettings.forEach((el) =>
          el.path === "#/calendar" ? (el.active = true) : (el.active = false)
        );
      } else this.currentPageBorder = false;
    },
  },
};
</script>

<style lang="sass" scoped>
.sidebar
  max-width: 64px
  min-width: 64px
  background-color: var(--default-white)
</style>
