<template>
<div class="toolbar">
    <button  v-show='!addingMonth' @click='toggleAdding'>
        Ajouter  {{ formatedDate }}
    </button>
</div>
    <div class="boxed-green month-presentation" id="new-month" v-show='addingMonth'>
      <div class="date">
        <div class="month">
            {{ theMonth }} 
        </div> 
        <div class="year">
            {{ theYear }} 
        </div> 

        <div class="actions">
            <button class="validate" @click="save"> Valider </button>
            <button class="cancel" @click="cancel"> Annuler </button>
        </div>
      </div>
      <div class="datas">
        <li v-for="cara in description" :key='cara.name'> 
            <label :for='cara.name'>{{ cara.label }}</label>
            <input type="number" v-model.number="monthCopy[cara.name]"  id="cara.name" class="value">
        </li>
      </div>
    </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import {  parseISO, addMonths, format } from 'date-fns'
import frLocal from 'date-fns/locale/fr'

export default {
  name: 'NewMonth',
  props: {
  },
  components: {
  },
  data () {
      return {
            monthDate: new Date(),
            monthCopy: Object,
            addingMonth: false,
          }
  },
  mounted () {
      this.monthCopy = this.theEmptyMonth
  },
  watch: {
    lastMonthDate: function () {
        if (this.lastMonthDate) {
            this.monthDate = addMonths(parseISO(this.lastMonthDate, "yyyy-MM", new Date()), 1)
        } else {
            this.monthDate = new Date()
        }
         
    },
  },
  computed: {
    ...mapGetters('travail', {
        'theEmptyMonth': 'TheEmptyMonth',
        'lastMonthDate': 'lastMonthDate',
    }),
    ...mapGetters('config', {
        'description': 'descEditable',
    }),
        formatedDate: function () {
          return format(this.monthDate, "MMMM YYY", {locale: frLocal} )
        },
      theMonth: function () {
          return format(this.monthDate, "MMM", {locale: frLocal})
      },
      theYear: function () {
          return format(this.monthDate, "YYY", {locale: frLocal})
      },
  },
  methods: {
    ...mapActions('travail', {
        'createMonth': 'createMonth',
    }),
    ...mapActions('config', {
        'writeData': 'writeData',
    }),
    toggleAdding: function () {
        this.addingMonth = !this.addingMonth
    },
    save: function () {
        console.log("save")
        console.log(this.monthCopy)
        this.createMonth({date: format(this.monthDate, "yyyy-MM"), month: this.monthCopy})
        this.toggleAdding()
        this.writeData()
    },
    cancel: function () {
        this.toggleAdding()
        this.monthCopy = this.theEmptyMonth
    },
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .month-presentation {
        display: grid;
        grid-template-columns: 140px 1fr;
        }
    .month-presentation > * {
        margin: 20px;
    }

    .date > input {
        font-size: 1.2em;
        font-weight: bold;
        display: inline-flex;
        width: 6rem;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-direction: column;
        align-items: flex-start;
    }
    ul {
        list-style-type: none;
        padding: 0;
        display: flex;
        flex-flow: row wrap;
    }
    li {
        margin: 3px;
        display: flex;
        flex-direction: column-reverse;
    }
    label{
        text-align: right;
        font-size: 0.8em;
    }
    .value {
        font-weight: bold;
    }
    .toolbar {
        text-align: center;
    }
</style>
