<template>
  <div>
    <field :label="schema.id.title" :info="schema.id.description">
      <asset-picker :variant-id="valueCopy.variantId" v-model="valueCopy.id" :required="!!schema.id.required" :readonly="!!schema.id.isReadOnly"/>
      <schema-validator :value="valueCopy.id" :schema="schema.id"/>
    </field>
    <field v-if="valueCopy && valueCopy.id">
      <router-link class="btn btn-secondary" :to="{name: 'asset-edit', params: { id: valueCopy.id }}" >Bekijk in asset manager</router-link>
    </field>
    <field label="Uitsnede" v-if="asset">
      <select v-model="valueCopy.variantId" class="form-control">
        <option selected :value="null">De originele afbeelding</option>
        <option v-for="variant in asset.variants" :value="variant.id" :key="variant.id">
          {{variant.name}}
        </option>
      </select>
    </field>
    <field :label="schema.mobileId.title" :info="schema.mobileId.description">
      <asset-picker :variant-id="valueCopy.mobileVariantId" v-model="valueCopy.mobileId" :required="!!schema.mobileId.required" :readonly="!!schema.mobileId.isReadOnly"/>
      <schema-validator :value="valueCopy.mobileId" :schema="schema.mobileId"/>
    </field>
    <field v-if="mobileAsset && mobileAsset.id">
      <router-link class="btn btn-secondary" :to="{name: 'asset-edit', params: { id: mobileAsset.id }}" >Bekijk in asset manager</router-link>
    </field>
    <field label="Uitsnede" v-if="mobileAsset">
      <select v-model="valueCopy.mobileVariantId" class="form-control">
        <option selected :value="null">De originele afbeelding</option>
        <option v-for="variant in mobileAsset.variants" :value="variant.id" :key="variant.id">
          {{variant.name}}
        </option>
      </select>
    </field>
  </div>
</template>

<script>
import schemaValidator from '../../schema/schema-validator.vue';
import assetPicker from './asset-picker.vue';
import { ValueSyncMixin } from '../value-sync-mixin.js';
import field from './field.vue';
import AssetApi from '../../api/asset-api';

export default {
  name: 'responsive-image-picker',
  mixins: [ValueSyncMixin],
  props: {
    value: {
      type: Object,
      required: true,
      docs: `Het <code>ResponsiveImage</code> object.`,
      demoValue: null
    },
    schema: {
      type: Object,
      required: true,
      docs: `Het <code>schema</code> dat bij het responsive image object hoort.`,
      demoValue: () => ({
        $type: 'Q42.Cms.Domain.Atoms.ResponsiveImage',
        format: 'responsive-image-picker'
      })
    }
  },
  data() {
    return {
      asset: undefined,
      mobileAsset: undefined
    }
  },
  watch: {
    'value.id': {
      immediate: true,
      async handler(assetId) {
        if (!assetId) {
          return;
        }

        // Prevent retrieving asset we already retrieved or are currently retrieving
        if (assetId === this.value.mobileId) {
          this.asset = await this.mobileAssetPromise;
        }

        this.assetPromise = AssetApi.getAssetById(assetId);
        this.asset = await this.assetPromise;
      }
    },
    'value.mobileId': {
      immediate: true,
      async handler(mobileAssetId) {
        if (!mobileAssetId) {
          return;
        }

        // Prevent retrieving asset we already retrieved or are currently retrieving
        if (mobileAssetId === this.value.id) {
          this.mobileAsset = await this.assetPromise;
        }

        this.mobileAssetPromise = AssetApi.getAssetById(mobileAssetId);
        this.mobileAsset = await this.mobileAssetPromise;
      }
    },
    asset(asset, oldAsset) {
      // Do not do anything when loading the asset for the first time
      if (!oldAsset && !this.value.isNew) {
        return;
      }

      // Try to select the right crops immediately
      const desktopVariant = asset.variants.find(variant => variant.name === "Responsive desktop");
      this.valueCopy.variantId = desktopVariant ? desktopVariant.id : null;

      if (!this.mobileAsset) {
        this.mobileAsset = asset;
        this.valueCopy.mobileId = asset.id;
      }
    },
    mobileAsset(mobileAsset, oldMobileAsset) {
      // Do not do anything when loading the asset for the first time
      if (!oldMobileAsset && !this.value.isNew) {
        return;
      }

      const mobileVariant = mobileAsset.variants.find(variant => variant.name === "Responsive mobiel");
      this.valueCopy.mobileVariantId = mobileVariant ? mobileVariant.id : null;
    }
  },
  components: {
    assetPicker,
    field,
    schemaValidator
  }
}
</script>
