<template>
  <div
    v-loading="loading"
    @dragover.prevent="onDragOver"
    @dragleave="onDragLeave"
    @drop.prevent="onDrop"
    :class="{ 'is-drag-over': isDragOver }"
    class="px-3 pt-2 h-100 d-flex flex-column itf-append-context">
    <itf-form
      ref="editForm"
      class="d-flex flex-column justify-content-between flex-grow-1 b-append-context__form"
      @keydown.native.shift.enter.stop.prevent="onSaveClick"
      @keydown.native.esc.stop.prevent="$emit('cancel')"
    >
      <slot></slot>
      <div class="py-3 justify-content-end d-flex align-items-center sticky-container">
        <slot name="footer">
          <div v-if="!hideFooter">
            <itf-button v-tooltip.delay="'Hot key: Esc'" secondary squircle :loading="loading" :disabled="loading" @click="$emit('cancel')">
              <span>{{ cancelBtnText }}</span>
            </itf-button>
            <itf-button v-tooltip.delay="'Hot key: Shift + Enter'" primary squircle :loading="loading" :disabled="loading" @click="onSaveClick">
              <span>{{ saveBtnText }}</span>
            </itf-button>
          </div>
        </slot>
      </div>
    </itf-form>
    <div class="b-drag-overlay">
      <span>{{ $t('components.dropzoneText') }}</span>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.sticky-container {
  position: sticky;
  top: auto;
  bottom: 0;
  z-index: 999;
  background-color: var(--bs-body-bg);
}
.is-drag-over .b-append-context__form {
  pointer-events: none;
  user-select: none;
  filter: blur(2px);
}
.b-drag-overlay {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  user-select: none;
  z-index: 1000;

  .is-drag-over & {
    margin: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 3px dashed var(--bs-border-color);
    background-color: rgba(255, 255, 255, 0.6);
  }
  span {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--bs-secondary-color);
  }
}
</style>
<script>
import { Vue, Component, Prop } from 'vue-property-decorator';
import tooltip from '../../directives/tooltip';
import loading from '../../directives/loading';
import itfForm from '../form/Form.vue';
import itfButton from '../button/Button.vue';
import debounce from 'lodash/debounce';

@Component({
  components: {
    itfForm,
    itfButton
  },
  directives: {
    tooltip,
    loading
  },
  filters: {
  }
})
export default class PanelItemEdit extends Vue {
  @Prop(Boolean) loading;
  @Prop(Boolean) hideFooter;
  @Prop(Boolean) dropzone;
  @Prop() droptarget;
  @Prop({ type: String, default: function() { return this.$t('components.modal.save') } }) saveBtnText;
  @Prop({ type: String, default: function() { return this.$t('components.modal.cancel') } }) cancelBtnText;

  isDragOver = false;
  handleDragLeaveDebounced = null;

  created() {
    this.handleDragLeaveDebounced = debounce(() => {
      this.isDragOver = false;
    }, 200);
  }

  onSaveClick() {
    if (this.$refs.editForm && !this.$refs.editForm.doValidation()) {
      return;
    }
    this.$emit('save');
  }

  onDragOver(e) {
    if (!this.dropzone) {
      return;
    }
    this.isDragOver = true;

    // якщо знову зайшли — відміняємо leave
    this.handleDragLeaveDebounced.cancel();
  }

  onDragLeave(e) {
    if (!this.dropzone) {
      return;
    }
    this.handleDragLeaveDebounced();
  }

  onDrop(e) {
    if (!this.dropzone) {
      return;
    }
    this.isDragOver = false;
    if (this.droptarget) {
      this.droptarget.onFileChange(e)
    }
  }
}
</script>
