<template>
  <div
    v-droppable
    @mouseenter="widgetDidMove ? '' : (hover = true)"
    @mouseleave="hover = false"
    @click="$emit('selected')"
    ref="infoBox"
  >
    <div
      class="dropHighlight"
      :style="{
        backgroundColor:
          selectedDropWidget === index && top
            ? 'rgb(76, 185, 234)'
            : 'transparent',
      }"
    ></div>
    <div
      class="dropHighlightBottom"
      :style="{
        backgroundColor:
          selectedDropWidget === index && bottom
            ? 'rgb(76, 185, 234)'
            : 'transparent',
      }"
    ></div>

    <div
      class="hoverBox"
      :style="{
        border:
          hover && selectedWidget == null
            ? '#7aabc0 solid 2px'
            : selectedWidget === index
            ? '#4CB9EA solid 2px'
            : 'transparent solid 2px',
        'pointer-events': selectedWidget === index ? 'none' : 'auto',
      }"
    >
      <button
        size="sm"
        class="delBtn"
        style="pointer-events: auto"
        @click="$emit('DeleteWidget')"
        v-if="selectedWidget === index"
      >
        <v-icon color="white">mdi-delete-outline</v-icon>
      </button>
    </div>

    <div
      class="hoverParent"
      :style="{ display: selectedWidget === index ? 'none' : 'auto' }"
    >
      <div
        v-if="(isDraging = true)"
        class="hoverChild1"
        v-droppable
        @drag-over="onDragOver('top')"
      ></div>
      <div
        v-if="(isDraging = true)"
        class="hoverChild2"
        v-droppable
        @drag-over="
          onDragOver(arrayLength - 1 === selectedDropWidget ? 'bottom' : 'top')
        "
      ></div>
    </div>
    <slot></slot>
  </div>
</template>

<script>
import { draggable, droppable } from "v-drag-drop";

export default {
  directives: {
    draggable,
    droppable,
  },
  props: {
    widget: Object,
    selectedWidget: Number,
    index: Number,
    widgetDidMove: Boolean,
    hasDragEnded: Boolean,
    selectedDropWidget: Number,
    readOnly: Boolean,
    addToBottom: Object,
    arrayLength: Number,
  },
  data: function () {
    return {
      format: {
        width: "auto",
      },
      fontFamily: {
        width: "auto",
      },
      inlineMode: {
        enable: true,
        onSelection: true,
      },

      inputText: "",
      hover: false,
      highlight: false,
      top: false,
      bottom: false,
    };
  },
  methods: {
    onDragOver(value) {
      if (value === "top") {
        this.$emit("changeDropValue", this.index);
        this.addToBottom.value = false;
        this.top = true;
        this.bottom = false;
      } else {
        this.$emit("changeDropValue", this.index);
        this.addToBottom.value = true;
        this.top = false;
        this.bottom = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.delBtn {
  z-index: 13;
  position: absolute;
  padding: 3px;
  right: -2px;
  bottom: -32px;
  background: rgb(76, 185, 234);
  border: none;
  border-radius: 0px 0px 5px 5px;
}
.hoverBox {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.hoverParent {
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}
.hoverChild1 {
  top: 0px;
  width: 100%;
  height: 50%;
  position: absolute;
  z-index: 11;
}

.hoverChild2 {
  bottom: 0px;
  width: 100%;
  height: 50%;
  position: absolute;
  z-index: 11;
}
.dropHighlight {
  height: 5px;
  width: 100%;
  position: absolute;
  z-index: 1;
  top: 0px;
  left: 0px;
}
.dropHighlightBottom {
  height: 5px;
  width: 100%;
  position: absolute;
  z-index: 1;
  bottom: 0px;
  left: 0px;
}
</style>
