<template>
  <div>
    <v-toolbar>
      <v-toolbar-title>
        Dienstübersicht
      </v-toolbar-title>
      <v-spacer />
      <v-toolbar-items>
        <v-btn text icon @click="changeMonth(-1)">
          <v-icon>{{ keyboard_arrow_left }}</v-icon>
        </v-btn>
        <v-list-item>
          <v-list-item-title class="title"
            >{{ date.getDate() }}.{{ date.getMonth() + 1 }}.{{
              date.getFullYear()
            }}
            bis {{ toDate.getDate() }}.{{ toDate.getMonth() + 1 }}.{{
              toDate.getFullYear()
            }}
          </v-list-item-title>
        </v-list-item>
        <v-btn text icon @click="changeMonth(1)">
          <v-icon>{{ keyboard_arrow_right }}</v-icon>
        </v-btn>
      </v-toolbar-items>
      <v-spacer />
    </v-toolbar>
    <v-progress-linear indeterminate v-if="loading" />
    <div v-for="day in days" :key="days.indexOf(day)">
      <Day v-bind:day="day" style="margin-top: 3px"></Day>
    </div>
  </div>
</template>

<script>
import { mdiChevronLeft, mdiChevronRight } from '@mdi/js'
import { mapGetters, mapActions } from 'vuex'
import Day from '@/components/user/Jobs/Day'
export default {
  name: 'Jobs',
  components: { Day },
  data() {
    return {
      keyboard_arrow_left: mdiChevronLeft,
      keyboard_arrow_right: mdiChevronRight,
      date: new Date()
    }
  },
  created() {
    this.createDays(this.date)
  },
  methods: {
    ...mapActions({
      createDays: 'user/createDays'
    }),
    changeMonth(value) {
      if (value === -1) {
        this.date = new Date(
          this.date.getFullYear(),
          this.date.getMonth(),
          this.date.getDate() - 1
        )
      } else {
        this.date = new Date(
          this.date.getFullYear(),
          this.date.getMonth(),
          this.date.getDate() + 1
        )
      }
      this.createDays(this.date)
    },
    test(day) {
      let index = this.days.indexOf(day)
      console.log(index, index % 3)
      return true
    }
  },
  computed: {
    ...mapGetters({
      days: 'user/days',
      loading: 'user/loading'
    }),
    toDate() {
      return new Date(new Date().setDate(this.date.getDate() + 10))
    }
  }
}
</script>

<style scoped></style>
