<template>
    <div>
        <div class="row">
            <div class="col-md-4">
                <div class="pr-4">
                    <label for="projects">Période</label>
                    <div class="row">
                        <div class="col-6">
                            <select class="form-control mr-2" v-model="month">
                                <option v-for="value, key in months" v-bind:value="key">{{ value }}</option>
                            </select>
                        </div>
                        <div class="col-6">
                            <select class="form-control ml-2" v-model="year">
                                <option v-for="value, key in years" v-bind:value="key">{{ value }}</option>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="pr-2">
                    <label for="projects">Intervenants</label>
                    <select class="form-control" v-model="selectedSpeakers" id="speakers" multiple>
                        <option v-for="item in speakers" v-bind:value="item.id">{{ item.name }}</option>
                    </select>
                </div>
            </div>
            <div class="col-md-4">
                <div>
                    <label for="projects">Projets</label>
                    <select class="form-control" v-model="selectedProjects" id="projects" multiple>
                        <option v-for="item in projects" v-bind:value="item.id">{{ item.label }}</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="row" v-if="weeks.length > 0">
            <div class="col-md-12">
                <table class="table table-bordered mt-3">
                    <Week v-for="week, key in weeks" v-bind:key="key" v-bind:week="week" />
                </table>
            </div>
        </div>
    </div>
</template>

<style scoped>
table {
  font-size: 12px;
}
</style>

<script>
import Routing from '../../../vendor/friendsofsymfony/jsrouting-bundle/Resources/public/js/router.min.js'

const Week = require('./Week').default
const Choices = require('choices.js')
const chunk = require('chunk')
const axios = require('axios').default
const routes = require('../../../public/js/fos_js_routes.json')

Routing.setRoutingData(routes)

export default {
  name: 'Calendar',
  components: {
    Week
  },
  data () {
    return {
      projects: [],
      speakers: [],
      month: new Date().getMonth() + 1,
      year: new Date().getFullYear(),
      years: {},
      weeks: [],
      months: {
        1: 'Janvier',
        2: 'Février',
        3: 'Mars',
        4: 'Avril',
        5: 'Mai',
        6: 'Juin',
        7: 'Juillet',
        8: 'Août',
        9: 'Septembre',
        10: 'Octobre',
        11: 'Novembre',
        12: 'Décembre'
      },
      selectedProjects: [],
      selectedSpeakers: []
    }
  },
  methods: {
    refresh () {
      const that = this

      axios.get(Routing.generate('admin_calendar_month', {
        month: this.month,
        year: this.year,
        projects: this.selectedProjects,
        speakers: this.selectedSpeakers
      }))
        .then((response) => {
          that.weeks = chunk(response.data, 7)
        })
    }
  },
  mounted () {
    const that = this

    for (let year = 2020; year <= (new Date().getFullYear() + 3); year++) {
      this.years[year] = year
    }

    axios.get(Routing.generate('admin_calendar_projects'))
      .then((response) => {
        that.projects = response.data
        that.selectedProjects = response.data.map(item => item.id)

        window.setTimeout(e => new Choices(document.getElementById('projects')), 500)
      })

    axios.get(Routing.generate('admin_calendar_speakers'))
      .then((response) => {
        that.speakers = response.data
        that.selectedSpeakers = response.data.map(item => item.id)

        window.setTimeout(e => new Choices(document.getElementById('speakers')), 500)
      })
  },
  watch: {
    year (year) {
      this.refresh()
    },
    month (month) {
      this.refresh()
    },
    selectedProjects (selectedProjects) {
      this.refresh()
    },
    selectedSpeakers (selectedSpeakers) {
      this.refresh()
    }
  }
}
</script>
