<template>
    <div>
        <div class="timelineRow">
            <TimelineCell v-show="daysArray.length > 0" 
                v-for="(day, index) in daysArray" 
                :key="'day_'+index" 
                :ref="'day_'+day.date.split('-').join('')" 
                :day="day"
                :dayWidth="dayWidth"
                :editDates="editDates"
                >
            </TimelineCell>
        </div>
        <div class="timelineItemContent" :class="'timeline'+index" v-for="(steps, index) in orderSteps" :key="index" :style="getPositionItems(index)">
            <TimelineItem 
            v-for='(step, index2) in orderSteps[index]'
            :key="index2"
            :step="step"  
            :dayWidth="dayWidth"
            :editDates="editDates"
            class="timelineItem" 
            :leftContainer="leftContainer"
            @showPopup="showPopup"
            @setClicked="setClicked"
            @addDayItem="addDayItem"
            @substractDayItem="substractDayItem"
            @setDragged="setDragged"
            @setDraggedId="setDraggedId"
            :position="getItemStartPosition(step)"
            :ref="'item_'+step.id"
            :allRefsEvents="allRefsEvents"
            :stepClicked="stepClicked"
            :startDragging="startDragging"
            :draggedId='draggedId'/>
        </div>
        
    </div>
</template>
<script>
import TimelineCell from '@/components/TimelineCell'
import TimelineItem from '@/components/TimelineItem'
import dateManipulation from '@/mixins/dateManipulation'
import timelineMixin from '@/mixins/timelineMixin'
export default {
    name:"TimelineContent",
    props: ["daysArray", "dayWidth", "steps", "animation", "nbCrossingSteps" , "redefinedSteps", "globalHeight", "stepClicked", "editDates", "leftContainer"],
    mixins:[dateManipulation, timelineMixin],
    components: {
        TimelineCell,
        TimelineItem
    },
    data() {
        return {
            startDragging: false,
            draggedId:0,
            isLoaded: false,
            orderSteps:[]
        }
    },
    mounted() {
        setTimeout(()=> {
            console.log('tetetetete')
            this.isLoaded = true,
            this.getOrderedSteps()
        },1)  
        
    },
    methods: {
        setDragged:function(event, value){
            this.startDragging = value
        },
        setDraggedId:function(event, value){
            this.draggedId = value
        },
        substractDayItem: function(event, position, stepId){
            this.$emit("substractDayItem", event, position, stepId)
        },
        addDayItem: function(event, position, stepId){
            this.$emit("addDayItem", event, position, stepId)
        },
        //events pour la popup et le booléen clicked
        setClicked: function(event, value){
            this.$emit("setClicked", event, value)
        },
        hidePopup: function(){
            this.$emit('hidePopup')
        },
        showPopup: function(event, id){
            this.$emit('showPopup', event, id)
        },
        //calcul la position left des items
        getItemStartPosition: function(item){
            let refStart = 'day_'+item.start.split('-').join("")
            if(this.isLoaded && this.animation){
                let positionCell = this.$refs[refStart][0].$el.offsetLeft
                return "left:"+positionCell+"px;"                
            }
        },
        //Position des différentes lignes d'étapes
        getPositionItems: function(index){
            if(index%2 == 0){
                return "bottom:"+ ((this.globalHeight / 2) + 30 + ((index != 0 ? index/2 : index) * (this.dayWidth + 5) ))+ "px;"
            } else {
                return 'top:'+ ((this.globalHeight / 2) + 30 + ((index - 1 != 0 ? (index-1)/2 : index-1) * (this.dayWidth + 5) ) + 5) + "px;"
            }
            
        },
        // get des tableaux d'étapes pour définir le nombre de lignes a affiché. (fonction dans le fichier de mixins)
        getOrderedSteps: function(){
            this.orderSteps = this.getItemsOrdered(this.redefinedSteps)            
        },
    },
    computed: {
        //get toutes les refs des cellules ou il y a une étapes
        allRefsEvents: function(){
            let arrays = this.redefinedSteps.map((e) => e.ref)
            return [].concat.apply([], arrays)
        },
    },
    watch: {
        startDragging: {
            handler(val){
                if(!val){
                    this.getOrderedSteps();
                    this.$emit('reCalculateHeight')
                }               
            },
            deep:true
        }
    },
}
</script>

<style lang="scss">
    .timelineItemContent {
        position: absolute;
        height:50px; 
        width:100%;
    }
    .timelineItem {
        position: absolute;  
        top:0; 
        
    }
    .dayCell {
        height:30px;
        border:1px solid #CCC;
        flex-shrink:0;
        &.weekend {
            background-color:#CCC;
            border-left-color: #FFF;
            border-right-color: #FFF;
        }
    }
    .timelineRow {
        display: flex;
        position:absolute;
    }
</style>