<template lang="pug">
  div
    h1 {{ 'My RSVPs' }}

    event-types-nav(v-bind:eventTypes="eventTypes")

    p(v-if="loading") Loading...

    ul(v-if="RSVPItems")
        li(v-for="(RSVPItemsForDay, day) in RSVPItems")
            dashboard-day(v-bind:day="day", v-bind:RSVPItemsForDay="RSVPItemsForDay", v-bind:eventTypes="eventTypes")
    p.
        Times are in
        #[em {{ timezone }}]
        timezone.
</template>

<style lang="stylus" scoped>
    h1
        padding 0
    ul
        list-style-type none
        padding-left 40px
        padding-right 40px
    hr
        border 1px solid black
</style>

<script>
// NPM imports
import cozySDK from 'cozysdk-client'
import moment from 'moment-timezone'

// Models import
import RSVP from '../models/RSVP'

// Components imports
import eventTypesNav from '../components/eventTypesNav.vue'
import dashboardDay from '../components/dashboardDay.vue'

export default {
    data () {
			// Default data
			return {
					eventTypes: {
							"15toto": {
									length: 15,
									color: "yellow"
							},
							"30toto": {
									length: 30,
									color: "orange"
							},
							"60toto": {
									length: 60,
									color: "red"
							}
					},
					// Current user timezone
					timezone: moment.tz.guess(),
					// RSVP items
					RSVPItems: null,
					// An error message
					error: null,
					// Loading boolean
   				loading: false
			}
    },
		created() {
			// Fetch data on component creation
			this.fetchData()
		},
		watch: {
			// Fetch data if the route changes
			'$route': 'fetchData'
		},
		methods: {
			fetchData () {
						this.error = null
						this.RSVPItems = null
						this.loading = true

						return RSVP.getFromView('by_day').then((data) => {
              this.RSVPItems = {}
							data.forEach((RSVPItem) => {
                  if (!this.RSVPItems[RSVPItem.key]) {
                    this.RSVPItems[RSVPItem.key] = []
                  }
									this.RSVPItems[RSVPItem.key].push(new RSVP(RSVPItem.value))
							})
              this.loading = false
						}).catch((error) => {
              this.RSVPItems = null
              this.loading = false
              this.error = error
            })
			}
		},
    components: {
        dashboardDay,
        eventTypesNav
    }
}
</script>
