<template>
    <div class="item-content" :style="getGlobalStyle" @mouseenter="hoverAction" @mouseleave="leaveAction">
        <div class="item item-start" 
            :class="editDates ? 'grab' : ''" 
            @click="openPopup" 
            :style="getWidth"
            @mousedown="startDrag" 
            @mouseup="stopDrag"
            @mouseleave="leaveDragging($event, 'start')"
            >
            <div class="item-icon" :style="getItemStyle">
                <v-img v-if="step.icon.indexOf('http') !== -1" :src="step.icon"></v-img>
                <v-icon dark v-else>{{step.icon}}</v-icon>
            </div>
        </div>
        <div v-if="step.period" class="item-separator" :style="getBorderColor"></div>
        <div v-if="step.period" 
            @click="openPopup" 
            class="item item-end" 
            :class="editDates ? 'grab' : ''" 
            :style="getWidth" 
            @mousedown="startDrag" 
            @mouseup="stopDrag"
            @mouseleave="leaveDragging($event, 'end')"
            >
            <div class="item-icon" :style="getItemStyle">
                <v-img v-if="step.icon.indexOf('http') !== -1" :src="step.icon"></v-img>
                <v-icon dark v-else>{{step.icon}}</v-icon>
            </div>
        </div>
        
    </div>
