<template>
  <div>
    <v-container>
      <v-card class="mx-auto" outlined>
        <v-card-title>
          <div class="title">Dienstgetränke</div>
          <v-chip class="ma-2" color="red" text-color="white" v-if="locked">Gesperrt</v-chip>
          <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
            <v-icon>{{ menuIcon }}</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-subtitle v-if="(limit - free_drink_list_history_job_credit) > 0">
          Noch {{ ((limit - free_drink_list_history_job_credit) / 100).toFixed(2) }} €
          übrig!!
        </v-card-subtitle>
        <v-card-text>
          <v-row v-if="!loading">
            <v-col cols="12">
              <v-row>
                <v-col v-for="freeDrink in free_drink_list_config_job" :key="freeDrink.id" cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                      class="drinkBtn"
                      block
                      :disabled="locked"
                      :color="color"
                      @click="addAmount(freeDrink, freeDrinkTypeJob)"
                  >{{freeDrink.label}}</v-btn>
                </v-col>
              </v-row>
              <v-row v-if="!loading" class="justify-end">
                <v-col cols="3">
                  <v-list-item>
                    <v-list-item-content class="text-center">
                      <v-list-item-action-text :class="getColor()">
                        {{ (free_drink_list_history_job_credit / 100).toFixed(2) }}
                        €
                      </v-list-item-action-text>
                    </v-list-item-content>
                  </v-list-item>
                </v-col>
              </v-row>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
      <v-card class="mx-auto" outlined>
        <v-card-title>
          <div class="title">Bandgetränke</div>
          <v-btn class="menuBtn" @click.stop="isMenuShow = !isMenuShow" icon>
            <v-icon>{{ menuIcon }}</v-icon>
          </v-btn>
        </v-card-title>
        <v-card-text>
          <v-row v-if="!loading">
            <v-col cols="12">
              <v-row>
                <v-col v-for="freeDrink in free_drink_list_config_band" :key="freeDrink.id" cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                      class="drinkBtn"
                      block
                      :color="color_fix"
                      @click="addAmount(freeDrink,  freeDrinkTypeBand)"
                  >{{freeDrink.label}}</v-btn>
                </v-col>
              </v-row>
              <v-row v-if="!loading" class="justify-end">
                <v-col cols="3">
                  <v-list-item>
                    <v-list-item-content class="text-center">
                      <v-list-item-action-text class="title">
                        {{ free_drink_list_history_band_without_canceled.length }} Getränke
                      </v-list-item-action-text>
                    </v-list-item-content>
                  </v-list-item>
                </v-col>
              </v-row>
            </v-col>
          </v-row>
        </v-card-text>
      </v-card>
    </v-container>

    <v-navigation-drawer v-model="isMenuShow" right app clipped>
      <v-list-item-group :key="componentRenderer">
        <v-list-item inactive>
          <v-list-item-title class="headline">Verlauf</v-list-item-title>
        </v-list-item>
        <v-divider />
        <!-- <div
          v-for="message in messages"
          three-line
          :key="messages.indexOf(message)"
          class="history-item"
        >
          <v-list-item three-line inactive @click="canceledAmount(message)">
            <v-list-item-content>
              <v-list-item-title>{{ now(message.date) }}</v-list-item-title>
              <v-list-item-subtitle>
                {{
                createMessage(message)
                }}
              </v-list-item-subtitle>
              <v-list-item-subtitle class="red--text" v-if="message.canceled">STORNIERT!!!</v-list-item-subtitle>
              <v-list-item-action-text
                v-if="isStronoEnabled(message.date) && !message.canceled"
              >Klicken um zu Stornieren</v-list-item-action-text>
            </v-list-item-content>
          </v-list-item>
        </div> -->
        <div
          v-for="freeDrinkHistory in free_drink_list_history"
          :key="freeDrinkHistory.id"
          >
          <v-list-item three-line inactive @click="canceledAmount(freeDrinkHistory)">
            <v-list-item-content>
              <v-list-item-title>{{ now(freeDrinkHistory.timestamp) }}</v-list-item-title>
              <v-list-item-subtitle>{{ freeDrinkHistory.free_drink_type.name }}: {{ freeDrinkHistory.free_drink_config.label }} wurde für
                {{
                  (freeDrinkHistory.free_drink_config.price/100).toFixed(2)
                }} € hinzugefügt
              </v-list-item-subtitle>
              <v-list-item-subtitle class="red--text" v-if="freeDrinkHistory.canceled">STORNIERT!!!</v-list-item-subtitle>
              <v-list-item-action-text
                  v-if="isStronoEnabled(freeDrinkHistory.timestamp) && !freeDrinkHistory.canceled"
              >Klicken um zu Stornieren</v-list-item-action-text>
            </v-list-item-content>
          </v-list-item>
        </div>
      </v-list-item-group>
    </v-navigation-drawer>

    <v-dialog v-model="showConfirmCanceledDialog" max-width="290">
      <v-card>
        <v-card-title>Willst du wirklich??</v-card-title>
        <v-card-text v-if="canceledMessage">
          {{canceledMessage.free_drink_type.name}}: Willst du wirklich ein {{canceledMessage.free_drink_config.label}} im Wert von {{(canceledMessage.free_drink_config.price/100).toFixed(2)}} € stornieren?
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="cancelCanceled">Abbrechen</v-btn>
          <v-btn text @click="acceptCanceled">Stornieren</v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>

    <v-container v-if="loading">
      <AddAmountSkeleton />
    </v-container>
    
  </div>
