<template>
  <li tabindex="0" role="button" v-if="opened" v-show="showPage(page)">
    <div class="nested-page-table-item" v-on="!isVirtualPage(page) ? { click: openPage } : {}" :style="rowStyling">
      <div class="nested-page-table-item-column page">
        <div class="nested-page-table-item-toggle" :style="toggleStyling">
          <button class="btn p-0 m-n1" @click.stop="toggleChildren" v-if="page.children.length > 0">
            <chevron-up-icon v-if="childrenOpened" />
            <chevron-down-icon v-else />
          </button>
        </div>
        <folder-icon class="page-folder-icon page-folder mr-1" v-if="isFolder(page)" />
        <div class="page-title">
          {{ page.name }}
        </div>
      </div>

        <div class="nested-page-table-item-column status" v-if="!isFolder(page)">
          <span class="badge badge-success" v-if="isPublishedPage">Gepubliceerd</span>
          <span class="badge badge-secondary" v-else-if="!isPublishedPage">Niet gepubliceerd</span>
        </div>
        <div class="nested-page-table-item-column" v-if="!isFolder(page)">{{ page.itemDisplayName }}</div>
        <div class="nested-page-table-item-column options" v-if="permissions.canCreate && !isVirtualPage(page)">
          <dropdown-menu label="Opties" hide-arrow right>
            <template v-slot:label>
              <dots-vertical-icon />
            </template>
            <router-link v-if="!page.isSingleton && !isFolder(page)" :to="{ name: 'page-copy', params: { id: page.id }, query: { parentId: page.parentId || page.id, copyName: page.name } }" class="p-2 d-flex align-items-center dropdown-item">
              Kopiëren
            </router-link>
            <router-link :to="{ name: 'page-create-in', params: { parentId: page.id } }" class="p-2 d-flex align-items-center dropdown-item">
              Subpagina toevoegen
            </router-link>
            <router-link :to="{ name: 'page-create-in', params: { parentId: page.id }, query: { isFolder: true } }" class="p-2 d-flex align-items-center dropdown-item">
              Subfolder toevoegen
            </router-link>
          </dropdown-menu>
        </div>
    </div>
    <ul class="list-group list-unstyled" v-if="hasChildren">
      <page-overview-item
        ref="nestedPageTableItem"
        v-for="child in page.children"
        :key="child.id"
        :page="child"
        :opened="childrenOpened"
        :show-page="showPage"
        :parents="parents + 1"
        @toggle="$emit('toggle')"
      />
    </ul>
  </li>
</template>

<script lang="ts">
import { Component } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

import DropdownMenu from '../shared/dropdown-menu.vue';
import NestedPageTableItem from './nested-page-table-item.vue';
import { PermissionListModel } from '../stores/types/PermissionStoreModel';

const PageStore = namespace('pages');
const PermissionStore = namespace('permissions');

@Component({
  name: 'PageOverviewItem',
  components: {
    DropdownMenu
  }
})
export default class PageOverviewItem extends NestedPageTableItem {
  @PermissionStore.Getter('getPermissions') readonly getPermissions!: (itemName: string) => PermissionListModel;
  @PageStore.State('publishedPageIds') readonly publishedPageIds!: [];

  get permissions(): PermissionListModel {
    return this.getPermissions('CmsPage');
  }

  get isPublishedPage() {
    return this.publishedPageIds.find(pageId => pageId === this.page.id);
  }
}
</script>

<style lang="scss" scoped>
@import 'nested-page-table-item';

.nested-page-table-item {
  color: black;

  .page {
    display: flex;
    flex: 0 0 50%;
    padding: 0;

    &-title {
      padding: .5rem 0;
    }

    &-folder {
      display: flex;
      align-items: center;
    }

    .page-folder-icon svg {
      fill: #6c757d;
    }
  }

  .status {
    flex: 0 0 20%;
  }

  .options {
    position: absolute;
    right: 16px;

    ::v-deep .dropdown-toggle {
      padding: 0.5rem;
    }
  }
}
</style>
