<template>
	<component :is="teamTag" :to="teamUrl">
		<div class="team-icon" :style="teamStyle">
			<img
				v-if="imgSrc"
				:src="imgSrc"
				class="team-icon__img"
			>
			<div
				v-else
				class="team-icon__placeholder"
			>
				{{ teamAbbr }}
			</div>
		</div>
	</component>
</template>

<script lang="ts">
import Vue, { PropType } from 'vue';
import { Team } from '~/typings/models';
import { Optional } from '~/typings/helpers';
import { cleanInt } from '~/src/helpers';

export default Vue.extend({
	name: 'Avatar',
	props: {
		team: {
			type: Object as PropType<Team>,
			required: true
		},
		size: {
			type: [String, Number],
			default: 34
		},
		openTeam: {
			type: Boolean,
			default: true
		}
	},

	computed: {
		teamTag(): string {
			return this.openTeam ? `router-link` : 'span';
		},
		teamUrl(): Optional<string> {
			return `/team/${this.team.id}`;
		},
		teamAbbr(): string {
			return this.team.name
				.split(' ')
				.map(s => s[0])
				.join('');
		},
		imgSrc(): Optional<string> {
			return this.team.logoImage;
		},
		teamStyle(): any {
			const size = cleanInt(this.size);

			return {
				width: size + 'px',
				height: size + 'px',
				fontSize: (size / 50) + 'em'
			};
		}
	}
});
</script>

<style lang="scss">
.team-icon {
	@include rounded(lg);

	background-color: var(--color-shade-0);
	overflow: hidden;
	image-rendering: crisp-edges;
	object-fit: cover;


	&__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	&__placeholder {
		@include font-weight(bold);

		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: var(--color-shade-3);
	}
}
</style>