<template>
  <component :is="component">
    <b-card-title><span v-html="fileFormat" /></b-card-title>
    <HrefActions isAsset :data="asset" :shown="shown" @show="show" :auth="auth" />
    <b-card-text class="mt-4" v-if="asset.description">
      <Description :description="asset.description" compact />
    </b-card-text>
    <Metadata class="mt-4" :data="resolvedAsset" :context="context" :ignoreFields="ignore" title="" type="Asset" />
  </component>
</template>

<script>
import { formatMediaType } from '@radiantearth/stac-fields/formatters';
import Description from './Description.vue';
import HrefActions from './HrefActions.vue';
import StacFieldsMixin from './StacFieldsMixin';
import AuthUtils from './auth/utils';
import Utils from '../utils';
import { Asset, STACReference } from 'stac-js';

export default {
  name: 'AssetAlternative',
  components: {
    Description,
    HrefActions,
    Metadata: () => import('./Metadata.vue')
  },
  mixins: [
    StacFieldsMixin({ formatMediaType })
  ],
  props: {
    asset: {
      type: Object,
      required: true
    },
    hasAlternatives: {
      type: Boolean,
      default: false
    },
    shown: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      ignore: [
        // Asset fields that are handled directly
        'href',
        'title',
        'description',
        'type',
        'roles',
        // Don't show these complex lists of coordinates: https://github.com/radiantearth/stac-browser/issues/141
        'proj:bbox',
        'proj:geometry',
        // Don't show very specific options that can't be rendered nicely
        'table:storage_options',
        'xarray:open_kwargs',
        'xarray:storage_options',
        // Special handling for auth and storage
        'auth:refs',
        'storage:refs',
        // Alternative Assets are displayed separately
        'alternate',
        'alternate:name',
      ]
    };
  },
  computed: {
    context() {
      return this.asset.getContext();
    },
    resolvedAsset() {
      if (Array.isArray(this.asset['storage:refs'])) {
        const asset = new Asset(this.asset, this.asset.getKey(), this.context);
        asset['storage:schemes'] = this.resolveStorage(this.asset);
        return asset;
      }
      return this.asset;
    },
    component() {
      return this.hasAlternatives ? 'div' : 'b-card-body';
    },
    fileFormat() {
      if (typeof this.asset.type === "string" && this.asset.type.length > 0) {
        return this.formatMediaType(this.asset.type);
      }
      return null;
    },
    auth() {
      return AuthUtils.resolveAuth(this.asset);
    }
  },
  methods: {
    resolveStorage(obj) {
      if (obj instanceof STACReference) {
        const refs = obj.getMetadata('storage:refs');
        const schemes = obj.getMetadata('storage:schemes');
        if (Utils.size(refs) > 0 && Utils.size(schemes) > 0) {
          return refs
            .map(ref => schemes[ref])
            .filter(ref => Utils.isObject(ref));
        }
      }
      return [];
    },
    show() {
      this.$emit('show', ...arguments);
    }
  }
};
</script>