</template>
<script>
import dateManipulation from '@/mixins/dateManipulation'
import timelineMixin from '@/mixins/timelineMixin'
export default {
    name:"TimelineItem",
    props:["step", "dayWidth", "position", "allRefsEvents", "stepClicked", "editDates", "startDragging", "draggedId", "leftContainer"],
    mixins:[dateManipulation, timelineMixin],
    data() {
        return {
            startXdrag:0,
        }
    },
    methods: {
        startDrag : function($event){
            if(this.editDates && !this.startDragging){
                this.$emit('setDragged', $event, true)
                this.$emit('setDraggedId', $event, this.step.id)
                this.$parent.$refs['item_'+this.step.id][0].$el.style.zIndex = 10;
            } 
        },
        leaveDragging($event, position){
            console.log("leave", $event)
            if(this.editDates){
                if(this.startDragging && this.draggedId == this.step.id){
                    if($event.offsetX > 0){
                        if(position == 'end'){
                            let endDate = new Date(this.step.end).getTime() + (1000 * 60 * 60 * 24)
                            let newEnd = this.parseFrDateToUs(new Intl.DateTimeFormat('fr-FR').format(new Date(endDate)))
                            this.step.end = newEnd
                        } else if(position == 'start'){
                            console.log(this.step.start)
                            let startDate = new Date(this.step.start).getTime() + (1000 * 60 * 60 * 24)
                            let newStart= this.parseFrDateToUs(new Intl.DateTimeFormat('fr-FR').format(new Date(startDate)))
                            console.log(newStart)
                            this.step.start = newStart
                        }
                        this.$emit("addDayItem", $event, position, this.step.id)
                    } else if ($event.offsetX < 0) {
                        if(position == 'end'){
                            let endDate = new Date(this.step.end).getTime() - (1000 * 60 * 60 * 24)
                            let newEnd = this.parseFrDateToUs(new Intl.DateTimeFormat('fr-FR').format(new Date(endDate)))
                            this.step.end = newEnd
                        } else if(position == 'start'){
                            let startDate = new Date(this.step.start).getTime() - (1000 * 60 * 60 * 24)
                            let newStart= this.parseFrDateToUs(new Intl.DateTimeFormat('fr-FR').format(new Date(startDate)))
                            this.step.start = newStart
                        }
                        this.$emit("substractDayItem", $event, position, this.step.id)
                    }
                }
            }
        },
        stopDrag: function($event){
            if(this.editDates){
                this.$emit('setDragged', $event, false)
                this.$emit('setDraggedId', $event, 0)
                this.$parent.$refs['item_'+this.step.id][0].$el.style.zIndex = 1;
            } 
        },
        //Au clic sur un item
        openPopup : function($event){ 
            if(!this.editDates){
                //on envoie les events pour montrer la popup et dire que l'on a cliqué (pour éviter les action au hover)
                this.$emit('showPopup', $event, this.step.id)
                this.$emit('setClicked', $event, true)
                // on reset les couleurs des jours des étapes
                this.allRefsEvents.forEach(ref => {
                    this.$parent.$refs[ref][0].$el.classList.remove("colored")
                    this.$parent.$refs[ref][0].$el.style.backgroundColor = ""
                });
                //on colorie les cellules de l'étape cliquée
                this.step.ref.forEach(ref => {
                    this.$parent.$refs[ref][0].$el.classList.add("colored")
                    this.$parent.$refs[ref][0].$el.style.backgroundColor = this.step.color
                });
            }
        },
        hoverAction: function($event){
            if(!this.editDates){
                //au hover si on a pas cliqué sur un élément, on montre les jours de l'étape en changeant le background
                if(!this.stepClicked){
                    this.step.ref.forEach(ref => {
                        this.$parent.$refs[ref][0].$el.classList.add("colored")
                        this.$parent.$refs[ref][0].$el.style.backgroundColor = this.step.color
                    });
                }
            }
        },
        leaveAction: function() {
            if(!this.editDates){
                //au mouseleave si on a pas cliqué sur un élément, on reset les jours de l'étape en changeant le background
                if(!this.stepClicked){
                    this.step.ref.forEach(ref => {
                        this.$parent.$refs[ref][0].$el.classList.remove("colored")
                        this.$parent.$refs[ref][0].$el.style.backgroundColor = ""
                    });
                }
            } 
        },
    },
    computed: {
        //background-color des puces
        getItemStyle: function(){
            let style =  "background-color:"+this.step.color+"; "
            if(this.dayWidth < 31){
                style += "padding:2px;"
            } else {
                style += "padding:8px;"
            }
            return style
        },
        //Style global de l'item (largeur si c'est une période)
        getGlobalStyle: function(){
            let style = this.position;
            if(!this.step.period) {
                style +=  "width:"+this.dayWidth+"px;"
            } else {
                let daysBetween = this.DaysBetween(new Date(this.step.start), new Date(this.step.end))
                style += "width:"+this.dayWidth * daysBetween+"px;"
            }
            return style
        },
        //largeur des puces en fonction de la largeur du jour
        getWidth: function(){
            let style =  "width:"+this.dayWidth+"px; height:"+this.dayWidth+"px; "

            return style
        },
        //Couleur de la bordure 
        getBorderColor: function(){
            return "border-color:"+this.step.color+";"
        }
    },
    watch: {
        //on watch le booléen clique pour que si l'état repasse a false, on reset les couleurs
        stepClicked: function (val, oldVal) {
            if(!val){
                this.allRefsEvents.forEach(ref => {
                    this.$parent.$refs[ref][0].$el.classList.remove("colored")
                    this.$parent.$refs[ref][0].$el.style.backgroundColor = ""
                });
            }
        }
    },
}
</script>
<style lang="scss">
    // .v-tooltip {
    //     position:absolute;
    //     display: inline-flex !important;
    //     justify-content: center;
    //     width: 100%;
    //     height: 100%;
    //     .v-tooltip__content {
    //         left:50% !important;
    //         transform: translateX(-50%);
    //         top:100% !important;
    //     }
        
    // }
    .item-content {
        position: relative;
        display:flex;
        justify-content: space-between;
        align-items:center;
        .label {
            position:absolute;
            top:0;
            width:100%;
        }
    }
    .item-separator {
        width:90%;
        left:5%;
        position:absolute;
        z-index:3;
        border-top: 2px dashed #000;
    }
    .item {
        z-index:5;
        flex-shrink:0;
        cursor:pointer;
        //background-color:red;
        &.grab {
            cursor:grab;
        }
        .item-icon {
            height:100%;
            border-radius:50%;
            display:flex;
            justify-content: center;
            align-items:center;
            
        }
        
    }
</style>