<template>
	<div class="page">
		<ul
			ref="categories"
			class="categories nolist nobar"
		>
			<li>
				<div
					class="search noselect"
					@click="focusSearch"
				>
					<Icon
						icon="search"
					/>
				</div>
			</li>

			<li
				v-for="(tags, category) in showcase"
				:key="`category-${category}`"
			>
				<a
					:href="`#${category}`"
					class="category nolink"
					:class="{ active: activeCategory === category }"
				>{{ categoryTitles[category] || category }}</a>
			</li>
		</ul>

		<div
			ref="content"
			class="content"
		>
			<form
				class="search-container"
				@submit.prevent="search"
			>
				<input
					ref="searchInput"
					v-model="query"
					type="search"
					placeholder="Search tags"
					class="search input"
					@search="search"
				>

				<Icon
					icon="search"
					@click="search"
				/>
			</form>

			<div
				v-for="(tags, category) in showcase"
				:key="`tags-${category}`"
			>
				<h3
					:id="category"
					class="category-heading"
				>{{ categoryTitles[category] || category }}</h3>

				<ul
					class="tags nolist"
					:data-category="category"
				>
					<li
						v-for="tag in tags"
						:key="`tag-${tag.slug}`"
						class="tag"
					>
						<div class="thumb-container">
							<a
								:href="`/tag/${tag.slug}`"
								class="thumb-link nolink"
							>
								<img
									v-if="tag.poster"
									:src="`/${tag.poster.thumbnail}`"
									:style="{ 'background-image': `url(/${tag.poster.lazy})` }"
									:title="tag.poster.comment"
									class="thumb"
									loading="lazy"
								>

								<img
									v-else
									src="/img/icons/price-tag2.svg"
									class="nophoto"
								>
							</a>

							<a
								v-if="tag.poster?.entity"
								:href="`/${tag.poster.entity.type}/${tag.poster.entity.slug}`"
								class="favicon-link"
							>
								<img
									:src="!tag.poster.entity.parent || tag.poster.entity.isIndependent ? `/logos/${tag.poster.entity.slug}/favicon.png` : `/logos/${tag.poster.entity.parent.slug}/favicon.png`"
									:alt="tag.poster.entity.name"
									:title="tag.poster.entity.name"
									class="favicon"
								>
							</a>
						</div>

						<a
							:href="`/tag/${tag.slug}`"
							class="name nolink"
						>{{ tag.name }}</a>
					</li>
				</ul>
			</div>
		</div>
	</div>
</template>

<script setup>
import { ref, onMounted, inject } from 'vue';

import navigate from '#/src/navigate.js';
import events from '#/src/events.js';

const pageContext = inject('pageContext');
const showcase = pageContext.pageProps.tagShowcase;

const categories = ref(null);
const content = ref(null);
const searchInput = ref(null);
const query = ref(pageContext.urlParsed.search.q);

const categoryTitles = {
	lgbt: 'LGBT',
};

const activeCategory = ref(null);

function calculateActiveCategory() {
	const newCategory = Array.from(document.querySelectorAll('.tags')).reduce((closest, element) => {
		const { top } = element.getBoundingClientRect();

		if (!closest || Math.abs(top - 200) < Math.abs(closest.top)) { // slight offset to include bottom category
			return { category: element.dataset.category, top };
		}

		return closest;
	}, null).category;

	if (newCategory === activeCategory.value) {
		return;
	}

	activeCategory.value = newCategory;

	const activeLink = document.querySelector(`a[href="#${activeCategory.value}"]`);

	activeLink.scrollIntoView({
		inline: 'center',
	});

	navigate(`#${activeCategory.value}`, null, { replace: true });
}

async function search() {
	navigate('/tags', { q: query.value || undefined }, { redirect: true });
}

function focusSearch() {
	events.emit('scrollUp'); // scrollIntoView on search input does not reveal it fully
	searchInput.value?.focus();
}

onMounted(() => {
	categories.value.addEventListener('wheel', (event) => {
		categories.value.scrollLeft += event.deltaY;
	});

	document.querySelector('#content').addEventListener('scroll', () => calculateActiveCategory());

	window.addEventListener('popstate', () => {
		if (window.location.hash) {
			const categoryTitle = document.querySelector(window.location.hash);

			activeCategory.value = window.location.hash.slice(1);
			categoryTitle?.scrollIntoView();
		}
	});

	// div doesn't scroll automatically on page load, reset hash to scroll
	if (window.location.hash) {
		const hash = window.location.hash;

		window.location.hash = undefined;
		window.location.hash = hash;

		calculateActiveCategory();
	}
});
</script>

<style scoped>
.page {
	display: flex;
	flex-direction: column;
	flex-grow:1 ;
}

.content {
	flex-grow: 1;
}

.categories {
	display: flex;
	gap: .25rem;
	flex-shrink: 0;
	padding: .5rem 1rem .5rem 0;
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--grey-dark-40);
	overflow-x: auto;

	.search {
		height: 100%;
		display: flex;
		align-items: center;

		.icon {
			fill: var(--highlight-strong-20);
			padding: 0 .5rem 0 1rem;
		}

		&:hover .icon {
			fill: var(--text-light);
		}
	}
}

.category {
	padding: .25rem .5rem;
	border-radius: .25rem;
	background: var(--grey-dark-30);
	color: var(--highlight-strong-30);
	font-weight: bold;
	font-size: .9rem;

	&:hover,
	&.active {
		color: var(--text-light);
		background: var(--primary);
	}
}

.search-container {
	display: flex;
	align-items: stretch;
	padding: 1rem 1rem 0 1rem;

	.icon {
		padding: 0 1rem;
		height: auto;
		fill: var(--glass);

		&:hover {
			cursor: pointer;
			fill: var(--primary);
		}
	}
}

.search {
	font-size: 1.1rem;
}

.tags {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
    gap: 1rem .5rem;
	padding: .75rem 1rem;
}

.category-heading {
	padding: 1rem 1rem 0 1.5rem;
	margin: 0;
	text-transform: capitalize;
	color: var(--glass);
}

.tag {
	height: 100%;
	display: flex;
	flex-direction: column;

	&:hover {
		.name {
			color: var(--primary);
		}

		.thumb {
			box-shadow: 0 0 3px var(--shadow-weak-10);
		}
	}
}

.name {
	padding: .4rem .5rem 0 .5rem;
	text-transform: capitalize;
	font-size: .9rem;
	font-weight: bold;
	color: var(--glass-strong-10);
}

.thumb-container {
	position: relative;
	aspect-ratio: 5/3;
	background: var(--background-base-20);
    box-shadow: 0 0 3px var(--shadow-weak-20);
}

.thumb-link {
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.thumb {
	display: inline-block;
    width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: .25rem;
	background-size: cover;
	background-position: center;
}

.nophoto {
	width: 10%;
	opacity: .1;
}

.favicon-link {
	position: absolute;
	bottom: 0;
	right: 0;
	font-size: 0;

	&:hover .favicon {
		filter: drop-shadow(0 0 2px var(--shadow-weak-20))
	}
}

.favicon {
	width: 1rem;
	height: 1rem;
	padding: .5rem;
	object-fit: contain;
}

@media(--compact) {
	.tags {
		grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
	}
}

@media(--small-30) {
	.tags {
		grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
	}
}
</style>
