<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-show="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>Tout le monde</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) }}</td>
          </tr>
        </tbody>
        <tfoot v-if="foot">
          <tr class="is-selected">
            <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'

@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 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
  }
}
</script>

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

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

table tr.is-selected {
  background-color: var(--primary-color);
  color: var(--primary-font-color);
}

.multiline {
  line-height: 15px;
}

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

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