<template>
  <div
    class="account-card box"
    :style="getColor(account.color)"
    @click="goToAccount(account._id || '')"
  >
    <router-link
      class="account-name"
      :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>
    <span v-if="account.isPublic">
      &nbsp;
      <awe-icon icon="users" />
    </span>
    <div class="numeric">{{ totalCost | moneypad(account.mainCurrency, false) }}</div>
    <div class="account-users">{{ account.users && account.users.map((u) => u.alias).join(', ') }}</div>
  </div>
</template>

<script lang="ts">
import { Component, Prop, Vue } from 'vue-property-decorator'
import { findDarkValue, findLightValue } 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'

const GRADIENT = false

@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 {
      background: GRADIENT
        ? `linear-gradient(135deg, ${color}, ${findLightValue(color)})`
        : color,
      color: findDarkValue(color)
    }
  }

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

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

.account-name {
  font-weight: bold;
}

.box,
.box:not(:last-child) {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-radius: 8px;
  word-wrap: break-word;
  hyphens: auto;
  margin-bottom: 0;

  a {
    font-size: 1.2rem;
    color: $main;
  }
  &:hover {
    cursor: pointer;
  }
  .account-users {
    text-overflow: ellipsis;
  }
}
</style>
