<html>
	<head>
		<meta content="width=device-width,initial-scale=1,minimal-ui" name="viewport">
		<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
		<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
		<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/vue-material.min.css">
		<link rel="stylesheet" href="https://unpkg.com/vue-material/dist/theme/default-dark.css">
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
		<script src="vue-material.js"></script>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/commonmark/0.29.1/commonmark.min.js"></script>
		<script>
			var g_data = {
				whoami: null,
				connections: [],
				messages: [],
				users: {},
				broadcasts: [],
				showUsers: false,
				show_connect_dialog: false,
				show_user_dialog: null,
				connect: null,
				pubs: [],
				votes: [],
				apps: {},
				share_app: null,
			};
			var g_data_initial = JSON.parse(JSON.stringify(g_data));
			window.addEventListener('message', function(event) {
				var key = Object.keys(event.data)[0];
				if (key + 's' in g_data && Array.isArray(g_data[key + 's'])) {
					g_data[key + 's'].push(event.data[key]);
				} else if (key == 'user') {
					Vue.set(g_data.users, event.data.user.user, Object.assign({}, g_data.users[event.data.user.user] || {}, event.data.user.about));
				} else if (key == 'followers') {
					if (!g_data.users[event.data.followers.id]) {
						Vue.set(g_data.users, event.data.followers.id, {});
					}
					Vue.set(g_data.users[event.data.followers.id], 'followers', event.data.followers.users);
				} else if (key == 'following') {
					if (!g_data.users[event.data.following.id]) {
						Vue.set(g_data.users, event.data.following.id, {});
					}
					Vue.set(g_data.users[event.data.following.id], 'following', event.data.following.users);
				} else if (key == 'broadcasts') {
					g_data.broadcasts = event.data.broadcasts;
				} else if (key == 'pubs') {
					g_data.pubs = event.data.pubs;
				} else if (key == 'apps') {
					g_data.apps = event.data.apps;
				} else if (key == 'clear') {
					Object.keys(g_data_initial).forEach(function(key) {
						Vue.set(g_data, key, JSON.parse(JSON.stringify(g_data_initial[key])));
					});
				} else {
					g_data[key] = event.data[key];
				}
			});
			window.addEventListener('load', function() {
				Vue.use(VueMaterial.default);
				Vue.component('tf-user', {
					data: function() { return {users: g_data.users, show_user_dialog: false, show_follow_dialog: false} },
					props: ['id'],
					mounted: function() {
						window.parent.postMessage({user: this.id}, '*');
					},
					computed: {
						following: {
							get: function() {
								return g_data.users[g_data.whoami] &&
									g_data.users[g_data.whoami].following &&
									g_data.users[g_data.whoami].following.indexOf(this.id) != -1;
							},
							set: function(newValue) {
								if (g_data.users[g_data.whoami] &&
									g_data.users[g_data.whoami].following) {
									if (newValue && g_data.users[g_data.whoami].following.indexOf(this.id) == -1) {
										window.parent.postMessage({appendMessage: {type: "contact", following: true, contact: this.id}}, '*');
									} else if (!newValue) {
										window.parent.postMessage({appendMessage: {type: "contact", following: false, contact: this.id}}, '*');
									}
								}
							},
						},
					},
					template: `<span @click="show_user_dialog = true">
							{{users[id] && users[id].name ? users[id].name : id}}
								<md-tooltip v-if="users[id] && users[id].name">{{id}}</md-tooltip>
								<md-dialog :md-active.sync="show_user_dialog">
									<md-dialog-title>{{users[id] && users[id].name ? users[id].name : id}}</md-dialog-title>
									<md-dialog-content v-if="users[id]">
										<div v-if="users[id].image"><img :src="'/' + users[id].image + '/view'"></div>
										<div v-if="users[id].name">{{id}}</div>
										<div>{{users[id].description}}</div>
										<div><md-switch v-model="following">Following</md-switch></div>
										<md-list>
											<md-subheader>Followers</md-subheader>
											<md-list-item v-for="follower in (users[id] || []).followers" v-bind:key="'follower-' + follower">
												<tf-user :id="follower"></tf-user>
											</md-list-item>
											<md-subheader>Following</md-subheader>
											<md-list-item v-for="user in (users[id] || []).following" v-bind:key="'following-' + user">
												<tf-user :id="user"></tf-user>
											</md-list-item>
										</md-list>
									</md-dialog-content>
									<md-dialog-actions>
										<md-button @click="show_user_dialog = false">Close</md-button>
									</md-dialog-actions>
								</md-dialog>
							</span>`,
				});
				Vue.component('tf-message', {
					props: ['message', 'messages'],
					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 {}
							});
						},
						votes: function() {
							return [];
							var id = this.message.id;
							return this.votes.filter(function (x) {
								try {
									var j = JSON.parse(x.content);
									return j.type == 'vote' && j.vote.link == id;
								} catch {}
							}).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:key="sub_message.id"></tf-message>
	<md-chip v-for="vote in Object.keys(votes)" v-bind:key="vote">
		{{vote + (votes[vote].length > 1 ? ' (' + votes[vote].length + ')' : '')}}
	</md-chip>
</md-app-content>
</md-app>`,
				});
				function markdown(d) { return d; }
				Vue.config.performance = true;
				var vue = new Vue({
					el: '#app',
					data: g_data,
					methods: {
						post_message: function() {
							if (g_data.share_app) {
								window.parent.postMessage({share_app: {
									app: g_data.apps[g_data.share_app],
									name: g_data.share_app,
									text: document.getElementById('post_text').value,
								}}, '*');
							} else {
								window.parent.postMessage({post: document.getElementById('post_text').value}, '*');
							}
							document.getElementById('post_text').value = '';
						},
						ssb_connect: function(connection) {
							window.parent.postMessage({connect: connection}, '*');
						},
						content_json: function(message) {
							try {
								return JSON.parse(message.content);
							} catch {
								return undefined;
							}
						},
						refresh: function() {
							window.parent.postMessage({refresh: true}, '*');
						},
					}
				});
			});
			window.parent.postMessage('ready', '*');
		</script>
	</head>
	<body style="color: #fff">
		<div id="app">
			<md-dialog :md-active.sync="show_connect_dialog">
				<md-dialog-title>Connect</md-dialog-title>
				<md-dialog-content>
					<md-field>
						<label>net:127.0.0.1:8008~shs:id</label>
						<md-input v-model="connect"></md-input>
					</md-field>
				</md-dialog-content>
				<md-dialog-actions>
					<md-button class="md-primary" @click="ssb_connect(connect); connect = null; show_connect_dialog = false">Connect</md-button>
					<md-button @click="connect = null; show_connect_dialog = false">Cancel</md-button>
				</md-dialog-actions>
			</md-dialog>
			<md-app style="position: absolute; height: 100%; width: 100%">
				<md-app-toolbar class="md-primary">
					<md-button class="md-icon-button" @click="showUsers = !showUsers">
						<md-icon>menu</md-icon>
					</md-button>
					<span class="md-title">Tilde Friends Secure Scuttlebutt Test</span>
				</md-app-toolbar>
				<md-app-drawer :md-active.sync="showUsers" md-persistent="full">
					<md-list>
						<md-subheader>Followers</md-subheader>
						<md-list-item v-for="follower in (users[whoami] || []).followers" v-bind:key="'follower-' + follower"><tf-user :id="follower"></tf-user></md-list-item>
						<md-subheader>Following</md-subheader>
						<md-list-item v-for="user in (users[whoami] || []).following" v-bind:key="'following-' + user"><tf-user :id="user"></tf-user></md-list-item>
						<md-subheader>Network</md-subheader>
						<md-list-item v-for="broadcast in broadcasts" v-bind:key="JSON.stringify(broadcast)" @click="ssb_connect(broadcast)">{{broadcast.address}}:{{broadcast.port}} <tf-user :id="broadcast.pubkey"></tf-user></md-list-item>
						<md-subheader>Pubs</md-subheader>
						<md-list-item v-for="pub in pubs" v-bind:key="JSON.stringify(pub)" @click="ssb_connect({address: pub.host, port: pub.port, pubkey: pub.key})">{{pub.host}}:{{pub.port}} <tf-user :id="pub.key"></tf-user></md-list-item>
						<md-subheader>Connections</md-subheader>
						<md-list-item v-for="connection in connections" v-bind:key="'connection-' + JSON.stringify(connection)"><tf-user :id="connection"></tf-user></md-list-item>
						<md-list-item @click="show_connect_dialog = true">Connect</md-list-item>
					</md-list>
				</md-app-drawer>
				<md-app-content>
					<md-button @click="refresh()" class="md-icon-button md-dense md-raised md-primary">
						<md-icon>cached</md-icon>
					</md-button>
					Welcome, <tf-user :id="whoami"></tf-user>.
					<md-card class="md-elevation-8">
						<md-card-header>
							<div class="md-title">What's up?</div>
						</md-card-header>
						<md-card-content>
							<md-chip v-if="share_app" md-deletable @md-delete="share_app = null">
								{{share_app}}: {{apps[share_app]}}
							</md-chip>
							<md-field>
								<label>Post a message</label>
								<md-textarea id="post_text"></md-textarea>
							</md-field>
						</md-card-content>
						<md-card-actions>
							<md-menu>
								<md-button md-menu-trigger>Share App</md-button>
								<md-menu-content>
									<md-menu-item v-for="app in Object.keys(apps)" @click="share_app = app">
										{{app}}
									</md-menu-item>
								</md-menu-content>
							</md-menu>
							<md-button class="md-raised md-primary" v-on:click="post_message()">Submit Post</md-button>
						</md-card-actions>
					</md-card>
					<tf-message v-for="message in messages" v-if="!content_json(message).root || !messages.some(m => m.id == content_json(message).root)" v-bind:message="message" v-bind:messages="messages" v-bind:key="message.id"></tf-message>
				</md-app-content>
			</md-app>
		</div>
	</body>
</html>