<template>
  <div class="asset-drop-zone h-100">
    <slot></slot>
    <transition name="fade">
      <div v-if="dragging" class="asset-drop-zone-overlay d-flex flex-column justify-content-center align-items-center text-white">
        <cloud-upload-outline-icon />
        <h3>Assets uploaden</h3>
      </div>
    </transition>
    <div class="asset-drop-zone-area" :class="{ dragging }" @dragleave.prevent="dragleave" @dragover.prevent @drop.stop.prevent="drop" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { namespace } from 'vuex-class';

import { PermissionListModel } from '../stores/types/PermissionStoreModel';
import RouteUtils, { createRoute, ROUTES } from '../tools/route-utils';

const PermissionStore = namespace('permissions');

@Component
export default class AssetDragZone extends Vue {
  dragging = false;

  @PermissionStore.Getter('getPermissions') readonly getPermissions!: (itemName: string) => PermissionListModel;

  mounted() {
    this.$slots.default?.[0]?.elm?.addEventListener('dragenter', this.dragenter);
  }

  beforeDestroy() {
    this.$slots.default?.[0]?.elm?.removeEventListener('dragenter', this.dragenter);
  }

  dragenter() {
    if (this.permissions.canCreate) {
      this.dragging = true;
    }
  }

  dragleave() {
    this.dragging = false;
  }

  async drop(event: DragEvent) {
    this.dragging = false;

    const files = event.dataTransfer?.files;
    if (files) {
      await RouteUtils.push(createRoute(ROUTES.ASSET_CREATE, { files } as any));
      this.$emit('drop', files);
    }
  }

  get permissions(): PermissionListModel {
    return this.getPermissions('CmsAsset');
  }
}
</script>

<style lang="scss" scoped>
@import '../variables';

.asset-drop-zone {
  $offset: 0;
  $color: #007bff;

  .fade-enter-active, .fade-leave-active {
    transition: opacity .25s ease-in-out;
  }
  .fade-enter, .fade-leave-to {
    opacity: 0;
  }

  &-overlay,
  &-area {
    position: absolute;
    top: $offset;
    left: $offset;
    right: $offset;
    bottom: $offset;
  }

  &-overlay {
    border: 2px solid $color;
    background-color: rgba($color, 0.2);
    text-shadow: 0px 2px 3px rgba(0, 0, 0, .15);

    .material-design-icon {
      &,
      > .material-design-icon__svg {
        filter: drop-shadow(0px 2px 3px rgba(0, 0, 0, .05));
        width: 100px;
        height: 100px;
      }
    }

    > * {
      pointer-events: none;
    }
  }

  &-area {
    visibility: hidden;

    &.dragging {
      visibility: visible;
    }
  }
}
</style>
