<template>
  <div>
    <div class="picker-wrapper">
      <button class="picker" @click.prevent="openModal('overview')" @dragenter="hovering = true" @dragleave="hovering = false" :class="{ hovering: hovering }">
        <div class="picker-placeholder" v-if="asset">{{ asset.title }}</div>
        <div class="picker-placeholder" v-else>Kies een bestand</div>
        <input type="file" class="drop-input" @change="onFileDrop" @click.prevent>
      </button>
      <div class="button-wrapper" v-if="asset">
        <button class="btn btn-sm btn-outline-danger vue-delete-button" @click.prevent="deleteAsset">x</button>
        <a :href="asset.blobstoreUrl" target="_blank" class="btn btn-success preview-btn">Preview</a>
      </div>
    </div>

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

<script>
import { ValueSyncMixin } from '../value-sync-mixin.js';
import AssetApi from '../../api/asset-api';
import assetModal from './asset-modal';
import { AssetTypeFilter } from '../../types/api';

export default {
  name: 'non-image-asset-picker',
  mixins: [ValueSyncMixin],
  props: {
    value: {
      validator: value => value === null || typeof value === 'string',
      docs: `De <code>guid</code> van een asset.`,
      demoValue: null
    },
    required: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      asset: null,
      previewUrl: '',
      hovering: false,
      type: AssetTypeFilter.PDF
    }
  },
  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();
    },
    deleteAsset() {
      this.asset = null;
    },
    onFileDrop(e) {
      this.hovering = false;
      const 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);
        this.closeModal();
      } else {
        this.$emit('input', null);
      }
    },
    async value(newValue) {
      this.asset = await AssetApi.getAssetById(newValue);
    }
  },
  components: {
    assetModal,
  },
}
</script>

<style scoped lang="scss">
  .picker-wrapper {
    display: flex;

    .drop-input {
      position: absolute;
      cursor: pointer;
      top: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
    }

    .picker {
      border: 2px dashed #ddd;
      border-radius: .25em;
      width: 100%;
      text-align: center;
      padding: 6px;
      position: relative;
      background-color: #fff;

      &.hovering {
        border-color: currentColor;
      }
    }

    .button-wrapper {
      display: flex;

      .btn {
        margin-left: 16px;
      }
    }
  }
</style>
