<template>
	<div>
		<div class="legend-bar">
			<div class="d-flex align-items-center" style="gap: 10px;">
				<span class="legend-pill request-pill">Request</span>
				<span class="legend-pill response-pill">Response</span>
			</div>
		</div>
		<Packet v-for="packetWithOffset in packetsWithOffsets"
				:key="packetWithOffset.packet.id"
				:packet="packetWithOffset.packet"
				:offset="packetWithOffset.offset" />
		<infinite-loading @infinite="infiniteLoadingHandler" ref="infiniteLoader">
			<span slot="no-results"></span>
		</infinite-loading>
	</div>
</template>

<script>
	import Packet from '../components/Packet';

	export default {
		name: 'ContentStream',
		props: ['servicePort', 'streamId',],
		data() {
			return {
				packets: [],
			};
		},
		computed: {
			packetsWithOffsets: function() {
				return this.packets.map((el, i) => {
					let offset = null;

					if (i !== 0) {
						offset = el.timestamp - this.packets[i - 1].timestamp;
					}

					return {packet: el, offset: offset,}
				})
			},
		},
		watch: {
			'$route.params.streamId': function () {
				this.packets = [];
				this.$refs.infiniteLoader.stateChanger.reset();
			},
		},
		methods: {
			infiniteLoadingHandler($state) {
				if (!this.$route.params.streamId) return $state.complete();

				const packets = this.packets;
				const pageSize = this.$store.state.pageSize;
				let startsFrom;
				if (packets && packets.length && packets[packets.length - 1]) {
					startsFrom = packets[packets.length - 1].id;
				} else {
					startsFrom = null;
				}

				this.$http.post(`packet/${this.$route.params.streamId}`, {
					startingFrom: startsFrom,
					pageSize: pageSize,
				}).then(response => {
					const data = response.data;
					if (data.length === 0) {
						console.log('Finished loading packets (empty page)');
						return $state.complete();
					}

					if (data[0] && this.packets[0] && data[0].id === this.packets[0].id) {
						console.log('Finished loading packets (overlap detected)');
						return $state.complete();
					}

					this.packets.push(...data);

					if (data.length < pageSize) {
						// this was the last page
						console.log('Finished loading packets (last page was not full)');
						$state.complete();
					} else {
						console.log('Loaded another page of packets');
						$state.loaded();
					}
				}).catch(e => {
					this.$bvToast.toast(`Failed to load portion of packets: ${e}`, {
						title: 'Error',
						variant: 'danger',
					});
					console.error('Failed to load portion of packets:', e);
					return $state.error();
				});
			},
		},
		components: {
			Packet,
		},
	};
</script>

<style>
	:root {
		--response-packet-color: rgba(255, 106, 213, 0.16);
		--request-packet-color: rgba(94, 242, 255, 0.2);
	}

	:root [data-theme=dark] {
		color-scheme: dark;
		--response-packet-color: rgba(255, 106, 213, 0.16);
		--request-packet-color: rgba(94, 242, 255, 0.2);
	}

	.request-pill {
		border-color: rgba(94, 242, 255, 0.45);
		color: #c9f8ff;
		background: rgba(94, 242, 255, 0.1);
	}

	.response-pill {
		border-color: rgba(255, 106, 213, 0.45);
		color: #ffd6f6;
		background: rgba(255, 106, 213, 0.1);
	}
</style>
