<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 :style="csstextpros" v-bind:class="{noChick : isDraging == true}" >
      <div style="text-align:center">
        <span v-for="(links, index) in NewText.links" :key="index">
          <b-link :href="links.url" class="pX-5">{{links.name}}</b-link>
        </span>
      </div>
    </div>
    </div>
</template>

<script>
export default {
    name: "vlink",
    data: function () {
        return {
            inputText: "",
            hover: false,
            highlight: false,
            top: false,
            bottom: false
        };
    },
    props: {
        NewStyle: {
            type: Object
        },
        NewText: {
            type: Object
        },
        NewValue: {
            type: String
        },
        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: {
        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>