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

    <div
      v-if="!readOnly"
      class="hoverBox"
      :style="{
        border:
          hover && selectedWidget == null
            ? '#7aabc0 solid 2px'
            : selectedWidget == index
            ? '#4CB9EA solid 2px'
            : 'transparent solid 2px',
      }"
    >
      <b-btn
        size="sm"
        class="delBtn"
        @click="$emit('DeleteWidget')"
        v-if="selectedWidget == index"
      >
        <span class="ti-trash"></span>
      </b-btn>
    </div>

    <div v-if="!readOnly" class="hoverParent">
      <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>

    <div class="form-group" :style="csstextpros">
      <!-- <label for="exampleInputEmail1" style="color: black">Form</label>
      <input
        placeholder="Enter email"
        class="form-control"
        type="text"
        v-model="inputText"
        v-on:input="$emit('typedText', inputText)"
      > -->

      <!--        <carousel-3d @after-slide-change="onAfterSlideChange" @before-slide-change="onBeforeSlideChange" @last-slide="onLastSlide" :display="3">-->
      <!--            <slide v-for="(slide, i) in slides" :key="i">-->
      <!--                <img src="https://placehold.it/360x270">-->
      <!--                <h1>{{slide.name}}</h1>-->
      <!--            </slide>-->
      <!--        </carousel-3d>-->
    </div>
  </div>
</template>

<script>
export default {
  name: "slider",
  data: function () {
    return {
      slides: [
        {
          name: "Slide name 1",
        },
        {
          name: "Slide name 2",
        },
        {
          name: "Slide name 3",
        },
        {
          name: "Slide name 4",
        },
        {
          name: "Slide name 5",
        },
        {
          name: "Slide name 6",
        },
        {
          name: "Slide name 7",
        },
      ],
      // slides: 7,
      hover: false,
      highlight: false,
      top: false,
      bottom: false,
    };
  },
  components: {},
  props: {
    NewStyle: {
      type: "",
    },
    selectedWidget: {
      type: Number,
    },
    index: {
      type: Number,
    },
    widgetDidMove: {
      type: Boolean,
    },
    hasDragEnded: {
      type: Boolean,
    },
    selectedDropWidget: {
      type: Number,
    },
    readOnly: Boolean,
    addToBottom: Object,
    arrayLength: Number,
  },
  computed: {
    cssProps() {
      return {
        "background-color": this.NewStyle.backgroundColor,
        padding: this.NewStyle.padding + "px",
        "padding-top": this.NewStyle.onepadding.paddingTop + "px",
        "padding-right": this.NewStyle.onepadding.paddingRight + "px",
        "padding-bottom": this.NewStyle.onepadding.paddingBottom + "px",
        "padding-left": this.NewStyle.onepadding.paddingLeft + "px",
      };
    },
    csstextpros() {
      return {
        color: this.NewStyle.textcolor,
      };
    },
  },
  methods: {
    onAfterSlideChange(index) {
      console.log(
        "@onAfterSlideChange Callback Triggered",
        "Slide Index " + index
      );
    },
    onBeforeSlideChange(index) {
      console.log(
        "@onBeforeSlideChange Callback Triggered",
        "Slide Index " + index
      );
    },
    onLastSlide(index) {
      console.log("@onLastSlide Callback Triggered", "Slide Index " + index);
    },
    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>
