<template>
  <div
    ref="drop_area"
    class="drop-area"
    @drop.stop.prevent="
      (event) => {
        $refs.drop_area.style.visibility = 'hidden'

        if (event.dataTransfer && event.dataTransfer.files) {
          $emit('change', event.dataTransfer.files)
        }
      }
    "
    @dragenter.prevent="allowDrag"
    @dragover.prevent="allowDrag"
    @dragleave.prevent="$refs.drop_area.style.visibility = 'hidden'"
  />
</template>

<script>
export default {
  name: 'DropArea',
  props: {
    accept: {
      type: String,
      default: '',
    },
  },
  mounted() {
    // eslint-disable-next-line nuxt/no-env-in-hooks
    if (process.client) {
      document.addEventListener('dragenter', () => {
        this.$refs.drop_area.style.visibility = 'visible'
      })
    }
  },
  methods: {
    allowDrag(event) {
      const file = event.dataTransfer?.items[0]

      if (
        file &&
        this.accept
          .split(',')
          .reduce(
            (acc, t) => acc || file.type.startsWith(t) || file.type === t,
            false
          )
      ) {
        // Adds file dropping indicator
        event.dataTransfer.dropEffect = 'copy'
        event.preventDefault()
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.drop-area {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  visibility: hidden;
  background-color: hsla(0, 0%, 0%, 0.5);
  transition: visibility 0.2s ease-in-out, background-color 0.1s ease-in-out;
  display: flex;

  &::before {
    --indent: 4rem;

    content: ' ';
    position: relative;
    top: var(--indent);
    left: var(--indent);
    width: calc(100% - (2 * var(--indent)));
    height: calc(100% - (2 * var(--indent)));
    border-radius: 1rem;
    border: 0.25rem dashed var(--color-button-bg);
  }
}
</style>
