<template>
    <div :style="getDayStyle" 
        class="dayCell"     
        :class='getClasses'> 
        {{getDay}} 
        <span class='month' v-show="isFirstDayofMonth">{{getMonth}}</span> 
    </div>
</template>
<script>
import dateManipulation from '@/mixins/dateManipulation'
import timelineMixin from '@/mixins/timelineMixin'
export default {
    name: "TimelineCell",
    props: ['dayWidth', 'day', 'editDates'],
    mixins:[dateManipulation, timelineMixin],
    data() {
        return {
            months:[
                "Janvier",
                "Février",
                "Mars",
                "Avril",
                "Mai",
                "Juin",
                "Juillet",
                "Aout",
                "Septembre",
                "Octobre",
                "Novembre",
                "Décembre"
            ]
        }
    },
    created() {
    },
    computed: {
        getClasses: function(){
            let classDisplayed = this.day.class+" "
            if(this.day.date == this.parseFrDateToUs(new Intl.DateTimeFormat('fr-FR').format(new Date))){
                classDisplayed += "today"
            }
            if(this.dayWidth < 25){
                classDisplayed += " small-text"
            }
            return classDisplayed
        },
        getDayStyle: function(){
            return "width:"+this.dayWidth+"px;"
        },
        getDay: function(){
            return new Date(this.day.date).getDate()
        },
        getMonth: function(){
            let date = new Date(this.day.date);
            return this.months[date.getMonth()]
        },
        isFirstDayofMonth: function(){
            let date = new Date(this.day.date);
            if(date.getDate() == 1){
                return true
            }
            return false
        }
    },
}
</script>
<style lang="scss">
    .dayCell {
        height:30px;
        border:1px solid #CCC;
        flex-shrink:0;
        position:relative;
        display:flex;
        justify-content: center;
        font-size:16px;
        align-items: center;
        color:#DDD;
        -webkit-user-select: none; /* Safari */        
        -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* IE10+/Edge */
        user-select: none; /* Standard */
        &.small-text {
            font-size:12px;
        }
        &.weekend {
            background-color:#CCC;
            border-left-color: #FFF;
            border-right-color: #FFF;
            color:#EEE;
            &.colored {
                 opacity:1;
            }
        }
        &.today {
            background-color: #347ab6;
        }
        &.colored {
            opacity:0.6;
        }
        .month {
            height: 150%;
            border-left: 2px solid #666;
            color:#666;
            text-transform: uppercase;
            display: block;
            position: absolute;
            left: -2px;
            bottom: 0;
            font-size: 10px;
            text-align: left;
            line-height: 8px;
            padding-left: 6px;
            -webkit-user-select: none; /* Safari */        
            -moz-user-select: none; /* Firefox */
            -ms-user-select: none; /* IE10+/Edge */
            user-select: none; /* Standard */
        }
    }
</style>