<template>
  <q-page padding class="fit row justify-left q-col-gutter-sm">
    <div class="col-12">
      <q-card>
        <BalanceHeader @update:user="userUpdated" :showSelector="showSelector" />
        <q-separator />

        <q-card-section class="row q-col-gutter-md" v-if="shortCuts">
          <div :key="index" v-for="(shortcut, index) in shortCuts" class="col-4">
            <q-btn
              push
              v-if="shortcut"
              color="primary"
              style="width: 100%"
              :label="shortcut.toFixed(2).toString() + ' €'"
              @click="changeBalance(shortcut)"
            >
              <q-popup-proxy context-menu>
                <q-btn label="Entfernen" @click="removeShortcut(shortcut)" />
              </q-popup-proxy>
              <q-tooltip>Rechtsklick um Verknüpfung zu entfernen</q-tooltip>
            </q-btn>
          </div></q-card-section
        >
        <q-card-section class="row q-col-gutter-md items-center">
          <div class="col-sm-4 col-xs-12">
            <q-input
              v-model.number="amount"
              type="number"
              filled
              label="Eigener Betrag"
              step="0.1"
              min="0"
            />
          </div>
          <div class="col-sm-4 col-xs-6">
            <q-btn
              style="width: 100%"
              color="primary"
              label="Anschreiben"
              @click="changeBalance(amount * -1)"
              ><q-tooltip>Rechtsklick um Betrag als Verknüpfung hinzuzufügen</q-tooltip>
              <q-popup-proxy context-menu v-model="showAddShortcut">
                <q-btn label="neue Verknüpfung" @click="addShortcut"></q-btn>
              </q-popup-proxy>
            </q-btn>
          </div>
          <div class="col-sm-4 col-xs-6">
            <q-btn
              style="width: 100%"
              color="secondary"
              label="Gutschreiben"
              @click="changeBalance(amount)"
            />
          </div>
        </q-card-section>
      </q-card>
    </div>
    <div v-for="(transaction, index) in transactions" v-bind:key="index" class="col-md-4 col-sm-6">
      <!-- TODO: In Vue3 use v-model:transaction="..." -->
      <Transaction :transaction.sync="transactions[index]" />
    </div>
  </q-page>
</template>

<script lang="ts">
import { computed, ref, defineComponent, onBeforeMount } from '@vue/composition-api';
import { hasPermission } from 'src/utils/permission';
import { StateInterfaceBalance } from '../store/balance';
import { Store } from 'vuex';
import Transaction from '../components/Transaction.vue';
import BalanceHeader from '../components/BalanceHeader.vue';
import PERMISSIONS from '../permissions';

export default defineComponent({
  name: 'BalanceAdd',
  components: { Transaction, BalanceHeader },
  setup(_, { root }) {
    onBeforeMount(() => void store.dispatch('balance/getShortcuts'));
    const store = <Store<StateInterfaceBalance>>root.$store;

    const amount = ref<number>(0);
    const showAddShortcut = ref(false);
    const transactions = computed(() => store.state.balance.transactions.slice().reverse());
    const user = ref(store.state.user.currentUser);
    const shortCuts = ref(store.state.balance.shortcuts);

    const showSelector = computed(
      () => hasPermission(PERMISSIONS.DEBIT, store) || hasPermission(PERMISSIONS.CREDIT, store)
    );

    function addShortcut() {
      if (amount.value != 0) void store.dispatch('balance/addShortcut', amount.value * -1);
    }
    function removeShortcut(shortcut: number) {
      void store.dispatch('balance/removeShortcut', shortcut);
    }
    function userUpdated(selectedUser: FG.User) {
      user.value = selectedUser;
    }
    function changeBalance(amount: number) {
      store
        .dispatch('balance/changeBalance', { amount: amount, user: user.value?.userid })
        .catch(err => console.log(err));
    }

    return {
      user,
      addShortcut,
      removeShortcut,
      showAddShortcut,
      changeBalance,
      transactions,
      amount,
      showSelector,
      shortCuts,
      userUpdated
    };
  }
});
</script>
