<template>
  <div class="account-transaction-list" v-if="account">
    <div
      class="field has-addons has-addons-centered is-narrow"
      v-if="showFilter"
    >
      <div class="control" v-if="filteredBy">
        <button type="submit" class="button" @click="filteredBy = ''">
          <awe-icon icon="times" />
        </button>
      </div>
      <div class="control">
        <div class="select is-fullwidth">
          <select v-model="filteredBy">
            <option value>Tous</option>
            <option
              v-for="(user, k) in account.users"
              :key="k"
              :value="user.alias"
              >{{ user.alias }}</option
            >
          </select>
        </div>
      </div>
    </div>
    <div class="table-container">
      <table class="table is-hoverable is-striped">
        <thead v-if="head">
          <tr>
            <th scope="col">
              <awe-icon icon="minus" />
            </th>
            <th scope="col" class="align">
              <awe-icon icon="user" />
            </th>
            <th scope="col" class="align">
              <awe-icon icon="money-bill-wave" />
            </th>
          </tr>
        </thead>
        <tbody>
          <tr
            v-for="(transaction, k) in filteredTransactions"
            :key="k"
            :data-index="k"
            :id="transaction._id"
          >
            <td class="multiline">
              <router-link
                :to="{ name: 'transaction', params: { id: transaction._id } }"
                >{{ transaction.name }}</router-link
              >
              <br />
              <span class="date">{{ transaction.date | date }}</span>
            </td>
            <td class="pay-by">{{ transaction.payBy }}</td>
            <td class="numeric">
              {{
                transaction.amount
                  | moneypad(transaction.mainCurrency, hasMultipleCurrencies)
              }}
            </td>
          </tr>
        </tbody>
        <tfoot v-if="foot">
          <tr
            class="is-selected"
            :style="{
              'background-color': account.color,
              color: findContrastColor(account.color)
            }"
          >
            <td colspan="2" class="total">total</td>
            <td class="numeric">
              {{ total | moneypad(account.mainCurrency) }}
            </td>
          </tr>
        </tfoot>
      </table>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import IAccount from '@/models/IAccount'
import ITransaction from '@/models/ITransaction'
import { findContrastColor } from '@/utils'

@Component
export default class AccountTransactionList extends Vue {
  @Prop({ type: Object, default: () => null })
  public account!: IAccount | null
  @Prop({ type: Array, required: true })
  public transactions!: ITransaction[]
  @Prop({ type: Boolean, default: true })
  public filter!: boolean
  @Prop({ type: Boolean, default: true })
  public head!: boolean
  @Prop({ type: Boolean, default: false })
  public foot!: boolean
  public filteredBy: string = ''
  public findContrastColor = findContrastColor

  public get total(): number {
    return this.transactions.reduce(
      (a: number, transaction: ITransaction) => a + transaction.amount,
      0
    )
  }

  public get filteredTransactions(): ITransaction[] {
    if (!this.filteredBy) {
      return this.transactions
    }
    return this.transactions.filter(
      (transaction: ITransaction) => transaction.payBy === this.filteredBy
    )
  }

  public get isMultiUser(): boolean {
    const payBy = new Set(
      this.transactions.map((transaction: ITransaction) => transaction.payBy)
    )
    return payBy.size > 1
  }

  public get showFilter(): boolean {
    return this.filter && this.isMultiUser
  }

  public get hasMultipleCurrencies(): boolean {
    return (this.account && this.account.currencies.length > 1) || false
  }
}
</script>

<style lang="scss" scoped>
.account-transaction-list {
  margin: auto;
}

.table-container {
  overflow-x: auto;
}

.multiline {
  line-height: 15px;
}

.date {
  font-style: italic;
  font-size: 14px;
}

th {
  &.align {
    text-align: center;
  }
}
</style>
