<template>
  <div class="asset-detail-variants">
    <h4>Uitsnedes</h4>
    <section v-for="(variant, index) in asset.variants" :key="variant.id">
      <asset-detail-variant :image-url="imageUrl" :asset="asset" v-model="asset.variants[index]" :index="index" @delete="deleteVariant"/>
    </section>
    <button @click.prevent="addVariant" class="btn btn-secondary">
      Uitsnede toevoegen
    </button>
  </div>
</template>



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

import assetDetailVariant from './asset-detail-variant.vue';

import { Asset, AssetVariant } from '../types/api';

@Component({
  components: {
    assetDetailVariant
  }
})
export default class AssetDetailVariants extends Vue {
  @Prop({ type: Object, required: true }) readonly asset!: Asset;
  @Prop({ type: String, required: true }) readonly imageUrl!: string;

  addVariant() {
    this.asset.variants.push({
      name: 'Uitsnede zonder naam',
      isUntouched: false,
      fixedAspectRatio: 0,
      crop: {
        centerPoint: {
          x: this.asset.width / 2,
          y: this.asset.width / 2
        },
        width: this.asset.width,
        height: this.asset.height
      }
    } as AssetVariant)
  }

  deleteVariant(index: number) {
    this.asset.variants.splice(index, 1);
  }
}
</script>

<style lang="scss" scoped>
.asset-detail-variants {
  margin-bottom: 10px;
}
</style>
