<template>
  <li tabindex="0" role="button" v-if="opened" v-show="showPage(page)">
    <div class="nested-page-table-item" @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 language" v-for="language in allLanguages" :key="language.key">
        <check-icon v-if="page.translations.includes(language.key)" />
      </div>
    </div>
    <ul class="list-group list-unstyled" v-if="hasChildren">
      <page-translations-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 '../dropdown-menu.vue';
import NestedPageTableItem from '../../pages/nested-page-table-item.vue';
import { SupportedLanguage } from '../../types/language';

const LanguageStore = namespace('languages');

@Component({
  name: 'PageTranslationsOverviewItem',
  components: {
    DropdownMenu
  }
})
export default class PageTranslationsOverviewItem extends NestedPageTableItem {
  @LanguageStore.State('all') allLanguages!: SupportedLanguage[];
}
</script>

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

.nested-page-table-item {
  .page {
    display: flex;
    flex-grow: 1;
    padding: 0;

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

  .language {
    flex: 0 0 50px;
    color: var(--green);
  }
}
</style>
