<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>

      <modal ref="modal">
        <header class="modal-header">
          <h3 class="modal-title">Kies bestand</h3>
          <button type="button" class="close" @click.prevent="closeModal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </header>
        <div class="modal-body">
          <button class="btn btn-primary" @click="createAsset" v-if="mode == 'overview'">Upload bestand</button>
          <p class="modal-label" v-if="mode == 'overview'">of selecteer uit de lijst</p>
          <asset-overview v-if="mode == 'overview'" v-model="asset"></asset-overview>
          <asset-detail v-if="mode == 'create'" ref="asset-detail" v-model="asset"></asset-detail>
        </div>
      </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;
  .modal-label {
    margin: 1rem 0;
  }
}
.focus-catcher {
  position: absolute;
  visibility: hidden;
}
</style>

<script>
import { assetStore } from '../../tools/asset-store.js';
import assetOverview from '../../assets/asset-overview.vue';
import assetDetail from '../../assets/asset-detail.vue';
import modal from '../../shared/modal.vue';

export default {
  props: {
    value: {
      validator: value => value === null || typeof value === 'string',
      docs: `De <code>guid</code> van een asset.`,
      demoValue: null
    },
    required: {
      type: Boolean,
      default: false
    },
    readonly: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      asset: null,
      mode: 'overview',
      hovering: false
    };
  },
  computed: {
    previewUrl() {
      return assetStore.previewUrl(this.asset);
    }
  },
  watch: {
    asset(newValue) {
      if (newValue) {
        this.$emit('input', newValue.id); // vue syntax: update prop 'value' in the parent
        this.closeModal();
      } else {
        this.$emit('input', null); // vue syntax: update prop 'value' in the parent
      }
    }
  },
  mounted() {
    if (this.value) {
      assetStore.getAssetById(this.value).then(asset => this.asset = asset);
    }
  },
  methods: {
    createAsset() {
      this.mode = 'create';
    },
    openModal(mode) {
      this.mode = mode;
      this.$refs.modal.show();
    },
    closeModal() {
      this.$refs.modal.hide();
    },
    deleteItem() {
      this.asset = null;
    },
    onFileDrop(e) {
      this.hovering = false;
      var files = e.target.files || e.dataTransfer.files;
      this.openModal('create');
      this.$nextTick(() => {
        this.$refs['asset-detail'].selectFile(files[0]);
      });
    }
  },
  components: {
    assetOverview,
    assetDetail,
    modal
  }
}
</script>
