<!-- layouts/default.vue -->
<template>
  <div>
    <!-- //////////////////// begin navbar //////////////////// -->
    <template v-if="$attrs.showNavbar">
      <header v-if="buildName() != 'majles'">
        <nav
          class="navbar navbar-expand-md navbar-light bg-light"
          :class="{ expanded: !isSidebarCollapsed }"
        >
          <!-- sidebar menu toggler -->
          <button-component
            @click="sidebarCollapsedSetter(false)"
            classes="p-0 d-lg-none"
            buttonText=""
          >
            <svg class="icon icon-Component-68--1">
              <use xlink:href="#icon-Component-68--1"></use>
            </svg>
          </button-component>
          <a
            class="navbar-brand d-none d-lg-inline-block"
            style="color: #00b6e3"
            >{{ navTitle }}</a
          >
          <a class="navbar-brand d-lg-none" style="color: #00b6e3">{{
            navShortTitle
          }}</a>
          <button
            class="navbar-toggler"
            type="button"
            data-bs-toggle="collapse"
            data-bs-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>

          <div class="navbar-collapse" id="navbarSupportedContent">
            <div class="collapse-mobile-header">
              <div>
                <img
                  src="assets/common/img/logo/gray-logo.png"
                  alt="هم فهمی"
                  class="img-fluid"
                  style="width: 2em; filter: invert(0)"
                />
                هم فهمی
              </div>

              <button
                class="btn p-0 me-auto"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent"
                aria-controls="navbarSupportedContent"
                aria-expanded="false"
                aria-label="Toggle navigation"
              >
                <svg class="icon icon-Component-71--1">
                  <use xlink:href="#icon-Component-71--1"></use>
                </svg>
              </button>
            </div>
            <ul class="navbar-nav ms-auto me-md-5">
              <!-- <li class="nav-item active">
              <a class="nav-link" href="#"
                >پیشخوان <span class="sr-only">(current)</span></a
              >
            </li> -->
              <!-- <li class="nav-item">
                      <a class="nav-link" href="#">سامانه‌ها</a>
                    </li> -->
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  id="navbarDropdown"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  {{ $t("Systems") }}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <!-- <my-system class="list" layout="list"></my-system> -->
                </div>
              </li>
              <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-bs-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  {{ $t("Portal") }}
                </a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                  <a
                    class="dropdown-item"
                    href="http://pub.hamfahmi.ir/public"
                    target="_blank"
                    >{{ $t("PersonalFolder") }}</a
                  >
                  <a
                    class="dropdown-item"
                    href="http://pub.hamfahmi.ir/wiki"
                    target="_blank"
                    >{{ $t("WikiFarhangestan") }}</a
                  >
                  <a
                    class="dropdown-item"
                    href="http://pub.hamfahmi.ir:91/"
                    target="_blank"
                    >{{ $t("ResearchPortal") }}</a
                  >
                  <a
                    class="dropdown-item"
                    href="http://pub.hamfahmi.ir:94/"
                    target="_blank"
                    >{{ $t("ResearchSoftware") }}</a
                  >
                </div>
              </li>
            </ul>

            <ul class="navbar-nav ms-md-3 me-auto">
              <li class="nav-item">
                <notification></notification>
              </li>
              <li class="nav-item">
                <select-language-dropdown
                  toggleClass="dropdown-toggle"
                ></select-language-dropdown>
              </li>
              <li class="nav-item">
                <user-avatar-dropdown
                  class="position-static"
                ></user-avatar-dropdown>
              </li>
            </ul>
          </div>
        </nav>
      </header>
    </template>
    <!-- //////////////////// end navbar //////////////////// -->

    <!-- <the-sidebar :showUserAvatar="true" :menu="menu"></the-sidebar> -->
    <the-sidebar
      :showUserAvatar="true"
      :menu="$attrs.menu"
      @statusPag="statusPag"
    ></the-sidebar>

    <client-only>
      <main
        class="main-page__content"
        :class="{ expanded: !isSidebarCollapsed }"
      >
        <!-- <div class="pages list-page"> -->
        <!-- <div class="pages-content align-items-stretch p-0"> -->
        <!-- <div class="flex-grow-1"> -->

        <slot></slot>
        <!-- </div> -->
        <!-- </div> -->
        <!-- </div> -->
      </main>
    </client-only>
  </div>
</template>

<script>
import { mapState, mapActions } from "pinia";
import { useCommonStore } from "~/stores/commonStore";

import { clearBodyClass } from "@manuals/utilities";
export default {
  mounted() {
    // this.setBodyClass("default-dashboard");
  },
  beforeUnmount() {
    this.sidebarMenuSetter();
  },
  data() {
    return {
      menu: undefined,
      // #region mehdi
      statusPag: 0,
      nomber: 0,
      statusPagHedear: 1,
      // #endregion
    };
  },
  computed: {
    ...mapState(useCommonStore, [
      "getPanelStatus",
      "getRefreshForm",
      "isSidebarCollapsed",
      "sidebarMenuGetter",
    ]),
    navTitle() {
      return import.meta.env.VITE_TITLE;
    },
    navShortTitle() {
      return import.meta.env.VITE_SHORT_TITLE;
    },
    // sidbarMenu() {
    //   if (buildName() == "majles") return majlesMenu;
    //   return monirMenu;
    // },
  },

  methods: {
    ...mapActions(useCommonStore, [
      "setBodyClass",
      "TOGGLE_PANEL",
      "sidebarCollapsedSetter",
      "SET_SIDEBAR_LIST_STATUS",
      "sidebarMenuSetter",
    ]),

    showPortal() {
      return buildName() == "monir" && buildState() != 2;
    },
  },
};
</script>

<style lang="scss">
@import "../assets/default-dashboard/scss/default-dashboard";
</style>

<style scoped lang="scss">
.dropdown-menu {
  float: right;
  min-width: 13rem;
  font-size: 0.9rem;
  border: none;
  border-radius: 0.1em;
  text-align: right;
  min-width: 20em;
}
</style>