<template>
  <div class="tag-list columns is-multiline is-centered">
    <div class="column is-half">
      <h3 class="subtitle is-3">Légende</h3>
      <table class="table">
        <tr v-for="(slice, k) in slices" :key="k" :style="legendStyle(slice)" class="legend-item">
          <td>
            <awe-icon :icon="categories[slice.key].tag.icon" />
          </td>
          <td class="legend-label">{{ slice.label }}</td>
          <td class="percent-label numeric">{{ Math.round(slice.percent * 100) }}%</td>
        </tr>
      </table>
    </div>
    <div class="column is-half">
      <h3 class="subtitle is-3">Graphique</h3>
      <div class="chart-container">
        <chart-pie :slices="slices" />
      </div>
    </div>
    <div class="column is-12">
      <h3 class="subtitle is-3">Détails</h3>
      <div class="field has-addons has-addons-centered is-narrow">
        <div class="control" v-if="filterCategory">
          <button type="submit" class="button" @click="filterCategory = ''">
            <awe-icon icon="times" />
          </button>
        </div>
        <div class="control">
          <div class="select is-fullwidth">
            <select v-model="filterCategory">
              <option value>Toutes</option>
              <option
                v-for="(category, k) in categories"
                :key="k"
                :value="k"
              >{{ category.tag.label }}</option>
            </select>
          </div>
        </div>
      </div>
      <div class="columns is-multiline" :class="{ 'is-centered': !!filterCategory }">
        <div v-for="(category, k) in filteredCategories" :key="k" class="column is-half">
          <div class="columns category-list">
            <div class="column is-2 tag-element account-color">
              <awe-icon :icon="category.tag.icon" />
            </div>
            <div class="column transaction-list" v-if="category.transactions.length">
              <p>{{ $tc('account.total', category.transactions.length, { count: category.transactions.length }) }}</p>
              <account-transaction-list
                :filter="false"
                :head="false"
                :foot="true"
                :account="account"
                :transactions="category.transactions"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import colors from '@/data/colors'
import IAccount from '@/models/IAccount'
import ITransaction from '@/models/ITransaction'
import ISlice from '@/models/ISlice'
import TransactionTag, {
  ITagLabel,
  TransactionTagLabel
} from '@/enums/TransactionTag'

interface ICategory {
  [key: string]: {
    tag: ITagLabel
    transactions: ITransaction[]
  }
}

@Component({
  components: {
    'chart-pie': () => import('@/components/ChartPie.vue'),
    'account-transaction-list': () =>
      import('@/components/AccountTransactionList.vue')
  }
})
export default class TagList extends Vue {
  @Prop({ type: Object, required: true })
  public account!: IAccount
  @Prop({ type: Array, default: () => [] })
  public transactions!: ITransaction[]
  public transactionTagLabel: typeof TransactionTagLabel = TransactionTagLabel
  public filterCategory: string = ''

  public legendStyle(slice: ISlice): any {
    return {
      color: slice.color
    }
  }

  public get categories(): ICategory {
    return this.transactions.reduce(
      (a: ICategory, transaction: ITransaction) => {
        if (!a[transaction.tag]) {
          a[transaction.tag] = {
            tag: this.transactionTagLabel[transaction.tag]
              ? this.transactionTagLabel[transaction.tag]
              : this.transactionTagLabel[TransactionTag.None],
            transactions: []
          }
        }
        a[transaction.tag].transactions.push(transaction)
        return a
      },
      {}
    )
  }

  public get filteredCategories(): ICategory {
    if (this.filterCategory && this.filterCategory in this.categories) {
      return {
        [this.filterCategory]: this.categories[this.filterCategory]
      }
    }
    return this.categories
  }

  public get slices(): ISlice[] {
    const tags = Object.keys(this.categories)
    const total = this.transactions.reduce(
      (t: number, b: ITransaction) =>
        t + parseFloat((b.amount || 0).toString()),
      0
    )
    const slices = tags.map((tag: string, index: number) => ({
      percent:
        this.categories[tag].transactions.reduce(
          (t: number, b: ITransaction) => t + b.amount,
          0
        ) / total,
      color: colors[index].value || '#ffffff',
      darkColor: colors[index].darkValue || '#ffffff',
      key: tag,
      label: this.categories[tag].tag.label
    }))

    return slices.sort((a: ISlice, b) => (a.percent >= b.percent ? -1 : 1))
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/variables';
.category-list:not(:last-child) {
  border-bottom: 1px solid $main;
}
.tag-element {
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  flex-flow: column;
  font-size: 30pt;
}
.chart-container {
  padding: 15px;
}
.legend {
  font-weight: bold;
  font-size: 16pt;
}
.legend-item {
  background-color: $main;
  font-size: 20px;
  line-height: 2em;
}
.legend-label {
  text-align: center;
}
.percent-label {
  text-align: right;
}
</style>
