<template>
  <ion-menu ref="recoMenu" :side="side" :menu-id="menuId" v-on:ionDidOpen="$emit('menuOpened')" v-on:ionDidClose="$emit('menuClosed')" type="reveal">

    <!-- Header -->
    <ion-header>
      <slot name="header" />
    </ion-header>

    <!-- Menu sections -->  
    <ion-content v-if="menuSections && menuSections.length" class="loc-content">
      <ion-list lines="none" padding>
        <fragment v-for="menuSection in menuSections" :key="menuSection.title">
          <ion-list-header v-if="menuSection.title">{{menuSection.title}}</ion-list-header>
          <reco-menu-item 
            v-for="menuItem in menuSection.menuItems" :key="menuItem.routeName" :menuItem="menuItem" :menuId="menuId"
            v-on:recoClick="$emit('recoMenuItemClicked', $event)" :isActive="routeName == menuItem.routeName"
          />
        </fragment>
      </ion-list>
    </ion-content>

    <!-- Main content -->  
    <ion-content v-if="!menuSections || !menuSections.length" :padding="padding" class="loc-content">
      <slot name="main" />
    </ion-content>

    <!-- Footer -->
    <ion-footer>
      <slot name="footer" />
    </ion-footer>

  </ion-menu>
</template>

<script lang="ts">
import RecoMenuItem from "@/components/atomic/RecoMenuItem.vue"

export default {
  components: {
    RecoMenuItem,
  },
  props: {
    side: {
      type: String,
      default: "start",
    },
    menuId: {
      type: String,
      default: "recoMenu",
    },
    routeName: {
      type: String,
    },
    padding: {
      type: Boolean,
      default: true,
    },
    menuSections: {
      type: Array,
    },
    closeMenu: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    closeMenu() {
      if(this.closeMenu) {
        this.closeRecoMenu();
      }
    }
  },
  methods: {
    closeRecoMenu() {
      this.$refs.recoMenu.close();
    }
  }
}
</script>

<style scoped lang="css">
  .loc-content {
    border-right: 1px solid #ddd;
  }
  .loc-item {
    --padding-top: 10px;
    font-size: 16px;
    font-weight: 500;
    color: var(--reco-light-font-color);
  }
  .loc-item[dynClass~=active] {
    color: var(--ion-color-primary);
  }
</style>
