<script>
	import { currentStream, currentSongIndex } from '$lib/stores.js';
	import { hashColor, shorthandCode, formatTrackTime, formatDate } from '$lib/utils.js';
	import { jumpToTrack } from './Player.svelte';
	import { Carta } from 'carta-md';
	import DOMPurify from 'isomorphic-dompurify';

	const carta = new Carta({
		sanitizer: DOMPurify.sanitize
	});

	$: formattedStreamDate = formatDate($currentStream.stream_date);
</script>

<div class="stream-information">
	<h1 class="stream-date">{formattedStreamDate}</h1>
	<h3 class="stream-id">ID: {shorthandCode($currentStream.id)}</h3>
	<h5 class="stream-tags"><u>Tags</u>: {$currentStream.tags.join(', ')}</h5>
</div>

<div class="description-bubble">
	{@html carta.renderSSR($currentStream.description || 'No description available.')}
</div>

<div id="table-container">
	<table>
		<tr><th>Timestamp</th><th>Artist</th><th>Title</th></tr>
		{#each $currentStream.tracks as track, i}
			<tr class:current={i == $currentSongIndex}>
				<td class="timestamp-field"
					>{formatTrackTime(track[0])}
					<button
						on:click={() => jumpToTrack(track[0])}
						class="material-icons"
						style="padding:4px; margin:-3px">fast_forward</button
					>
				</td>
				<td class="artist-field">{track[1]}</td>
				<td class="track-field">{track[2]}</td>
			</tr>
		{/each}
	</table>
</div>

<style>
	.stream-information {
		width: 70%;
		padding: 1px;
		margin-top: 2%;
		margin-left: 3%;
		border-radius: 2px;
		position: relative;
	}

	#table-container {
		display: grid;
		grid-template-columns: auto 1fr 1fr;
		overflow-x: hidden;
		margin-left: 3%;
	}

	table {
		border-spacing: 0px;
	}

	th {
		text-align: left;
	}

	th,
	td {
		padding: 2px;
		line-height: 1.15;
	}

	.timestamp-field {
		white-space: nowrap;
	}

	.artist-field {
		padding-right: 2em;
	}

	.stream-date {
		font-size: x-large;
		font-family: 'Montserrat';
		right: 0;
		position: absolute;
		margin-right: 3%;
		text-decoration: underline;
	}

	.stream-tags {
		margin: 0;
		font-family: Times New Roman;
	}
	.stream-id {
		font-family: 'Montserrat';
	}

	.current {
		background-color: rgba(128, 128, 128, 0.8);
	}
	.description-bubble {
		position: relative;
		background-color: rgba(255, 255, 255, 0.75);
		border: 1px solid #ccc;
		color: black;
		padding: 10px;
		margin: 10px;
		margin-left: 3%;
		border-radius: 5px;
		max-width: 70%;
		width: fit-content;
		min-width: 50%;
		font-family: Verdana;
		font-size: small;
	}

	.description-bubble :global(:first-child) {
		margin-top: 0px;
	}

	.description-bubble :global(:last-child) {
		margin-bottom: 0px;
	}

	.description-bubble::after {
		content: '';
		position: absolute;
		border-style: solid;
		border-width: 10px 0 10px 10px;
		border-color: transparent transparent transparent #ccc;
		top: 8px;
		right: -10px;
		width: 0;
		height: 0;
	}

	.material-icons {
		font-size: 16px;
		margin-bottom: 0px;
		color: white;
		background-color: rgba(0, 0, 0, 0);
		cursor: pointer;
		transition: 0.3s;
		border: none;
		opacity: 0;
	}

	tr:hover .material-icons {
		opacity: 0.5;
	}

	tr:hover .material-icons:hover {
		opacity: 1;
	}

	.material-icons::-moz-focus-inner {
		border: 0;
	}
</style>
