<template>
  <aside class="drawer" :class="{ 'is-open': isOpen }">
    <div class="drawer-inner">
      <router-link tag="button" class="btn page-create" :to="{ name: 'create-page', activeClass: 'active' }">
        <span :class="'icon-plus'"></span>
      </router-link>
      <h3>Pagina's</h3>
      <label class="search-label">
        <input type="text" v-model="searchQuery" placeholder="zoek..." class="form-control" />
        <clear-input v-if="!!searchQuery" :onClear="() => (searchQuery = '')" />
      </label>
      <ul class="list-group page-tree" :class="{ 'is-loading': isLoading }">
        <page-tree-item
          v-for="page in pages"
          :page="page"
          :key="page.id"
          :is-loading-published-state="isLoadingPublishedPages"
          :searchQuery="searchQuery"
        ></page-tree-item>
      </ul>
    </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: 0.25rem;
  z-index: 10;
  transition: transform 0.6s ease-in;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);

  .drawer-label {
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0 0.25rem 0.25rem 0;
    width: 20px;
    height: 50px;
    text-align: center;
    box-shadow: 1px 0 3px rgba(0, 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
    position: relative;

    &:hover .icon-cross {
      opacity: 0.5;

      &:hover {
        opacity: 1;
      }
    }
  }

  .page-tree {
    border-radius: 5px;
    padding-right: 5px;
    height: 70vh;
    overflow-y: auto;
    background: white;

    &.is-loading {
      opacity: 0.5;
      pointer-events: none;
    }
  }

  .page-create.btn {
    position: absolute;
    right: 3px;
    top: 8px;
  }
}
</style>

<script>
import { mapState, mapGetters } from 'vuex';
import _debounce from 'lodash/debounce';

import pageTreeItem from './page-tree-item.vue';
import clearInput from '../shared/clear-input.vue';
import pageApi from '../api/page-api';

export default {
  name: 'page-tree',
  props: {
    isOpen: {
      type: Boolean
    }
  },
  data() {
    return {
      searchQuery: '',
      searchTree: []
    };
  },
  computed: {
    ...mapState('pages', {
      isLoadingPublishedPages: 'isLoadingPublishedPages',
      isLoading: 'isLoadingPages'
    }),
    ...mapGetters('pages', ['pageTree']),
    pages() {
      return this.searchQuery ? this.searchTree : this.pageTree;
    }
  },
  methods: {
    search: _debounce(async function () {
      const result = await pageApi.search(this.searchQuery);
      this.searchTree = result;
    }, 300)
  },
  components: {
    pageTreeItem,
    clearInput
  },
  watch: {
    searchQuery() {
      this.search();
    }
  }
};
</script>
