<template>
  <div>
    <v-toolbar>
      <v-spacer />
      <v-toolbar-items>
        <v-autocomplete
          outlined
          return-object
          v-model="user"
          style="margin-top: 3px"
          placeholder="Suche Person"
          :items="allUsers"
          item-text="fullName"
          full-width
          :loading="loading"
          :search-input.sync="filter"
          clearable
        >
          <template v-slot:prepend-inner>
            <v-icon>{{ search_person }}</v-icon>
          </template>
          <template v-slot:item="data">
            <v-list-item-icon v-if="getLocked(data.item)">
              <v-icon>mdi-alert</v-icon>
            </v-list-item-icon>
            <v-list-item-content>
              {{data.item.fullName}}
              <v-spacer/>
              {{(getCredit(data.item)/100).toFixed(2)}} €
            </v-list-item-content>
          </template>
        </v-autocomplete>
        <v-btn text @click="addUser">Hinzufügen</v-btn>
        <v-btn v-if="!locked" text @click="lock">Sperren</v-btn>
        <v-btn v-else text @click="overlay = true">Entsperren</v-btn>
        <v-btn @click="clickMenu" icon>
          <v-icon>{{ menuIcon }}</v-icon>
        </v-btn>
      </v-toolbar-items>
    </v-toolbar>
    <v-dialog v-model="overlay">
        <v-card>
          <v-card-title>Entsperre Baransicht</v-card-title>
          <v-card-text>
            <v-text-field outlined type="password" label="Passwort" v-model="password"></v-text-field>
          </v-card-text>
          <v-card-actions>
            <v-spacer/>
            <v-btn text @click="overlay = false">Abbrechen</v-btn>
            <v-btn text @click="doUnlock">Entsperren</v-btn>
          </v-card-actions>
        </v-card>
    </v-dialog>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'
import { mdiAccountSearch, mdiMenu, mdiAlert } from '@mdi/js'

export default {
  name: 'SearchBar',
  props: {},
  data() {
    return {
      user: null,
      filter: '',
      search_person: mdiAccountSearch,
      menuIcon: mdiMenu,
      alert: mdiAlert,
      overlay: false,
      password: ''
    }
  },
  created() {
    this.getAllUsers()
    this.getLocked()
  },
  methods: {
    ...mapActions({
      getAllUsers: 'barUsers/getAllUsers',
      addCreditList: 'barUsers/addCreditList',
      setFilter: 'barUsers/setFilter',
      activateMenu: 'barUsers/activateMenu',
      deactivateMenu: 'barUsers/deactivateMenu',
      lock: 'barUsers/setLocked',
      unlock: 'barUsers/unlock',
      getLocked: 'barUsers/getLocked'
    }),
    addUser() {
      this.addCreditList(this.user)
    },
    clickMenu() {
      if (this.menu) this.deactivateMenu()
      else this.activateMenu()
    },
    doUnlock() {
      this.unlock(this.password)
      this.password = ''
      this.overlay = false
    },
    getCredit(user) {
      let retUser = this.users.find(item => {
        return item.username === user.username
      })
      return retUser ? retUser.amount : 0
    },
    getLocked(user) {
      let retUser = this.users.find(item => {
        return item.username === user.username
      })
      return retUser ? retUser.locked : false
    }
  },
  computed: {
    ...mapGetters({
      allUsers: 'barUsers/allUsers',
      users: 'barUsers/users',
      loading: 'barUsers/allUsersLoading',
      menu: 'barUsers/menu',
      locked: 'barUsers/locked'
    })
  },
  watch: {
    filter(val) {
      this.setFilter(val)
    }
  }
}
</script>

<style scoped></style>
