<template>
  <loader class="flex-grow-1" :is-loading="isLoading">
    <portal to="top-header-right">
      <div class="d-flex flex-column">
        <h5 v-if="isBulkUpload">{{ bulkUploadProgressLabel }}</h5>
      </div>
      <div class="page-header-buttons">
        <references ref="refsDialog" v-if="asset && asset.id" :item-id="asset.sourceId" item-name="Asset"></references>
      </div>
    </portal>
    <div class="page-container card h-100 mb-5">
      <div class="card-body p-0">
        <asset-detail ref="assetDetail" class="flex-grow-1" :asset-prop="asset" :bulk-upload="bulkUpload" :default-image-crops="defaultImageCrops" v-model="onDoneWithAssetDetail" @delete-error="openReferencesErrorModal"></asset-detail>
      </div>
    </div>
  </loader>
</template>

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

import AssetDetail from './asset-detail.vue';
import Loader from '../shared/loader.vue';
import References from '../shared/references.vue';

import { Asset, AssetVariant } from '../types/api';
import AssetApi from '../api/asset-api';
import { Route } from 'vue-router';
import { RawLocation } from 'vue-router/types/router';

export interface AssetBulkUpload {
  files: File[];
  currentFileIndex: number;
  label: string;
}

@Component({
  components: {
    AssetDetail,
    Loader,
    References
  },
  async beforeRouteEnter(to: Route, from: Route, next: (to?: RawLocation | false | ((vm: AssetDetailPage) => any) | void) => void) {
    const { id } = to.params;

    if (id) {
      const asset = await AssetApi.getAssetById(id);

      return next(vm => {
        vm.asset = asset;
        vm.isLoading = false;
      });
    } else {
      next(vm => {
        vm.isLoading = false;
      });
    }
  }
})
export default class AssetDetailPage extends Vue {
  @Prop({ type: Array, default: () => [] }) readonly defaultImageCrops!: AssetVariant[];
  @Ref() readonly refsDialog!: any; // TODO: Replace with typescript class once rewritten
  @Ref() readonly assetDetail!: AssetDetail;

  asset: Asset | null = null;
  isLoading = true;
  onDoneWithAssetDetail = {}; // <asset-detail> expects an object, for this page is doesn't matter what the value is. We only need a change of the data
  files: File[] = [];
  currentFileIndex = 0;

  async mounted() {
    this.files = this.$route.params.files as unknown as File[] || [];
    if (this.files.length >= 1) {
      await this.$nextTick();
      this.selectNextFile();
    }
  }

  selectNextFile() {
    this.assetDetail.selectFile(this.files[this.currentFileIndex], true);
    this.currentFileIndex++;
  }

  openReferencesErrorModal() {
    this.refsDialog.openErrorModal();
  }

  get bulkUpload(): AssetBulkUpload | null {
    return this.isBulkUpload ? {
      currentFileIndex: this.currentFileIndex,
      files: this.files,
      label: this.bulkUploadProgressLabel
    } : null;
  }

  get isBulkUpload(): boolean {
    return this.files.length > 1;
  }

  get bulkUploadProgressLabel(): string {
    return `${this.currentFileIndex} / ${this.files.length} assets`;
  }

  @Watch('onDoneWithAssetDetail')
  onDoneWithAssetDetailChange(asset: Asset | null) {
    if (asset && this.isBulkUpload && this.currentFileIndex < this.files.length) {
      this.selectNextFile();
    } else {
      this.$router.go(-1);
    }
  }
}

</script>
