<template>
  <div>
    <portal to="top-header-right">
      <div class="page-header-buttons d-flex align-items-center">
        <router-link class="btn btn-secondary mr-2" to="/cms-tags" v-if="permissions.canCreate">Tags beheren</router-link>
        <router-link class="btn btn-primary" :to="{name: 'asset-create'}" v-if="permissions.canCreate">
          Bestand uploaden
        </router-link>
        <documentation-editor v-if="schema && schema.properties" :schema="schema"></documentation-editor>
      </div>
    </portal>

    <asset-overview class="flex-grow-1" v-model="assetToNavigateTo" editable></asset-overview>
  </div>
</template>

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

import AssetOverview from './asset-overview.vue';
import DocumentationEditor from '../shared/documentation-editor.vue';

import { Asset, Schema } from '../types/api';
import { PermissionListModel } from '../stores/types/PermissionStoreModel';
import RouteUtils, { createRoute, ROUTES } from '../tools/route-utils';

const AssetStore = namespace('assets');
const PermissionStore = namespace('permissions');

@Component({
  components: {
    AssetOverview,
    DocumentationEditor
  }
})
export default class AssetOverviewPage extends Vue {
  assetToNavigateTo: Asset | null = null;

  @AssetStore.State('schema') readonly schema!: Schema;
  @PermissionStore.Getter('getPermissions') readonly getPermissions!: (itemName: string) => PermissionListModel;

  get permissions() {
    return this.getPermissions('CmsAsset');
  }

  @Watch('assetToNavigateTo')
  async onAssetToNavigateToChange(asset: Asset) {
    if (asset) {
      await RouteUtils.push(createRoute(ROUTES.ASSET_EDIT, { id: asset.id }));
    }
  }
}
</script>

<style lang="scss">
</style>
