<template>
	<div class="actor">
		<div class="actor-header">
			<h2 class="header-name">
				<span v-if="actor.entity">{{ actor.name }} ({{ actor.entity.name }})</span>
				<span v-else>{{ actor.name }}</span>

				<Gender
					:gender="actor.gender"
					class="header-gender"
				/>
			</h2>

			<li
				v-if="actor.aliases?.length"
				class="bio-item"
			>
				<dfn class="bio-label">Also known as</dfn>
				<span class="bio-value">
					<span
						v-for="alias in actor.aliases"
						:key="`alias-${alias.id}`"
						class="alias"
					>{{ alias.name }}</span>
				</span>
			</li>

			<Icon
				v-show="favorited"
				icon="heart7"
				class="heart favorited"
				@click.native.stop="unstash"
			/>

			<Icon
				v-show="!favorited && user"
				icon="heart8"
				class="heart"
				@click.native.stop="stash"
			/>
		</div>

		<div class="content">
			<Bio :actor="actor" />

			<Scenes />
		</div>
	</div>
</template>

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

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

import Bio from '#/components/actors/bio.vue';
import Gender from '#/components/actors/gender.vue';
import Scenes from '#/components/scenes/scenes.vue';

const pageContext = inject('pageContext');
const { pageProps, user } = pageContext;
const { actor } = pageProps;

const favorited = ref(actor.stashes?.some((sceneStash) => sceneStash.primary) || false);

async function stash() {
	try {
		favorited.value = true;

		await post(`/stashes/${user.primaryStash.id}/actors`, { actorId: actor.id });

		events.emit('feedback', {
			type: 'success',
			message: `${actor.name} stashed to ${user.primaryStash.name}`,
		});
	} catch (error) {
		favorited.value = false;

		events.emit('feedback', {
			type: 'error',
			message: `Failed to stash ${actor.name} to ${user.primaryStash.name}`,
		});
	}
}

async function unstash() {
	try {
		favorited.value = false;
		await del(`/stashes/${user.primaryStash.id}/actors/${actor.id}`);

		events.emit('feedback', {
			type: 'remove',
			message: `${actor.name} unstashed from ${user.primaryStash.name}`,
		});
	} catch (error) {
		favorited.value = true;

		console.error(error);

		events.emit('feedback', {
			type: 'error',
			message: `Failed to unstash ${actor.name} from ${user.primaryStash.name}`,
		});
	}
}
</script>

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

.actor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
	position: relative;
    color: var(--highlight-strong-30);
    background: var(--grey-dark-40);
}

.header-name {
    padding: .5rem 1rem;
    margin: 0;
    display: inline-flex;
    justify-content: space-between;
    flex-shrink: 0;
}

.header-gender {
    display: inline-block;
    margin: 0 0 0 .5rem;
    transform: translate(0, .125rem);
}

.header-social {
    overflow: hidden;
    white-space: nowrap;
    margin: 0 1rem 0 0;
}

.content {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	overflow-y: auto;
}

.icon.heart {
	width: 2rem;
	height: 1.5rem;
	position: absolute;
	top: 0;
	right: 0;
	padding: .5rem 1rem 1rem 1rem;
	fill: var(--highlight-strong-10);
	filter: drop-shadow(0 0 3px var(--shadow));

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

	&.favorited {
		fill: var(--primary);
	}
}
</style>
