<script>
	import { goto } from '$app/navigation';
	import { currentStream, favoritedStreams } from '$lib/stores.js';
	import { hashColor, shorthandCode, formatSecondsToHms, formatDate } from '$lib/utils.js';
	import TagSelect from './TagSelect.svelte';

	export let streams;
	let filteredTags = [];
	let listOpen;
	let favoritesOnly = false;

	$: displayedStreams = streamsToDisplay(filteredTags);
	$: remainingTags = getRemainingTags(displayedStreams);

	function streamsToDisplay(filteredTags) {
		const displayedStreams = streams.filter(
			(stream) =>
				!('tags' in stream) || filteredTags.every((tag) => stream['tags'].includes(tag))
		);

		// close tagselect dropdown if we can't select anything else
		if (displayedStreams.length == 1) {
			listOpen = !listOpen;
		}

		return displayedStreams;
	}

	function getRemainingTags(displayedStreams) {
		let tagCounts = displayedStreams.reduce((tags, stream) => {
			stream['tags'].forEach((tag) => (tag in tags ? (tags[tag] += 1) : (tags[tag] = 1)));
			return tags;
		}, {});
		return Object.entries(tagCounts)
			.filter((el) => el[1] != displayedStreams.length)
			.map((el) => el[0]);
	}

	function getDisplayedTagsInList(streamTags, remainingTags) {
		return streamTags.filter((tag) => remainingTags.includes(tag));
	}

	function updateFavorites(stream) {
		$favoritedStreams.has(stream['id'])
			? $favoritedStreams.delete(stream['id'])
			: $favoritedStreams.add(stream['id']);
		$favoritedStreams = $favoritedStreams; // for reactivity
	}
</script>

<div class="tag-select">
	<TagSelect bind:listOpen bind:checked={filteredTags} {remainingTags} />
	<button
		on:click={() => (favoritesOnly = !favoritesOnly)}
		class="material-icons {favoritesOnly ? '' : 'un'}select-faves-star">star</button
	>
</div>

<ul class="stream-list">
	{#each streams as stream}
		{@const favorited = $favoritedStreams.has(stream['id'])}
		{@const current = $currentStream['id'] === stream['id']}
		<li
			hidden={!displayedStreams.includes(stream) || (favoritesOnly && !favorited)}
			class="stream-item {current ? 'current-stream' : ''}"
			id="stream-{stream['id']}"
		>
			<button class="stream-item-button" on:click={() => goto('/streams/' + stream['id'])}>
				<span class="stream-item-id">
					ID:
					{shorthandCode(stream['id'])}</span
				>

				<span class="stream-item-date">{formatDate(stream['stream_date'])}</span>

				<span class="stream-item-length"
					>{formatSecondsToHms(stream['length_seconds'])}</span
				>

				<p class="stream-item-tags" hidden={!remainingTags.length}>
					Tags: <span hidden={!filteredTags.length}>[...] </span>{getDisplayedTagsInList(
						stream['tags'],
						remainingTags
					).join(', ')}
				</p>
			</button>

			<button
				on:click={(e) => {
					e.stopPropagation();
					updateFavorites(stream);
				}}
				class="material-icons stream-item-star {favorited ? 'stream-item-star-faved' : ''}"
				>{favorited ? 'star' : 'star_border'}</button
			>
		</li>
	{/each}
</ul>

<style>
	.stream-list {
		list-style-type: none;
		padding: 0;
		margin: 0;
		border: 1px solid black;
		border-top: 0;
		border-bottom: 0;
	}

	.stream-item-tags {
		margin: 0;
		font-family: Tahoma;
		font-size: smaller;
	}

	.stream-item-id {
		float: left;
		font-family: monospace;
		text-decoration: underline;
	}

	.stream-item-date {
		float: right;
		font-weight: bold;
	}

	.stream-item {
		width: 100%;
		overflow-wrap: anywhere;
		border-bottom: 1px solid black;
		position: relative;
		color: black;
	}

	.stream-item-button {
		border-radius: 0;
		min-width: 100%;
		border: none;
		padding: 5px;
	}

	.current-stream > .stream-item-button {
		background-color: #add8e6;
	}

	.current-stream > .stream-item-button:hover {
		background-color: #87c5d9;
	}

	.current-stream > .stream-item-button:active {
		background-color: #7aa8b8;
	}

	.tag-select {
		text-align: left;
		color: black;
		display: flex;
		margin-bottom: 1px;
	}

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

	.select-faves-star {
		color: rgba(255, 219, 88, 1);
		font-size: 24px;
	}

	.unselect-faves-star {
		color: #bbbbbb;
		font-size: 24px;
	}

	.stream-item-star {
		font-size: 18px;
		position: absolute;
		bottom: 0;
		right: 0;
		opacity: 0;
	}

	.stream-item-star-faved {
		opacity: 0.5;
	}
	.stream-item:hover .stream-item-star {
		opacity: 0.5;
	}

	.stream-item:hover .stream-item-star:hover {
		opacity: 1;
	}

	.material-icons::-moz-focus-inner {
		border: 0;
	}

	@media (max-width: 575px) {
		.stream-item-star {
			opacity: 0.5;
			font-size: 24px;
		}
	}
</style>
