<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">
            {{ monthArray[date.getMonth()] }}
            {{ date.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-card v-for="week in month" :key="month.indexOf(week)" flat tile>
      <v-card-title class="subtitle-1 font-weight-bold">
        Woche vom {{ week.startDate.getDate() }}.{{
        week.startDate.getMonth() + 1
        }}.{{ week.startDate.getFullYear() }} bis
        {{ week.endDate.getDate() }}.{{ week.endDate.getMonth() + 1 }}.{{
        week.endDate.getFullYear()
        }}
      </v-card-title>
      <v-card-text>
        <v-row justify="start" align="start">
          <div v-for="day in week.days" :key="day.id">
            <v-col>
              <Day v-bind:day="day" />
            </v-col>
          </div>
        </v-row>
      </v-card-text>
    </v-card>
  </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(),
      monthArray: [
        'Januar',
        'Februar',
        'März',
        'April',
        'Mai',
        'Juni',
        'Juli',
        'August',
        'September',
        'Oktober',
        'November',
        'Dezember'
      ]
    }
  },
  created() {
    for (let intDate = 1; intDate < 7; intDate++) {
      if (
        new Date(
          this.date.getFullYear(),
          this.date.getMonth(),
          intDate
        ).getDay() === 3
      )
        if (this.date.getDate() < intDate)
          this.date = new Date(this.date.getFullYear(), this.date.getMonth(), 0)
    }
    this.createMonth(this.date)
    this.getAllUsers()
    this.getUsers({
      from_date: {
        year: this.startDate.getFullYear(),
        month: this.startDate.getMonth() + 1,
        day: this.startDate.getDate()
      },
      to_date: {
        year: this.endDate.getFullYear(),
        month: this.endDate.getMonth() + 1,
        day: this.endDate.getDate()
      }
    })
    this.getTransactJobs({
      year: this.date.getFullYear(),
      month: this.date.getMonth() + 1,
      day: 1
    })
  },
  methods: {
    ...mapActions({
      getTransactJobs: 'requestJobs/getTransactJobs',
      createMonth: 'jobs/createMonth',
      getAllUsers: 'jobs/getAllUsers',
      getUsers: 'jobs/getUsers'
    }),
    changeMonth(value) {
      if (value === -1) {
        this.date = new Date(this.date.getFullYear(), this.date.getMonth() - 1)
      } else {
        this.date = new Date(this.date.getFullYear(), this.date.getMonth() + 1)
      }
      this.createMonth(this.date)
      this.getUsers({
        from_date: {
          year: this.startDate.getFullYear(),
          month: this.startDate.getMonth() + 1,
          day: this.startDate.getDate()
        },
        to_date: {
          year: this.endDate.getFullYear(),
          month: this.endDate.getMonth() + 1,
          day: this.endDate.getDate()
        }
      })
    }
  },
  computed: {
    ...mapGetters({
      month: 'jobs/month',
      startDate: 'jobs/getStartDate',
      endDate: 'jobs/getEndDate'
    })
  }
}
</script>

<style scoped></style>
