<template>
  <div>
    <!-- <the-sidebar2
      :class="buildName"
      :menu="menu"
      :showUserAvatar="true"
    ></the-sidebar2> -->
    <div class="container-fluid">
      <div>
        <div>
          <div class="col">
            <div
              class="main-page__content navbar row align-items-center p-0"
              :class="{ expanded: !isSidebarCollapsed }"
            >
              <div class="col col-lg-auto order-1 breadcrumbs">
                <Breadcrumbs />
              </div>
              <div class="col-12 col-lg order-3 order-lg-2">
                <div
                  class="nav-tabs-container nav-tabs d-flex justify-content-center"
                >
                  <ul class="nav">
                    <li
                      class="nav-item desktop"
                      v-for="(navItem, index) in navList"
                      :key="index"
                    >
                      <button
                        :title="navItem.title"
                        type="button"
                        class="btn nav-link"
                        @click.prevent="setActiveTab(navItem)"
                        :class="{
                          active: activeTabGetter?.key == navItem.key,
                        }"
                      >
                        {{ navItem.title }}
                      </button>
                    </li>
                  </ul>
                </div>
              </div>
              <div class="col-auto col-lg-auto order-2 order-lg-3 d-flex">
                <user-avatar-dropdown
                  style="position: static"
                  class="user-avatar-component"
                ></user-avatar-dropdown>
                <select-language-dropdown></select-language-dropdown>
              </div>
            </div>
          </div>
        </div>
        <div
          class="main-page__content"
          :class="{ expanded: !isSidebarCollapsed }"
        >
          <component
            v-if="mainComponentName"
            :is="mainComponentName"
          ></component>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import menu from "@task/json/menu.json";
// import { mapGetters, mapMutations } from "vuex";
import { mapState, mapActions } from "pinia";
import { useEntityStore } from "@task/stores/entityStore";

import { useCommonStore } from "~/stores/commonStore";
export default {
  beforeMount() {
    // this.httpService = new HttpService(this.taskMicroServiceName);
    this.httpService = useNuxtApp()["$http"];
  },
  mounted() {
    this.setActiveTab(this.navList[0]);
  },
  data() {
    return {
      // httpService: undefined,
      httpService: {},
      menu: menu,
      mainComponentName: "TaskUserReport",
      navList: [
        {
          title: "کاربران",
          key: "users",
        },
        { title: "گروه ها", key: "group" },
      ],
    };
  },
  computed: {
    ...mapGetters(useEntityStore, ["activeTabGetter"]),
    // ...mapGetters(["isSidebarCollapsed"]),
    ...mapState(useCommonStore, ["isSidebarCollapsed"]),
  },
  methods: {
    ...mapMutations(useEntityStore, ["activeTabSetter"]),
    setActiveTab(tab) {
      this.activeTabSetter(tab);
      if (tab.key == "group") {
        this.mainComponentName = "TaskGroupReport";
      } else {
        this.mainComponentName = "TaskUserReport";
      }
    },
  },
  components: {
    TaskUserReport: () => import("@task/components/TaskUserReport.vue"),
    TaskGroupReport: () => import("@task/components/TaskGroupReport.vue"),
  },
};
</script>

<style lang="scss">
// .breadcrumbs {
//   margin-right: 7.5em !important;
// }
// .expanded {
//   margin-right: 3em;
// }
.nav-item {
  .nav-tabs .nav-link:hover,
  .nav-tabs .nav-link:focus {
    color: var(--primary-color);
    border-color: transparent;
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .nav-link {
    padding: 0.5rem 2.5rem !important;
    color: var(--text-primary);
  }
}
.navbar {
  background-color: #eee;
}
.nav-tabs {
  border-bottom: unset;
}
</style>
