<template>
<div>
  <q-card flat square>
    <q-card-section class="row items-center justify-between" horizontal>
      <div class="col-5 text-left q-px-sm">
        <div
          :class="{ 'text-negative': isNegative() }"
          class="text-weight-bold text-h6"
        >
          <span v-if="isNegative()">-</span>{{ transaction.amount.toFixed(2) }}&#8239;€
        </div>
        <div class="col-5 q-px-sm text-center">
          <div class="text-subtitle1" v-if="isReversed">Storniert</div>
        </div>
        <div class="col-2 q-pr-sm" style="text-align: right">
          <q-btn
            :color="isReversed ? 'positive' : 'negative'"
            aria-label="Reverse transaction"
            :icon="!isReversed ? 'mdi-trash-can' : 'mdi-check-bold'"
            size="sm"
            round
            :disable="!canReverse"
            @click="reverse"
          />
        </div>
      </q-card-section>
    </q-card>
    <q-separator />
  </div>
</template>

<script lang="ts">
import { ref, computed, defineComponent, onUnmounted, onMounted } from 'vue';
import { hasPermission } from 'src/utils/permission';
import { formatDateTime } from 'src/utils/datetime';
import { StateInterfaceBalance } from 'src/plugins/balance/store/balance';
import { Store } from 'vuex';

interface Props {
  transaction: FG.Transaction;
}

export default defineComponent({
  name: 'Transaction',
  props: {
    transaction: {
      type: Object,
      required: true,
    },
  },
  watch: { transaction: 'refreshText' },
  setup(props: Props, { root, emit }) {
    const now = ref(Date.now());
    const ival = setInterval(() => (now.value = Date.now()), 1000);
    const store: Store<StateInterfaceBalance> = <Store<StateInterfaceBalance>>root.$store;
    const text = ref('');

    onUnmounted(() => clearInterval(ival));
    onMounted(() => refreshText());

    const isNegative = () => props.transaction.sender_id === store.state.user.currentUser?.userid;

    const refreshText = async () => {
      if (isNegative()) {
        text.value = 'Anschreiben';
        if (props.transaction.receiver_id !== null) {
          const user = <FG.User>await store.dispatch('user/getUser', {
            userid: props.transaction.receiver_id,
          });
          text.value = `Gesendet an ${user.display_name}`;
        }
      } else {
        text.value = 'Gutschrift';
        if (props.transaction.sender_id !== null) {
          const user = <FG.User>await store.dispatch('user/getUser', {
            userid: props.transaction.sender_id,
          });
          text.value = `Bekommen von ${user.display_name}`;
        }
      }
    };

    const isReversed = computed(
      () => props.transaction.reversal_id != undefined || props.transaction.original_id != undefined
    );

    const canReverse = computed(
      () =>
        !isReversed.value &&
        (hasPermission('balance_reversal', store) ||
          (props.transaction.sender_id === store.state.user.currentUser?.userid &&
            now.value - props.transaction.time.getTime() < 10000))
    );

    function reverse() {
      if (canReverse.value)
        store
          .dispatch('balance/revert', props.transaction)
          .then(() => {
            emit('update:transaction', props.transaction);
          })
          .catch((error) => console.log(error));
    }

    const timeStr = computed(() => {
      const elapsed = (now.value - props.transaction.time.getTime()) / 1000;
      if (elapsed < 60) return `Vor ${elapsed.toFixed()} s`;
      return formatDateTime(props.transaction.time, elapsed > 12 * 60 * 60, true, true) + ' Uhr';
    });

    return { timeStr, reverse, isNegative, text, refreshText, canReverse, isReversed };
  },
});
</script>