import * as tf from './tf.js';

Vue.component('tf-user', {
	props: ['id'],
	computed: {
		following: {
			get: function() {
				return tf.g_data.users?.[tf.g_data.whoami]?.following?.[this.id];
			},
		},
		whoami: { get: function() { return tf.g_data.whoami; } },
		users: { get: function() { return tf.g_data.users; } },
	},
	methods: {
		show_user: function() {
			window.parent.postMessage({
				action: 'setHash',
				hash: this.id,
			}, '*');
		},
	},
	template: `<md-chip :class="following ? 'md-accent' : ''">
					<a :href="'#' + id" style="color: #fff">{{users[id] && users[id].name ? users[id].name : id}}</a>
					<md-tooltip v-if="users[id] && users[id].name">{{id}}</md-tooltip>
				</md-chip>`,
});