<template>
  <div
    :style="{ 'padding': NewStyle[1].padding + 'px','padding-top': NewStyle[1].paddingTop + 'px','padding-bottom': NewStyle[1].paddingBottom + 'px',
                 'padding-right': NewStyle[1].paddingRight + 'px','padding-left': NewStyle[1].paddingLeft + 'px', 'background-color' : NewStyle[0]}"
    ref="infoBox"
    style="position: relative;"
    id="childContainer"
  >
    <div
      class="dropHighlight"
      :style="{'backgroundColor': JSON.stringify(selectedDropWidget) == JSON.stringify(index) && top ? 'rgb(76, 185, 234)' : 'transparent'}"
    ></div>
    <div
      class="dropHighlightBottom"
      :style="{'backgroundColor': JSON.stringify(selectedDropWidget) == JSON.stringify(index) && bottom ? 'rgb(76, 185, 234)' : 'transparent'}"
    ></div>

    <div class="hoverParent" v-if="dragWidgetType != 'parentRowWidget' && dragWidgetType != null ">
      <div
        class="hoverChild1"
        :id="JSON.stringify(index)"
        v-droppable
        @drag-over="onDragOver('top')"
      ></div>
      <div
        class="hoverChild2"
        :id="JSON.stringify(index)"
        v-droppable
        @drag-over="onDragOver('bottom')"
      ></div>
    </div>

    <div
      class="hoverBox"
      :id="JSON.stringify(index)"
      @click="$emit('selected')"
      :style=" {'z-index': JSON.stringify(selectedWidget) == JSON.stringify(index) ? 20 : 11, 'border': JSON.stringify(widgetHoverIndex) == JSON.stringify(index) && selectedWidget.parentRow == null ? '#7aabc0 solid 2px' : JSON.stringify(selectedWidget) == JSON.stringify(index) ? '#4CB9EA solid 2px' : 'transparent solid 2px'}"
    >
      <b-btn
        size="sm"
        class="delBtn"
        @click="$emit('DeleteWidget',index)"
        v-if="JSON.stringify(selectedWidget) == JSON.stringify(index)"
      >
        <span class="ti-trash"></span>
      </b-btn>
    </div>
    <slot></slot>
  </div>
</template>



<script>
export default {
  name: "editCard",
  data() {
    return {
      inputText: "",
      hover: false,
      highlight: false,
      top: false,
      bottom: false
    };
  },
  props: {
    NewStyle: {
      type: Array
    },
    selectedWidget: {
      type: Object
    },
    index: {
      type: Object
    },
    widgetDidMove: {
      type: Boolean
    },
    isDraging: {
      type: Boolean
    },
    hasDragEnded: {
      type: Boolean
    },
    selectedDropWidget: {
      type: Object
    },
    widgetHoverIndex: {
      type: Object
    },
    widgetType: {
      type: Array
    },
    dragWidgetType: {
      type: String
    }
  },

  methods: {
    onDragOver(value) {
      this.highlight = true;
      if (value == "top") {
        this.top = true;
        this.bottom = false;
        this.$emit("changeSelectedDropWidget", this.index);
        this.$emit("addToBottom", false);
      } else if (
        this.widgetType[this.index.parentRow].columns[this.index.column].rows
          .length -
          1 ==
        this.index.row
      ) {
        this.$emit("changeSelectedDropWidget", this.index);
        this.$emit("addToBottom", true);
        this.bottom = true;
        this.top = false;
      }
    },
    // onDragEnter() {
    //   //   console.log("entered");
    //   this.highlight = true;
    //   this.$emit("changeSelectedDropWidget", this.index, false]);
    // },

    updateWidgetHoverIndex(index) {
      //    console.log('child')
      //   console.log(JSON.stringify(this.widgetHoverIndex) == JSON.stringify(this.index))
      //   console.log(this.index)
      //   console.log(this.widgetHoverIndex)
      this.$emit("updateWidgetHoverIndex", index);
    }
  }
};
</script>

<style scoped>
/* #childContainer {
  padding: var(--padding);
} */
.hoverParent {
  z-index: 12;
  top: 0px;
  left: 0px;
  position: absolute;
  width: 100%;
  height: 100%;
}

.hoverChild1 {
  z-index: 12;
  top: 0px;
  width: 100%;
  height: 50%;
  position: absolute;
}

.hoverChild2 {
  z-index: 12;
  bottom: 0px;
  width: 100%;
  height: 50%;
  position: absolute;
}
.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;
}
.hoverBox {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}

.textFieldStyle {
  margin: 0px;
  position: relative;
  /* background-color: var(--bg-color);
    padding-left: var(--padding-left);
    padding-right: var(--padding-right);
    padding-top: var(--padding-top);
    padding-bottom: var(--padding-bottom); */
}

p:hover {
  background-color: "blue";
}

.test {
  background-color: rgb(62, 61, 61, 0.4);
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0px;
  top: 0px;
}
</style>
