<script>
import MenuList from './MenuList/MenuList.vue'
import MobileMenu from './AppContainerMobileMenu.vue'
import LeftPanel from './AppContainerLeftPanel.vue'
import Breadcrumbs from './AppContainerBreadcrumbs.vue'
import RightPanel from './AppContainerRightPanel.vue'
import AppContainerHeader from './AppContainerHeader.vue'
import {mapGetters} from 'vuex'
import ServiceOfLayout from '@services/ServiceOfLayout'

export default {
  name: 'AppContainer',
  components: {
    MobileMenu,
    MenuList,
    LeftPanel,
    Breadcrumbs,
    RightPanel,
    AppContainerHeader
  },
  data() {
    return {
      serviceOfLayout: null,
      isOpenedMobileMenu: false,
      routeName: ""
    }
  },
  computed: {
    ...mapGetters('layout', ["isShowMenu", 'isEnabledMenu']),
    ...mapGetters('auth',   ['menuList', 'currentUser']),
    menuListWithIndex() {
      return this.menuList.map((el, index) => ({...el, index}))
    }
  },
  watch:{
    $route (to){
      this.routeName = to.name;
      this.closeMobileMenu()
    }
  },
  mounted() {
    const store = this.$store
    this.serviceOfLayout = new ServiceOfLayout(store)
  },
  methods: {
    closeMobileMenu() {
      this.isOpenedMobileMenu = false
    },
    openMobileMenu() {
      this.isOpenedMobileMenu = true
    },
    setIsMobileMenuOpened(isOpened) {
      if (this.serviceOfLayout) {
        this.serviceOfLayout.setIsMobileMenuOpened(isOpened)
      }
    },
    toggleMenu() {
      if (this.serviceOfLayout) {
        this.serviceOfLayout.toggleMenu()
      }
    },
    toggleMobileMenu() {
      if (this.isOpenedMobileMenu) {
        this.closeMobileMenu()
      } else {
        this.openMobileMenu()
      }
    }
  }
}

</script>

<template>
  <div
    v-if="serviceOfLayout"
    class="main w-full"
  >
    <!-- BEGIN: TOP BAR -->
    <div
      id="menu"
      class="top-bar-boxed w-full h-[59px] mt-[4px] z-[51] relative justify-center border-b border-white/[0.2] -mx-3 px-3 sm:pl-8 md:pt-0 mb-[4px]"
    >
      <MobileMenu
        v-if="isOpenedMobileMenu"
        :menuListWithIndex="menuListWithIndex"
        currentMenuItem="routeName"
        :currentUser="currentUser"
        setIsMobileMenuOpened="setIsMobileMenuOpened"
        :toggleMobileMenu="toggleMobileMenu"
      />
      <AppContainerHeader>
        <div class="flex justify-between items-center">
          <LeftPanel
            :toggleMobileMenu="toggleMobileMenu"
          />
          <Breadcrumbs
            v-if="false"
            :breadcrumbs="[]"
          />
          <RightPanel
            :current_user="''"
            :pageTitle="''"
            :toggleMenu="toggleMenu"
            :notifications="[{from: 'Бот из LM', datetime: '10:00', message: 'Проведен редизайн приложения', readed: false}]"
            :currentUser="currentUser"
          />
        </div>
        <div class="sm:hidden flex items-center justify-between" />
      </AppContainerHeader>
    </div>
    <!-- END: TOP BAR -->
    <div class="wrapper">
      <div class="wrapper-box">
        <div v-if="isShowMenu && isEnabledMenu">
          <MenuList
            :isShowMenu="isShowMenu"
            :menuListWithIndex="menuListWithIndex"
            :routeName="routeName"
          />
        </div>
        <div class="content">
          <div class="grid grid-cols-12 gap-6 h-full">
            <slot />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
