<template>
  <loader :is-loading="isLoading">
    <portal to="top-header-right">
      <div class="page-header-buttons d-flex align-items-center">
        <router-link class="btn btn-primary" :to="createItemRoute" v-if="canCreate">{{capitalizeModuleName}} toevoegen</router-link>
        <documentation-editor v-if="schema && schema.properties" :schema="schema"></documentation-editor>
      </div>
    </portal>

    <item-list :items="items" :fields="fields" :schema="schema" :action="openItem" :custom-fields="customFields" :module="module" search-top></item-list>
  </loader>
</template>

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

import CrudStoreModel, { BaseSchemaModel, CrudStoreItemsModel, CrudStoreSchemaModel } from "../stores/types/CrudStoreModel";

import Loader from '../shared/loader.vue';
import Listing from '../shared/listing.vue';
import DocumentationEditor from '../shared/documentation-editor.vue';
import { SupportedLanguage } from '../types/language';
import CrudHelpers from './crud-helpers';
import RouteUtils, { createRoute, ROUTES } from '../tools/route-utils';

const PermissionStore = namespace('permissions');
const LanguageStore = namespace('languages');

@Component({
  components: {
    Loader,
    DocumentationEditor,
    'item-list': Listing
  }
})
export default class CrudOverview<T extends CrudStoreModel> extends Vue {
  @Prop(String) readonly module!: string;
  @Prop(Object) readonly crudStore!: T;

  unsubscribe: (() => void) | null = null;

  @LanguageStore.State('selected') selectedLanguage!: SupportedLanguage;
  @PermissionStore.Getter('canCreate') readonly canCreatePermission!: Function;

  async beforeMount() {
    this.unsubscribe = await CrudHelpers.subscribeCrudData(this.module);
  }

  beforeDestroy() {
    this.unsubscribe?.();
  }

  async openItem(item: CrudStoreItemsModel) {
    await RouteUtils.push(createRoute(ROUTES.CRUD_EDITOR(this.module),
      { id: item.id as string },
      { query: this.$route.query }
    ));
  }

  get createItemRoute() {
    return createRoute(ROUTES.CRUD_CREATE(this.module), null, { query: this.$route.query });
  }

  get items(): object {
    return this.crudStore.items;
  }

  get schema(): CrudStoreSchemaModel | undefined {
    return this.crudStore.schema;
  }

  get fields(): object {
    if (!this.crudStore.schema) {
      return {};
    }

    const fields: {
          [k: string]: string
      } = {};

    for (const [property, value] of Object.entries(this.crudStore.schema.properties)) {
      if (!this.crudStore.overview.fields?.includes(property)) {
        continue;
      }

      fields[(value as BaseSchemaModel).title] = property;
    }

    return fields;
  }

  get customFields(): object | undefined {
    if(!this.crudStore.overview) {
      return undefined;
    }

    return this.crudStore.overview.customFields;
  }

  get isLoading(): boolean {
    return !this.crudStore.schema || !this.crudStore.overview;
  }

  get capitalizeModuleName(): string {
    if (!this.crudStore.schema) {
      return '';
    }

    return this.crudStore.schema.title;
  }

  get canCreate(): boolean {
    if (!this.crudStore.schema) {
      return false;
    }

    return !this.crudStore.schema.preventCreate && this.canCreatePermission(this.module);
  }
}
</script>
