<template>
  <div class="component component-menu_builder">
    <div class="title">
      <h4>{{ menuTitle }}</h4>
      <span class="icon-container" v-if="type === 'inner-page'"><i class="fas fa-trash-alt icon-button" @click="$emit('delete-menu', index)"></i></span>
    </div>
    <div class="content">
      <div class="menu-items-container">
        <draggable class="draggable-container" :list="menuItems" :options="{ draggable: '.menu-item' }" v-if="!!menuItems">
          <div class="menu-item" v-for="item in menuItems">
            <div class="top" @click="item.showOptions = !item.showOptions">
            <span class="title">
              {{ (!item.customTitle || item.customTitle === '') ? item.title : item.customTitle }}
            </span>
              <span class="icon">
              <i class="fas" :class="{ 'fa-caret-up': !!item.showOptions, 'fa-caret-down': !item.showOptions}"></i>
            </span>
            </div>
            <div class="options" v-show="!!item.showOptions">
              <input type="text" title="Custom Title" placeholder="Custom Title" v-model="item.customTitle" />
              <input type="text" title="URL" placeholder="URL" v-model="item.url" v-if="item.id === -1" />
              <a class="button dark-gray" @click="removePage(item)">Remove</a>
            </div>
          </div>
        </draggable>
        <div class="empty-state" v-if="!menuItems">
          <div class="container" @click="menuItems = []" v-if="type !== 'inner-page'">
            <div class="icon">
              <i class="far fa-plus"></i>
            </div>
            <div class="text">Create</div>
          </div>
          <div class="inner-page-container" v-else>
            <div class="text">
              Select the page that you want to have an inner-page navigation.
            </div>
            <div class="input-container">
              <dropdown :options="innerPagesOptions" option-label="title" placeholder="Page" v-model="innerPageRoot" />
              <a class="button dark-gray" :class="{ disabled: !innerPageRoot }" @click="selectInnerPageRoot">Select</a>
            </div>
          </div>
        </div>
      </div>
      <div class="add-page-container" :class="{ invisible : !menuItems }">
        <dropdown :options="pagesOptions" option-label="title" placeholder="Add Page" v-model="selectedPage" />
        <a class="button dark-gray" :class="{ disabled: !selectedPage }" @click="addPage">Add</a>
      </div>
    </div>
  </div>
</template>

<script>
  import draggable from 'vuedraggable';
  
  export default {
    props: [ "value", "title", "type", "pages", "root", "restrictedPages", "index" ],
    components: { draggable },
    data() {
      return {
        selectedPage: null,
        innerPageRoot: this.root,
      }
    },
    computed: {
      menuTitle: function() {
        if (this.type !== "inner-page" || (this.type === "inner-page" && !this.menuItems)) {
          return this.title;
        }
        else if (!!this.innerPageRoot && !!this.menuItems) {
          return this.innerPageRoot.title + " Menu";
        }
      },
      menuItems: {
        get() {
          return this.value;
        },
        set(val) {
          if (this.menuItems !== val) {
            this.$emit('input', val);
            this.$emit('change');
          }
        }
      },
      pagesOptions: function() {
        const self = this;
        let returnPages = [];
        if (!!this.pages && this.pages.length > 0) {
          if (!!this.menuItems && this.menuItems.length > 0) {
            returnPages = this.pages.slice();
            this.menuItems.forEach( function(item) {
              returnPages = returnPages.filter( function(page) {
                return page.id === -1 || page.id !== item.id;
              });
            });
          }
          else {
            returnPages = this.pages.slice();
          }

          if (!!this.menuItems && this.type === "inner-page") {
            returnPages = returnPages.filter( function(page) {
              return (!!self.restrictedPages && self.restrictedPages.length > 0) ? (page.id !== self.innerPageRoot.id && self.restrictedPages.indexOf(page.id) === -1) : page.id !== self.innerPageRoot.id;
            });
          }

          returnPages.sort( function(a, b) {
            return (a.title > b.title) ? 1 : ((b.title > a.title) ? -1 : 0);
          });
        }

        return returnPages;
      },
      innerPagesOptions: function() {
        const self = this;
        if (this.type === "inner-page") {
          return this.pagesOptions.filter( function(page) {
            return (!!self.restrictedPages && self.restrictedPages.length > 0) ? (page.id !== -1 && self.restrictedPages.indexOf(page.id) === -1) : page.id !== -1;
          });
        }
      }
    },
    methods: {
      addPage() {
        if (!!this.selectedPage) {
          const selectedPageClone = Object.assign({ showOptions: false }, this.selectedPage);
          this.menuItems.push(selectedPageClone);
          this.selectedPage = null;
        }
      },
      removePage(page) {
        this.menuItems = this.menuItems.filter( function(p) {
          return p !== page;
        });
        this.$emit("remove-page", page.id);
      },
      selectInnerPageRoot() {
        this.menuItems = [];
        this.$emit("set-root", { index: this.index, root: this.innerPageRoot });
      }
    }
  }
</script>