<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 - amount) > 0">
          Noch {{ ((limit - amount) / 100).toFixed(2) }} €
          übrig!!
        </v-card-subtitle>
        <v-card-text>
          <v-row v-if="!loading">
            <v-col cols="12">
              <v-row>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(140)"
                  >Bier</v-btn>
                </v-col>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(200)"
                  >Cuba</v-btn>
                </v-col>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(50)"
                  >Schnaps</v-btn>
                </v-col>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(200)"
                  >Wein</v-btn>
                </v-col>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(200)"
                  >Gin Tonic</v-btn>
                </v-col>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(100)"
                  >Fritz</v-btn>
                </v-col>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(100)"
                  >Saft</v-btn>
                </v-col>
                <v-col cols="6" xs="3" sm="4" class="drinkCol">
                  <v-btn
                    class="drinkBtn"
                    block
                    :disabled="locked"
                    :color="color"
                    @click="addAmount(30)"
                  >Wasser</v-btn>
                </v-col>
              </v-row>
              <v-row v-if="!loading">
                <v-col cols="8">
                  <v-text-field
                    outlined
                    type="number"
                    label="Benutzerdefinierter Betrag"
                    :disabled="locked"
                    v-model="customValue"
                  ></v-text-field>
                </v-col>
                <v-col cols="2">
                  <v-btn fab :color="color" :disabled="locked" @click="addAmount(customValue)">
                    <v-icon>{{ plus }}</v-icon>
                  </v-btn>
                </v-col>
                <v-col cols="2">
                  <v-list-item>
                    <v-list-item-content class="text-center">
                      <v-list-item-action-text :class="getColor()">
                        {{ (amount / 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-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="stornoAmount(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.storno">STORNIERT!!!</v-list-item-subtitle>
              <v-list-item-action-text
                v-if="isStronoEnabled(message.date) && !message.storno"
              >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="showConfirmStornoDialog" max-width="290">
      <v-card>
        <v-card-title>Willst du wirklich??</v-card-title>
        <v-card-text v-if="stornoMessage">
          Willst du wirklich den Betrag
          {{ (stornoMessage.amount / 100).toFixed(2) }}€ von
          den Dienstgetränke stornieren?
        </v-card-text>
        <v-card-actions>
          <v-spacer />
          <v-btn text @click="cancelStorno">Abbrechen</v-btn>
          <v-btn text @click="acceptStorno">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 { mdiPlus, mdiMenu } from '@mdi/js'

export default {
  name: 'BarFreedrinks',
  components: { AddAmountSkeleton },
  created() {
    this.loading = false
    this.timer = setInterval(() => (this.componentRenderer += 1), 1000)
  },
  data() {
    return {
      plus: mdiPlus,
      menuIcon: mdiMenu,
      loading: true,
      locked: false,
      showConfirmStornoDialog: false,
      stornoMessage: null,
      limit: 1000,
      amount: 0,
      customValue: null,
      color: 'green accent-4',
      messages: [],
      timer: '',
      componentRenderer: 0,
      isMenuShow: false
    }
  },
  methods: {
    addAmount(amount) {
      if (amount) {
        this.amount += amount
        this.generateMessage(amount)
      }
      this.checkLocked()
    },
    stornoAmount(message) {
      if (!this.isStronoEnabled(message.date) || message.storno) {
        return
      }

      this.showConfirmStornoDialog = true
      this.stornoMessage = message
    },

    cancelStorno() {
      this.showConfirmStornoDialog = null
      this.stornoMessage = null
    },
    generateMessage(amount) {
      this.messages.push({
        date: new Date(),
        storno: 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'
    },
    acceptStorno() {
      this.stornoMessage.storno = true
      this.amount -= this.stornoMessage.amount
      console.log(this.amount, this.stornoMessage)
      this.cancelStorno()
    }
  },
  computed: {
    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
      }
    }
  },
  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>

