<template>
  <div id="custom_menus" class="component component-menus">
    <div class="top">
      <h2 class="title">Menus</h2>
      <p class="subtitle">Manage content of site menus.</p>
    </div>
    <div class="content">
      <div class="section-header primary">
        <h3 class="title">Primary Menus</h3>
        <p class="subtitle">Manage appearance of the primary menus.</p>
      </div>
      <div class="primary-menus">
        <menu-builder title="Header Menu" type="header" :pages="availablePages" v-model="headerMenu.content" />
        <menu-builder title="Footer Menu" type="footer" :pages="availablePages" v-model="footerMenu.content" />
        <menu-builder title="Mobile Menu" type="mobile" :pages="availablePages" v-model="mobileMenu.content" />
      </div>
      <div class="section-header secondary with-button">
        <div class="left">
          <h3 class="title">Secondary Menus</h3>
          <p class="subtitle">Manage appearance of the inner-page navigation menus.</p>
        </div>
        <div class="right">
          <a class="button dark-gray" @click="addSecondaryMenu">Create</a>
        </div>
      </div>
      <div class="secondary-menus">
        <menu-builder :title="menu.title || ''" type="inner-page" :pages="availablePages" :key="menu.id" :index="index" :root.sync="menu.root_page" :restricted-pages="prohibitedSecondaryNavRootPages" v-for="(menu, index) in secondaryMenus" v-model="menu.content" @set-root="setRoot" @remove-page="menu.removed_pages.push(arguments[0])" @delete-menu="deleteMenu" />
      </div>
    </div>
  </div>
</template>

<script>
  import { get } from '../../helpers/api.js';
  
  export default {
    props: [ "header", "footer", "mobile", "secondaries", "deletedMenus" ],
    data() {
      return {
        availablePages: [{ title: "+ Custom Page Link", id: -1 }]
      }
    },
    created() {
      this.initData();
    },
    computed: {
      headerMenu: {
        get() {
          return this.header;
        },
        set(val) {
          this.$emit("update", { category: "Menus", prop: "header", value: val });
        }
      },
      footerMenu: {
        get() {
          return this.footer;
        },
        set(val) {
          this.$emit("update", { category: "Menus", prop: "footer", value: val });
        }
      },
      mobileMenu: {
        get() {
          return this.mobile;
        },
        set(val) {
          this.$emit("update", { category: "Menus", prop: "mobile", value: val });
        }
      },
      secondaryMenus: {
        get() {
          return this.secondaries;
        },
        set(val) {
          this.$emit("update", { category: "Menus", prop: "secondaries", value: val });
        }
      },
      prohibitedSecondaryNavRootPages() {
        const pageIds = [];
        if (!!this.secondaryMenus) {
          this.secondaryMenus.forEach( function(menu) {
            if (!!menu.page_id) {
              pageIds.push(menu.page_id);
            }
            if (!!menu.content && menu.content.length > 0) {
              menu.content.forEach( function(page) {
                pageIds.push(page.id);
              });
            }
          });
        }
        return pageIds;
      }
    },
    methods: {
      initData() {
        get('buildable_pages?status_masks[]=1&status_masks[]=2&status_masks[]=4&status_masks[]=8', window.jwtToken)
          .then( (res) => {
            if (!!res && !!res.data && !!res.data.pages) {
              this.availablePages = this.availablePages.concat(res.data.pages);
            }
          })
          .catch( (err) => {
            console.log(err);
          });
      },
      addSecondaryMenu() {
        this.secondaryMenus.push({ title: "Inner-Page Navigation", type: "inner_nav", content: null, metas: [], removed_pages: [] });
      },
      setRoot(obj) {
        if (!!obj) {
          this.secondaryMenus[obj.index].page_id = obj.root.id;
        }
      },
      deleteMenu(index) {
        const menu = this.secondaryMenus[index];
        if (!!menu.id) {
          this.deletedMenus.push(menu.id);
          this.$emit("update", { category: "Menus", prop: "deletedMenus", value: this.deletedMenus });
        }
        if (typeof index !== undefined) {
          this.secondaryMenus.splice(index, 1);
        }
      }
    }
  }
</script>