<template>
  <li class="list-group-item">
    <span
      v-if="!searchQuery"
      :class="['expander', expanded ? 'icon-minus' : expandable ? 'icon-plus' : null]"
      @click="expandCollapse()"
    ></span>
    <router-link
      :to="{ name: 'page-editor', params: { id: page.id }, activeClass: 'active' }"
      class="page-tree-item"
      :class="{
        'not-published': !isPublished(page.id) && !isLoadingPublishedState,
        loading: isLoadingPublishedState,
        'search-result': page.isSearchResult
      }"
    >
      {{ page.name }}
    </router-link>
    <router-link
      tag="button"
      v-if="canCreateChildren"
      class="btn btn-link page-tree-item page-create"
      :to="{ name: 'create-page-parent', params: { parentId: page.id }, activeClass: 'active' }"
    >
      <span class="icon-file-empty"></span> nieuwe subpagina
    </router-link>
    <ul class="list-group" v-if="expanded">
      <page-tree-item
        v-for="subPage in page.children"
        :page="subPage"
        :key="subPage.id"
        :is-loading-published-state="isLoadingPublishedState"
        :searchQuery="searchQuery"
      ></page-tree-item>
    </ul>
  </li>
</template>

<style lang="scss" scoped>
$expandIconSize: 10px;

.list-group {
  border: none;
  padding-left: $expandIconSize * 2;
  margin-left: 0;

  .list-group-item {
    border: none;
    padding-bottom: 5px;
    padding-top: 5px;
    padding-right: 0;
    margin-bottom: 0; // Removes weird margin-bottom -1 from bootstrap.
    margin-left: 0;
    padding-left: 0;
  }
}

.page-tree-item {
  margin-left: $expandIconSize * 1.5;
  padding: 3px;
  border-radius: 3px 5px;

  &.search-result {
    font-weight: bold;
  }

  & ~ .page-create {
    display: none;
    margin-left: $expandIconSize * 3.5;
    font-size: 90%;
    &.active {
      display: block;
    }
  }

  &.loading {
    animation: loading 0.8s infinite ease-in-out;
  }

  &.not-published {
    color: #bbb;
  }

  &.active {
    background: #ccc;

    &.not-published {
      color: #fff;
    }

    & ~ .page-create {
      display: block;
    }
  }
}
a.page-tree-item {
  color: inherit;
}

.expander {
  display: inline-block;
  width: 10px;
  cursor: pointer;
  font-size: $expandIconSize;

  + .page-tree-item {
    margin-left: 0;
  }
}

@keyframes loading {
  0% {
    color: #bbb;
  }

  50% {
    color: inherit;
  }

  100% {
    color: #bbb;
  }
}
</style>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';

export default {
  name: 'page-tree-item',
  props: ['page', 'isLoadingPublishedState', 'searchQuery'],
  data() {
    return {
      expanded: false
    };
  },
  methods: {
    ...mapActions('pages', ['expandPage', 'collapsePage']),
    expandCollapse() {
      this.expanded ? this.collapsePage(this.page.id) : this.expandPage(this.page.id);
      this.expanded = !this.expanded;
    },
    isPublished(pageId) {
      return this.publishedPageIds.includes(pageId);
    }
  },
  computed: {
    ...mapState('pages', ['publishedPageIds']),
    ...mapGetters('permissions', ['canCreate']),
    expandable() {
      return this.page.hasUnloadedChildren || (this.hasChildren && !this.expanded);
    },
    hasChildren() {
      return this.page.children && this.page.children.length;
    },
    canCreateChildren() {
      return this.page.allowNew && this.canCreate(this.page.itemName);
    },
    isPageCollapsed() {
      return this.$store.getters['pages/isPageCollapsed'](this.page.id);
    }
  },
  watch: {
    searchQuery: {
      handler() {
        this.expanded = this.isPageCollapsed ? !!this.searchQuery : !!this.hasChildren;
      },
      immediate: true
    }
  }
};
</script>
