Vue.component('tf-message', {
	props: ['message', 'messages', 'votes'],
	data: function() { return { showRaw: false } },
	computed: {
		content_json: function() {
			try {
				return JSON.parse(this.message.content);
			} catch {
				return undefined;
			}
		},
		sub_messages: function() {
			var id = this.message.id;
			return this.messages.filter(function (x) {
				try {
					return JSON.parse(x.content).root == id;
				} catch {}
			});
		},
		votes2: function() {
			var id = this.message.id;
			var votes = this.votes[id] || [];
			return votes.reduce(function (accum, value) {
				var expression = JSON.parse(value.content).vote.expression;
				if (!accum[expression]) {
					accum[expression] = [];
				}
				accum[expression].push(value);
				return accum;
			}, {});
		}
	},
	methods: {
		markdown: function(md) {
			var reader = new commonmark.Parser({safe: true});
			var writer = new commonmark.HtmlRenderer();
			return writer.render(reader.parse(md));
		},
		json: function(message) {
			try {
				return JSON.parse(message.content);
			} catch {
				return undefined;
			}
		},
	},
	template: `<md-app class="md-elevation-8" style="margin: 1em" v-if="!content_json || ['pub', 'vote'].indexOf(content_json.type) == -1">
<md-app-toolbar>
	<h3>
		<tf-user :id="message.author"></tf-user>
	</h3>
	<div style="font-size: x-small">{{new Date(message.timestamp)}}</div>
	<div class="md-toolbar-section-end">
		<md-menu>
			<md-button md-menu-trigger class="md-icon-button"><md-icon>more_vert</md-icon></md-button>
			<md-menu-content>
				<md-menu-item v-if="!showRaw" v-on:click="showRaw = true">View Raw</md-menu-item>
				<md-menu-item v-else v-on:click="showRaw = false">View Message</md-menu-item>
			</md-menu-content>
		</md-menu>
	</div>
</md-app-toolbar>
<md-app-content>
	<div v-if="showRaw">{{message.content}}</div>
	<div v-else>
		<div v-if="content_json && content_json.type == 'post'">
			<div v-html="this.markdown(content_json.text)"></div>
			<img v-for="mention in content_json.mentions" v-if="mention.link && typeof(mention.link) == 'string' && mention.link.startsWith('&')" :src="'/' + mention.link + '/view'"></img>
		</div>
		<div v-else-if="content_json && content_json.type == 'tildefriends-app'">
			<div v-html="this.markdown(content_json.text)"></div>
			<md-button target="_top" :href="'/' + message.id + '/'">{{content_json.name || 'tildefriends-app'}}</md-button>
		</div>
		<div v-else-if="content_json && content_json.type == 'contact'"><tf-user :id="message.author"></tf-user> {{content_json.following ? '==&gt;' : '=/=&gt;'}} <tf-user :id="content_json.contact"></tf-user></div>
		<div v-else>{{message.content}}</div>
	</div>
	<tf-message v-for="sub_message in sub_messages" v-bind:message="sub_message" v-bind:messages="messages" v-bind:votes="votes" v-bind:key="sub_message.id"></tf-message>
	<md-chip v-for="vote in Object.keys(votes2)" v-bind:key="vote">
		{{vote + (votes2[vote].length > 1 ? ' (' + votes2[vote].length + ')' : '')}}
	</md-chip>
</md-app-content>
</md-app>`,
});