<template>
  <div>
    <template v-if="readonly">
      <div class="asset-picker readonly">
        <img :src="previewUrl" v-if="previewUrl">
      </div>
    </template>

    <template v-else>
      <input class="focus-catcher">
      <div class="asset-picker" @click="openModal('overview')" @dragenter="hovering = true" @dragleave="hovering = false" :class="{ hovering: hovering }">
        <span class="icon-cross" v-if="!required && value" @click.stop="deleteItem"></span>
        <img :src="previewUrl" v-if="previewUrl">
        <span class="choose" v-else>Kies bestand</span>
        <input type="file" @change="onFileDrop" @click.prevent>
      </div>

      <asset-modal ref="modal" v-model="asset" :type="type"></asset-modal>
    </template>
  </div>
</template>

<style lang="scss" scoped>
  .asset-picker {
    position: relative;
    width: 100%;
    height: 17vw;
    cursor: pointer;
    border: 2px dashed #ddd;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    img {
      width: 100%;
      height: 100%;
      object-fit: scale-down;
    }

    .choose {
      text-align: center;
    }

    .icon-cross {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      opacity: 0;
      transition: 0.3s opacity ease;
      z-index: 1;
    }

    &:hover .icon-cross {
      opacity: 0.5;

      &:hover {
        opacity: 1;
      }
    }

    > input[type=file] {
      position: absolute;
      cursor: pointer;
      top: 0px;
      right: 0;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }

    &.hovering {
      border-color: currentColor;
    }

    &.readonly {
      cursor: default;
      background-color: rgba(0, 0, 0, 0.07);
    }
  }

  .modal-body {
    height: 70vh;
    overflow-y: auto;
    border-radius: 0;
    padding: 1rem;
  }

  .focus-catcher {
    position: absolute;
    visibility: hidden;
  }
</style>

<script>
import AssetApi from '../../api/asset-api';
import { getPreviewUrlForAsset } from '../../api/asset-api-helpers';
import assetModal from './asset-modal';
import { AssetTypeFilter } from '../../types/api';

export default {
  props: {
    value: {
      validator: value => value === null || typeof value === 'string',
      docs: `De <code>guid</code> van een asset.`,
      demoValue: null
    },
    variantId: {
      validator: value => value === null || typeof value === 'string',
      default: null,
      docs: `De <code>guid</code> van een variant van deze asset.`,
      demoValue: null,
    },
    required: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      asset: null,
      hovering: false,
      previewUrl: '',
      type: AssetTypeFilter.Image
    };
  },
  async mounted() {
    if (this.value) {
      this.asset = await AssetApi.getAssetById(this.value);
    }
  },
  methods: {
    openModal(mode) {
      this.$refs.modal.openModal(mode);
    },
    closeModal() {
      this.$refs.modal.closeModal();
    },
    deleteItem() {
      this.asset = null;
    },
    onFileDrop(e) {
      this.hovering = false;
      var files = e.target.files || e.dataTransfer.files;
      this.openModal('create');
      this.$nextTick(() => {
        this.$refs.modal.onFileDrop(files[0]);
      });
    }
  },
  watch: {
    async asset(newAsset) {
      if (newAsset) {
        this.$emit('input', newAsset.id); // vue syntax: update prop 'value' in the parent
        const variant = newAsset.variants.find(v => v.id === this.variantId);
        this.previewUrl = variant ? await AssetApi.createPublicAssetUrl(newAsset.id, 600, null, variant.crop) : getPreviewUrlForAsset(this.asset);
        this.closeModal();
      } else {
        this.previewUrl = '';
        this.$emit('input', null); // vue syntax: update prop 'value' in the parent
      }
    },
    async value(newValue) {
      this.asset = await AssetApi.getAssetById(newValue);
    },
    async variantId(newVariantId) {
      const variant = this.asset ? this.asset.variants.find(v => v.id === newVariantId) : null;
      this.previewUrl = variant ? await AssetApi.createPublicAssetUrl(this.asset.id, 600, null, variant.crop) : getPreviewUrlForAsset(this.asset);
    }
  },
  components: {
    assetModal
  }
};
</script>
