<template>
  <div
    class="account-card box"
    :style="getColor(account.color)"
    @click="goToAccount(account._id)"
  >
    <router-link
      :class="{ 'is-primary': !account.color, 'is-white': account.color }"
      :style="`color: ${findDarkValue(account.color)}`"
      :to="{ name: 'account', params: { id: account._id } }"
      >{{ account.name }}</router-link
    >
    <div v-if="account.isPublic">
      <awe-icon icon="users" />
    </div>
    <div class="numeric">
      {{ totalCost | moneypad(account.mainCurrency, false) }}
    </div>
    {{ account.users && account.users.map((u) => u.alias).join(', ') }}
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { findDarkValue } from '@/utils'
import bus, { SYNC } from '@/utils/bus-event'
import accountService from '@/services/AccountService'
import IAccount from '@/models/IAccount'
import IColor from '@/models/IColor'
import FabButton from '@/components/FabButton.vue'
import ITransaction from '../models/ITransaction'
import transactionService from '../services/TransactionService'
import TransactionType from '../enums/TransactionType'
import colors from '../data/colors'

@Component
export default class AccountCard extends Vue {
  @Prop({ type: Object, required: true })
  public account!: IAccount
  public transactions: ITransaction[] = []

  public async mounted() {
    this.transactions = await transactionService.getAllByAccountId(
      this.account._id
    )
  }

  public findDarkValue(color: string): string | null {
    return findDarkValue(color)
  }

  public goToAccount(id: string): void {
    this.$router.push({ name: 'account', params: { id } })
  }

  public getColor(color: string | null): any | null {
    if (!color) {
      return null
    }
    return {
      backgroundColor: color,
      color: this.findDarkValue(color)
    }
  }

  private get totalCost(): number {
    return transactionService.getTotalCost(
      this.transactions,
      this.account.mainCurrency.code
    )
  }
}
</script>

<style lang="scss" scoped>
@import '../styles/variables';

.ct-chart {
  .ct-series-a {
    .ct-bar {
      stroke: blue;
      stroke-width: 10px;
    }
  }
}

.box {
  border-radius: 8px;
  word-wrap: break-word;
  hyphens: auto;

  a {
    font-size: 1.2rem;
    color: $main;
  }
  &:hover {
    cursor: pointer;
  }
}
</style>