</template>
<script>
// eslint-disable-next-line no-unused-vars
import AddAmountSkeleton from '../user/Skeleton/AddAmountSkeleton'
import { mapActions, mapGetters } from 'vuex'
import { mdiPlus, mdiMenu } from '@mdi/js'
export default {
  name: 'BarFreedrinks',
  components: { AddAmountSkeleton },
  created() {
    this.loading = false
    this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
    this.get_free_drink_list_config()
    this.get_free_drink_list_history()
  },
  data() {
    return {
      plus: mdiPlus,
      menuIcon: mdiMenu,
      loading: true,
      showConfirmCanceledDialog: false,
      canceledMessage: null,
      limit: 1000,
      amount: 0,
      customValue: null,
      color: 'green accent-4',
      color_fix: 'green accent-4',
      messages: [],
      timer: '',
      componentRenderer: 0,
      isMenuShow: false,
      freeDrinkTypeJob: 1,
      freeDrinkTypeBand: 3
    }
  },
  methods: {
    ...mapActions('freeDrinkList', ['get_free_drink_list_config', 'get_free_drink_list_history','set_free_drink_list_history', 'update_free_drink_list_history']),
    output() {
      console.log(this.free_drink_list_config)
    },
    addAmount(freeDrink, free_drink_type_id) {
      this.set_free_drink_list_history({...freeDrink, free_drink_type_id})
      /*if (amount) {
        this.amount += amount
        this.generateMessage(amount)
      }
      this.checkLocked()*/
    },
    canceledAmount(historyElement) {
      if (!this.isStronoEnabled(historyElement.timestamp)) {
        return
      }
      this.showConfirmCanceledDialog = true
      this.canceledMessage = historyElement
    },

    cancelCanceled() {
      this.showConfirmCanceledDialog = null
      this.canceledMessage = null
    },
    generateMessage(amount) {
      this.messages.push({
        date: new Date(),
        canceled: false,
        amount: amount,
        error: false,
        visible: true,
      })
    },
    createMessage(message) {
      var text = ''
      if (message.error) {
        text =
          'ERROR: Konnte ' +
          (message.amount / 100).toFixed(2) +
          '€ nicht zu den Dienstgetränken hinzufügen.'
      } else {
        text =
          '' +
          (message.amount / 100).toFixed(2) +
          '€ zu den Dienstgetränken hinzugefügt.'
      }
      return text
    },
    checkLocked() {
      this.locked = this.limit - this.amount <= 0
    },
    getColor() {
      return this.locked ? 'title red--text' : 'title'
    },
    acceptCanceled() {
      this.canceledMessage.canceled = true
      this.update_free_drink_list_history(this.canceledMessage)
      this.cancelCanceled()
    }
  },
  computed: {
    ...mapGetters('freeDrinkList', ['free_drink_list_config_job', 'free_drink_list_config_band', 'free_drink_list_history', 'free_drink_list_history_job_credit', 'free_drink_list_history_band', 'free_drink_list_history_band_without_canceled']),
    now() {
      return now => {
        var actual = new Date()
        var zero = new Date(0)
        var date = new Date(actual - now)
        if (date.getFullYear() === zero.getFullYear()) {
          if (date.getMonth() === zero.getMonth()) {
            if (date.getDate() === zero.getDate()) {
              if (date.getHours() === zero.getDate()) {
                if (date.getMinutes() < 1) {
                  return 'vor ' + date.getSeconds() + ' Sekunden'
                } else if (date.getMinutes() < 10) {
                  return 'vor ' + date.getMinutes() + ' Minuten'
                } else {
                  return (
                    (now.getHours() < 10 ? '0' : '') +
                    now.getHours() +
                    ':' +
                    (now.getMinutes() < 10 ? '0' : '') +
                    now.getMinutes()
                  )
                }
              } else {
                return (
                  (now.getHours() < 10 ? '0' : '') +
                  now.getHours() +
                  ':' +
                  (now.getMinutes() < 10 ? '0' : '') +
                  now.getMinutes()
                )
              }
            }
          }
        }
        return (
          now.getDate() +
          '.' +
          now.getMonth() +
          '.' +
          now.getFullYear() +
          ' ' +
          (now.getHours() < 10 ? '0' : '') +
          now.getHours() +
          ':' +
          (now.getMinutes() < 10 ? '0' : '') +
          now.getMinutes()
        )
      }
    },
    isStronoEnabled() {
      return now => {
        var actual = new Date()
        return actual - now < 60000
      }
    },
    locked() {
      return this.free_drink_list_history_job_credit >= 1000
    }
  },
  beforeDestroy() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.drinkBtn {
  width: 100%;
}
.drinkCol {
  padding: 6px !important;
}

.title {
  width: calc(100% - 135px);
  min-width: 150px;
  font-size: 1.25rem !important;
  font-weight: 500;
  line-height: 2rem;
  letter-spacing: 0.0125em !important;
  font-family: 'Roboto', sans-serif !important;
}
.menuBtn {
  right: 15px;
  position: absolute;
}
.history-item {
  cursor: pointer;
}
</style>

