<template>
  <div>
    <div class="controller">
      <v-btn @click="changeMonth(-1)" flat icon>
        <v-icon>keyboard_arrow_left</v-icon>
      </v-btn>
      <span>{{ currentDate.format('MMMM') }}</span>
      <v-btn @click="changeMonth(1)" flat icon>
        <v-icon>keyboard_arrow_right</v-icon>
      </v-btn>
    </div>
    <v-card class="time-card" xs12 v-for="day in days" :key="day.day">
      <v-layout row wrap>
        <v-flex xs3 class="date">
          <span>{{ day.day }}</span>
          <div></div>
          <span>{{ day.name }}</span>
        </v-flex>
        <v-flex xs9>
          <TimePicker v-model="day.start" @change="changed = true" label="Van" :required="false" />
          <TimePicker v-model="day.end" @change="changed = true" label="Tot" :required="false" />
        </v-flex>
      </v-layout>
    </v-card>
    <v-dialog v-model="saveChanges" width="500">
      <v-card>
        <v-card-title class="headline grey lighten-2" primary-title>
          Je hebt aanpassingen gemaakt. Wil je deze opslaan?
        </v-card-title>

        <v-divider></v-divider>

        <v-card-actions>
          <v-btn color="danger" flat @click="changeMonth(false, true)">
            Dismiss
          </v-btn>
          <v-spacer></v-spacer>
          <v-btn color="success" flat @click="submitForm()">
            Save
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
    <v-btn @click="submitForm()" fixed fab bottom right color="success">
      <v-icon>save</v-icon>
    </v-btn>

    <v-snackbar v-model="saved" :timeout="3000" bottom>Beschikbaarheid opgeslagen</v-snackbar>
  </div>
</template>

<script>
import moment from 'moment'
import { FormValidator } from '~/components/form/InputMixin'

export default {
  created () {
    this.getDays()
  },
  data: () => ({
    currentDate: moment(),
    days: [],
    saved: false,
    changed: false,
    saveChanges: false,
    addMonths: 0
  }),
  methods: {
    getDays () {
      // Clear days so it can be refilled
      this.days = []

      // Month and year for the days
      const month = this.currentDate.month()
      const year = this.currentDate.year()

      const names = Object.freeze(
        ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'])
      const date = new Date(year, month, 1)
      let fullDate = ''

      setTimeout(() => {
        while (date.getMonth() === month) {
          fullDate = date.getDate() + '-' + month + '-' + year
          this.days.push({
            day: date.getDate(),
            name: names[date.getDay()],
            fullDate: fullDate
          })
          date.setDate(date.getDate() + 1)
        }
      }, 500)
    },
    submit () {
      console.log(this.availability)
      this.saved = true
      this.saveChanges = false
      this.changed = false
    },
    changeMonth (addMonths, force = false) {
      if (this.changed && !force) {
        this.saveChanges = true
        this.addMonths = addMonths
      } else {
        addMonths = addMonths || this.addMonths
        this.currentDate.add(addMonths, 'months')
        this.getDays()

        if (force) {
          this.saveChanges = false
          this.changed = false
        }
      }
    }
  },
  mixins: [FormValidator]
}
</script>

<style lang="postcss" scoped>
@import '~/assets/style/root.css';

.controller {
    display: flex;
    justify-content: space-between;

    font-size: 1.5rem;
}

.time-card {
    padding: 10px;
    margin: 20px 10px;

    & .layout {
        align-items: center;
        & .date {
            color: var(--primary-color);
            font-weight: bold;
            font-size: 1.5rem;
            text-align: center;

            & div {
                border: 1px solid var(--primary-color-darker);
                width: 70%;
                margin: auto;
            }
        }
    }
}
</style>