<template>
  <aside class="drawer" :class="{ 'is-open': isOpen }">
    <div class="drawer-inner">
      <h3>Pagina's</h3>
      <loader>
        <label class="search-label">
          <input v-model="pageSearch" type="search" placeholder="zoek..." class="form-control"/>
        </label>
        <ul class="list-group page-tree">
          <page-tree-item v-for="page in pageTree" :show-page="doesPageMatchSearch" :page="page" :key="page.id" :is-loading-published-state="isLoadingPublishedPages"></page-tree-item>
        </ul>
      </loader>
    </div>
    <div class="drawer-label">
      <span class="icon-circle-right"></span>
    </div>
  </aside>
</template>

<style lang="scss" scoped>
$buttons-color: #01335f;
.drawer {
  position: fixed;
  width: 26vw;
  left: -25vw;
  padding: 1vw 1vw 1vw 2vw;
  background: #fff;
  border-radius: .25rem;
  z-index: 10;
  transition: transform 0.6s ease-in;
  box-shadow: 0 0 5px rgba(0,0,0,.2);
  .drawer-label {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 .25rem .25rem 0;
    width: 20px;
    height: 50px;
    text-align: center;
    box-shadow: 1px 0 3px rgba(0,0,0, .2);
    background: #fff;
    span {
      color: #ccc;
      line-height: 50px;
    }
  }
  &:hover, &.is-open {
    transform: translateX(24vw);
    transition: transform 0.3s ease-out;
  }
  .search-label {
    display: block; // Make sure label is 100% wide
  }
  .page-tree {
    border-radius: 5px;
    padding-right: 5px;
    height: 70vh;
    overflow-y: auto;
    background: white;
  }
}
</style>

<script>
  import { pageStore } from '../tools/page-store.js';
  import pageTreeItem from './page-tree-item.vue';
  import loader from '../shared/loader.vue';

  export default {
    name: 'page-tree',
    props: {
      isOpen: {
        type: Boolean
      }
    },
    data() {
      return {
        pageSearch: ''
      };
    },
    computed: {
      pageTree: () => pageStore.pageTree,
      isLoading: () => pageStore.isLoading,
      isLoadingPublishedPages: () => pageStore.state.isLoadingPublishedPages
    },
    methods: {
      /**
       * Finds out if the given page matches the current search query.
       * This function makes sure that pages with matching children will be shown.
       */
      doesPageMatchSearch(page) {
        var children = page.children.filter(subPage => {
          if(subPage.children && subPage.children.length) {
            return this.doesPageMatchSearch(subPage);
          }
          return this.nameMatchesSearch(subPage);
        });

        if(children.length) {
          // Has children, but not when filtered.
          return true;
        }

        return this.nameMatchesSearch(page);
      },
      nameMatchesSearch(page) {

        // Get all query words, possibly with "type:..." in it
        const allQueries = this.pageSearch.toLowerCase().split(/\s+/);

        // Get all "type:..." queries but strip the "type:" from them
        const typeQueries = allQueries
            .filter(q => q.length > "type:".length && q.startsWith("type:"))
            .map(q => q.replace(/^type:/, ""));

        // Get all the query words that do not start with "type:"
        const normalQueries = allQueries
            .filter(q => q.length > 0 && !q.startsWith("type:"));

        const typeQueriesSuccess = typeQueries.every(q => page.itemName.toLowerCase().indexOf(q) >= 0);
        const normalQueriesSuccess = normalQueries.every(q => `${page.name} ${page.title}`.toLowerCase().indexOf(q) >= 0);

        return typeQueriesSuccess && normalQueriesSuccess;
      }
    },
    components: {
      pageTreeItem,
      loader
    }
  };
</script>
