<template>
<ul>
    <li>
    <h2>Période</h2>
    </li>
    <li>
      <input type="month" @input="updateStart" v-model="start">
      <input type="month" @input="updateEnd" v-model="end">
    </li>
    <li>
        <button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
        <button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
        <button @click="setRangeAll" :active='selected=="all"'>Tout</button>
    </li>
</ul>

</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { setMonth, addMonths, format, parseISO } from 'date-fns'

const today = new Date();

export default {
    name: 'MonthSelector',
    components: {
    },
    data () {
        return {
            selected: "",
            start: "", 
            end: "",
            }
    },
    computed: {
        ...mapGetters('travail', {
            range: "range",
            monthsDate: "MonthsDate",
        })
    },
    watch: {
        range: function () {
            this.start = this.range.start
            this.end = this.range.end
        },
    },
    mounted () {
        this.setRangeFromJanuary()
        this.start = this.range.start
        this.end = this.range.end
    },
    methods: {
        ...mapActions('travail', {
            setRange: "setRange",
        }),
        updateStart: function () {
            this.selected = "custom"
            this.setRange({start: this.start, end: this.end})
        },
        updateEnd: function () {
            this.selected = "custom"
            this.setRange({start: this.start, end: this.end})
        },
        setRangeFromJanuary: function () {
            const start = setMonth(today, 0)
            const range = {
                start: format(start, 'yyyy-MM'), 
                end: format(today, 'yyyy-MM'), 
            }
            this.selected = "january"
            this.setRange(range)
        }, 
        setRange1year: function () {
            const start = addMonths(new Date(), -12)
            const range = {
                start: format(start, 'yyyy-MM'), 
                end: format(today, 'yyyy-MM'), 
            }
            this.selected = "year"
            this.setRange(range)
        }, 
        setRangeAll: function () {
            const dates = this.monthsDate.map(a => parseISO(a, "yyyy-MM", new Date()))
            const start = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? a: b))
            const end = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? b: a))
            const range = {
                start: format(start, 'yyyy-MM'), 
                end: format(end, 'yyyy-MM'),
            }
            this.selected = "all"
            this.setRange(range)
        }, 
    },
}
</script>

<style scoped>
    ul {
            list-style-type: none;
            padding: 0;
            display: flex;
            flex-flow: column wrap;
    }
    ul > * {
        margin-top: 10px;
    }
    li {
            list-style-type: none;
            display: flex;
            flex-flow: row;
            justify-content: space-around;

    }
    h2 {
        margin: 0;
    }
    input {
        border: none;
        color: white;
        padding: 15px 32px;
        text-align: center;
        display: inline-block;
        font-size: 16px;
        border-radius: 5px;
        color: black;
    }
    button {
        flex-basis: 33%;
        height: 3rem;
        background-color: white;

    }
</style>
