
<template>
	<div class="container">
		<b-table striped hoverable :data="rows" :columns="columns"></b-table>
		<br />
		<b-field grouped>
			<b-select v-model="target" placeholder="Target">
				<option value="@channel">
					Channel
				</option>
			</b-select>
			<b-input v-model="text" placeholder="Message" expanded></b-input>
			<p class="control">
				<button @click="sendTxt" class="button is-primary">Send</button>
			</p>
		</b-field>
	</div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { State, Getter } from "vuex-class";
import { RoomState } from "@/store/room";

const columns = [
	{
		field: "time",
		label: "Time",
		width: 300
	},
	{
		field: "type",
		label: "Type",
		width: 100
	},
	{
		field: "message",
		label: "Message"
	}
];

interface LogRow {
	time: string;
	type: string;
	message: string;
}

@Component({})
export default class RoomLog extends Vue {
	@State("room") private room!: RoomState;

	private target!: "@channel" | string;
	private text!: string;

	private data() {
		return {
			columns,
			target: "@channel",
			text: ""
		};
	}

	private get rows(): LogRow[] {
		return this.room.messages.map(v => {
			let fullType = v.type;
			let msg = "* no message *";
			if (v.type == "message" && v.message) {
				fullType += "/" + v.message.type;
				if (v.message.message && v.message.message != "") {
					msg = v.message.message;
				}
			}
			if (v.type == "event" && v.event) {
				fullType += "/" + v.event.type;
				if (v.event.message && v.event.message != "") {
					msg = v.event.message;
				}
			}
			return {
				time: v.time,
				type: fullType,
				message: msg
			};
		});
	}

	private sendTxt() {}
}
</script>
