<template>
	<div class="page">
		<div class="profile">
			<div class="profile-header">
				<div class="user">
					<img
						v-if="profile.avatar"
						:src="profile.avatar"
						class="avatar"
					>

					<h2 class="username ellipsis">{{ profile.username }}</h2>
				</div>

				<span class="age"><Icon icon="cake" />{{ formatDistanceStrict(Date.now(), profile.createdAt) }}</span>
			</div>

			<section class="profile-section">
				<div class="section-header">
					<h3 class="heading">Stashes</h3>

					<button
						class="button"
						@click="showStashDialog = true"
					>
						<Icon icon="plus3" />
						<span class="button-label">New stash</span>
					</button>
				</div>

				<Dialog
					v-if="showStashDialog"
					title="New stash"
					@close="showStashDialog = false"
					@open="stashNameInput?.focus()"
				>
					<form
						class="dialog-body"
						@submit.prevent="createStash"
					>
						<input
							ref="stashNameInput"
							v-model="stashName"
							class="input"
							placeholder="Stash name"
						>

						<button
							class="button button-submit"
						>Create stash</button>
					</form>
				</Dialog>

				<ul class="stashes nolist">
					<li
						v-for="stash in profile.stashes"
						:key="`stash-${stash.id}`"
					>
						<div class="stash">
							<div class="stash-header">
								<a
									:href="`/stash/${profile.username}/${stash.slug}`"
									class="stash-name ellipsis nolink"
								>
									<span class="ellipsis">{{ stash.name }}</span>

									<Icon
										v-if="stash.primary"
										icon="heart7"
										class="primary"
									/>
								</a>

								<Icon
									v-if="profile.id === user?.id && stash.public"
									icon="eye"
									class="public noselect"
									@click="setStashPublic(stash, false)"
								/>

								<Icon
									v-else-if="profile.id === user?.id"
									icon="eye-blocked"
									class="public noselect"
									@click="setStashPublic(stash, true)"
								/>
							</div>

							<div class="stash-counts">
								<a
									:href="`/stash/${profile.username}/${stash.slug}/scenes`"
									class="stash-count nolink"
								><Icon icon="clapboard-play" />{{ abbreviateNumber(stash.stashedScenes) }}</a>

								<a
									:href="`/stash/${profile.username}/${stash.slug}/actors`"
									class="stash-count nolink"
								><Icon icon="star" />{{ abbreviateNumber(stash.stashedActors) }}</a>

								<a
									:href="`/stash/${profile.username}/${stash.slug}/movies`"
									class="stash-count nolink"
								><Icon icon="movie" />{{ abbreviateNumber(stash.stashedMovies) }}</a>
							</div>
						</div>
					</li>
				</ul>
			</section>
		</div>
	</div>
</template>

<script setup>
import { ref, inject } from 'vue';
import { formatDistanceStrict } from 'date-fns';

import { get, post, patch } from '#/src/api.js';
import events from '#/src/events.js';

import Dialog from '#/components/dialog/dialog.vue';

const pageContext = inject('pageContext');
const profile = ref(pageContext.pageProps.profile);
const user = pageContext.user;

const stashName = ref(null);
const stashNameInput = ref(null);

const done = ref(true);
const showStashDialog = ref(false);

function abbreviateNumber(number) {
	return number?.toLocaleString('en-US', { notation: 'compact' }) || 0;
}

async function createStash() {
	if (done.value === false) {
		return;
	}

	done.value = false;

	try {
		await post('/stashes', {
			name: stashName.value,
			public: false,
		});

		profile.value = await get(`/users/${profile.value.id}`);
		showStashDialog.value = false;

		events.emit('feedback', {
			type: 'success',
			message: `Created stash '${stashName.value}'`,
		});
	} catch (error) {
		events.emit('feedback', {
			type: 'error',
			message: `Failed to create stash '${stashName.value}': ${error.message}`,
		});
	}

	done.value = true;
}

async function setStashPublic(stash, isPublic) {
	if (done.value === false) {
		return;
	}

	try {
		done.value = false;

		await patch(`/stashes/${stash.id}`, { public: isPublic });
		profile.value = await get(`/users/${profile.value.id}`);

		events.emit('feedback', {
			type: isPublic ? 'success' : 'remove',
			message: isPublic
				? `Stash '${stash.name}' set to public`
				: `Stash '${stash.name}' set to private`,
		});
	} catch (error) {
		console.error(error);

		events.emit('feedback', {
			type: 'error',
			message: 'Failed to update stash',
		});
	}

	done.value = true;
}
</script>

<style scoped>
.page {
	display: flex;
	flex-grow: 1;
	justify-content: center;
	background: var(--background-base-10);
}

.profile {
	width: 1200px;
	max-width: 100%;
}

.profile-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: .5rem 1rem;
    color: var(--highlight-strong-30);
    background: var(--grey-dark-40);
	border-radius: 0 0 .5rem .5rem;
}

.user {
	display: flex;
	overflow: hidden;
}

.username {
	margin: 0;
	font-size: 1.25rem;
}

.age {
	display: flex;
	flex-shrink: 0;

	.icon {
		fill: var(--highlight-strong-20);
		margin-right: .75rem;
		transform: translateY(-1px);
	}
}

.avatar {
	width: 1.5rem;
	height: 1.5rem;
	border-radius: .25rem;
	margin-right: 1rem;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: .5rem .5rem .5rem .5rem;

	.button {
		margin-left: 1rem;
	}
}

.heading {
	margin: 0;
	font-size: 1.1rem;
	color: var(--primary);
}

.stashes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
	gap: 1rem;
	padding: 0 .5rem 1rem .5rem;
}

.stash {
	width: 100%;
	border-radius: .25rem;
	background: var(--background);
	box-shadow: 0 0 3px var(--shadow-weak-30);

	&:hover {
		box-shadow: 0 0 3px var(--shadow-weak-20);
	}
}

.stash-header {
	display: flex;
	align-items: stretch;
	border-bottom: solid 1px var(--shadow-weak-30);
	font-weight: bold;
}

.icon.public {
	display: flex;
	height: auto;
	padding: 0 .75rem;
	fill: var(--shadow);

	&:hover {
		cursor: pointer;
		fill: var(--shadow-strong-30);
	}
}

.stash-name {
	display: flex;
	flex-grow: 1;
	padding: .5rem;
	overflow: hidden;

	.icon {
		margin-left: .75rem;
	}

	.icon.primary {
		fill: var(--primary);
		transform: translateY(1px);
	}
}

.stash-counts {
	display: flex;
	justify-content: space-between;
}

.stash-count {
	display: inline-flex;
	align-items: center;
	padding: .5rem;
	flex-grow: 1;
	font-size: .9rem;

	.icon {
		margin-right: .5rem;
		fill: var(--shadow);
	}

	&:hover {
		color: var(--primary);

		.icon {
			fill: var(--primary);
		}
	}
}

.dialog-body {
	padding: 1rem;

	.input {
		margin-bottom: .5rem;
	}
}

@media(--compact) {
	.profile-header {
		border-radius: 0;
	}

	.section-header {
		padding: .5rem 1rem .5rem 1rem;
	}

	.stashes {
		padding: 0 1rem 1rem 1rem;
	}
}

@media(--small-30) {
	.section-header {
		padding: .5rem .5rem .5rem .5rem;
	}

	.stashes {
		padding: 0 .5rem 1rem .5rem;
	}

	.age .icon {
		display: none;
	}
}

@media(--small-50) {
	.age {
		display: none;
	}
}
</style>
