<template>
  <q-card>
    <BalanceHeader v-model="sender" :show-selector="showSelector" @open-history="openHistory" />
    <q-separator />
    <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="Betrag" step="0.1" min="0" />
      </div>
      <div class="col-sm-4 col-xs-6">
        <UserSelector v-model="receiver" label="Empfänger" />
      </div>
      <div class="col-sm-4 col-xs-6">
        <q-btn
          style="width: 100%"
          color="primary"
          :disable="sendDisabled"
          label="Senden"
          @click="sendAmount"
        />
      </div>
    </q-card-section>
  </q-card>
</template>

<script lang="ts">
import { computed, ref, defineComponent } from 'vue';
import { hasPermission } from 'src/utils/permission';
import UserSelector from 'src/plugins/user/components/UserSelector.vue';
import BalanceHeader from '../components/BalanceHeader.vue';
import PERMISSIONS from '../permissions';
import { useBalanceStore } from '../store';
import { useMainStore } from 'src/stores';

export default defineComponent({
  name: 'BalanceTransfer',
  components: { BalanceHeader, UserSelector },
  emits: { 'open-history': () => true },
  setup(_, { emit }) {
    const store = useBalanceStore();
    const mainStore = useMainStore();

    const showSelector = computed(() => hasPermission(PERMISSIONS.SEND_OTHER));
    const sender = ref<FG.User | undefined>(mainStore.currentUser);
    const receiver = ref<FG.User | undefined>(undefined);
    const amount = ref<number>(0);

    const sendDisabled = computed(() => {
      return !(
        receiver.value &&
        sender.value &&
        sender.value.userid != receiver.value.userid &&
        amount.value > 0
      );
    });

    async function sendAmount() {
      if (receiver.value) await store.changeBalance(amount.value, receiver.value, sender.value);
    }

    function openHistory() {
      emit('open-history');
    }

    return {
      sender,
      receiver,
      amount,
      sendAmount,
      showSelector,
      sendDisabled,
      openHistory,
    };
  },
});
</script>