<template>
  <div>
    <v-toolbar>
      <v-toolbar-title>
        Dienstanfragen
      </v-toolbar-title>
    </v-toolbar>
    <v-card tile flat>
      <v-card-title>
        Gesendete Anfragen
      </v-card-title>
      <v-progress-circular indeterminate v-if="transactJobsLoading" />
      <div v-for="job in transactJobs" :key="transactJobs.indexOf(job)">
        <v-expand-transition>
          <v-card tile style="margin-top: 3px">
            <v-card-text>
              <v-row>
                <v-col>
                  <v-combobox
                          outlined
                          label="An"
                          :value="job.to_user.firstname + ' ' + job.to_user.lastname"
                          readonly
                          append-icon
                  >
                    <template v-slot:selection="data">
                      <v-chip>
                        {{ data.item }}
                      </v-chip>
                    </template>
                  </v-combobox>
                </v-col>
                <v-col>
                  <v-combobox
                          outlined
                          label="Datum"
                          :value="
                    job.date.getDate() +
                      '.' +
                      (job.date.getMonth() + 1) +
                      '.' +
                      job.date.getFullYear()
                  "
                          readonly
                          append-icon
                  >
                    <template v-slot:selection="data">
                      <v-chip>
                        {{ data.item }}
                      </v-chip>
                    </template>
                  </v-combobox>
                </v-col>
                <v-col>
                  <v-combobox
                          outlined
                          label="Status"
                          :value="acceptedStatus(job)"
                          readonly
                          append-icon
                  >
                    <template v-slot:selection="data">
                      <v-chip :color="statusColor(job)">
                        {{ data.item }}
                      </v-chip>
                    </template>
                  </v-combobox>
                </v-col>
              </v-row>
            </v-card-text>
            <v-card-actions v-if="!job.answerd">
              <v-spacer/>
              <v-btn
                      @click="
                deleteTransactJob({
                  username: job.to_user.username,
                  year: job.date.getFullYear(),
                  month: job.date.getMonth() + 1,
                  day: job.date.getDate()
                })
              "
              >Stornieren
              </v-btn
              >
            </v-card-actions>
          </v-card>
        </v-expand-transition>
      </div>
    </v-card>
    <v-divider />
    <v-card tile flat>
      <v-card-title>
        Eingehende Anfragen
      </v-card-title>
      <v-progress-circular indeterminate v-if="requestJobsLoading" />
      <div v-for="job in requestJobs" :key="requestJobs.indexOf(job)">
        <v-card tile style="margin-top: 3px">
          <v-card-text>
            <v-row>
              <v-col>
                <v-combobox
                  outlined
                  label="Von"
                  :value="
                    job.from_user.firstname + ' ' + job.from_user.lastname
                  "
                  readonly
                  append-icon
                >
                  <template v-slot:selection="data">
                    <v-chip>
                      {{ data.item }}
                    </v-chip>
                  </template>
                </v-combobox>
              </v-col>
              <v-col>
                <v-combobox
                  outlined
                  label="Datum"
                  :value="
                    job.date.getDate() +
                      '.' +
                      (job.date.getMonth() + 1) +
                      '.' +
                      job.date.getFullYear()
                  "
                  readonly
                  append-icon
                >
                  <template v-slot:selection="data">
                    <v-chip>
                      {{ data.item }}
                    </v-chip>
                  </template>
                </v-combobox>
              </v-col>
              <v-col>
                <v-combobox
                  outlined
                  label="Status"
                  :value="acceptedStatus(job)"
                  readonly
                  append-icon
                >
                  <template v-slot:selection="data">
                    <v-chip :color="statusColor(job)">
                      {{ data.item }}
                    </v-chip>
                  </template>
                </v-combobox>
              </v-col>
            </v-row>
          </v-card-text>
          <v-expand-transition>
            <v-card-actions v-if="!job.answerd">
              <v-spacer />
              <v-btn
                color="red"
                @click="
                  answerJob({
                    username: job.from_user.username,
                    year: job.date.getFullYear(),
                    month: job.date.getMonth() + 1,
                    day: job.date.getDate(),
                    answer: false
                  })
                "
                >Ablehnen
              </v-btn>
              <v-btn
                color="green"
                @click="
                  answerJob({
                    username: job.from_user.username,
                    year: job.date.getFullYear(),
                    month: job.date.getMonth() + 1,
                    day: job.date.getDate(),
                    answer: true
                  })
                "
                >Annehmen
              </v-btn>
            </v-card-actions>
          </v-expand-transition>
        </v-card>
      </div>
    </v-card>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
export default {
  name: 'JobRequests',
  methods: {
    ...mapActions({
      getTransactJobs: 'requestJobs/getTransactJobs',
      getRequestJobs: 'requestJobs/getRequestJobs',
      answerJob: 'requestJobs/answerTransactJob',
      deleteTransactJob: 'requestJobs/deleteTransactJob'
    })
  },
  computed: {
    ...mapGetters({
      transactJobs: 'requestJobs/transactJobs',
      transactJobsLoading: 'requestJobs/transactJobsLoading',
      requestJobs: 'requestJobs/requestJobs',
      requestJobsLoading: 'requestJobs/requestJobsLoading'
    }),
    acceptedStatus() {
      return job => {
        if (!job.answerd) {
          return 'gesendet'
        }
        if (job.answerd && job.accepted) {
          return 'angenommen'
        }
        return 'abgelehnt'
      }
    },
    statusColor() {
      return job => {
        if (!job.answerd) {
          return
        }
        if (job.answerd && job.accepted) {
          return 'green'
        }
        return 'red'
      }
    }
  },
  created() {
    var now = new Date()
    this.getTransactJobs({
      year: now.getFullYear(),
      month: now.getMonth() + 1,
      day: now.getDate()
    })
    this.getRequestJobs({
      year: now.getFullYear(),
      month: now.getMonth() + 1,
      day: now.getDate()
    })
  }
}
</script>

<style scoped></style>
