<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>
    <br />
    {{ 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'

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

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

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

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

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

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

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