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

import Campaign from '#/components/campaigns/campaign.vue';
import Logo from '#/components/tags/logo.vue';

import getPath from '#/src/get-path.js';

const props = defineProps({
	tag: {
		type: Object,
		default: null,
	},
});

const emit = defineEmits(['load', 'campaign']);

const { campaigns } = inject('pageContext');

const photos = computed(() => {
	/* sfw not currently implemented
	if (props.tag.poster && this.$store.state.ui.sfw) {
		return [props.tag.poster].concat(props.tag.photos).map((photo) => photo.sfw);
	}

	if (this.$store.state.ui.sfw) {
		return props.tag.photos.map((photo) => photo.sfw);
	}
	*/

	if (props.tag.poster) {
		return [props.tag.poster].concat(props.tag.photos);
	}

	return props.tag.photos;
});
</script>

<template>
	<div class="photos nobar">
		<Campaign
			v-if="campaigns?.photos"
			:campaign="campaigns.photos"
		/>

		<div
			v-for="photo in photos"
			:key="`photo-${photo.id}`"
			:title="photo.comment"
			target="_blank"
			rel="noopener noreferrer"
			class="photo-container"
		>
			<img
				:src="getPath(photo, 'thumbnail', { local: true })"
				:style="{ 'background-image': `url(${getPath(photo, 'lazy', { local: true })})` }"
				:alt="photo.comment"
				:width="photo.width"
				:height="photo.height"
				class="photo"
				loading="lazy"
				@load="emit('load', $event)"
			>

			<Logo :photo="photo" />

			<a
				v-if="photo.comment && photo.entity"
				:href="`/${photo.entity.type}/${photo.entity.slug}`"
				class="photo-comment"
			>{{ photo.comment }} for {{ photo.entity.name }}</a>

			<span
				v-else-if="photo.comment"
				class="photo-comment"
			>{{ photo.comment }}</span>
		</div>
	</div>
</template>

<style scoped>
.photos {
	display: flex;
	flex-shrink: 0;
	gap: 0.5rem;
	padding: .5rem;
	border-bottom: solid 1px var(--shadow-weak-40);
	background: var(--background-base-10);
	overflow-x: auto;
}

.photo-container {
	position: relative;
	flex-shrink: 0;
	font-size: 0;
	overflow: hidden;

	&:hover {
		.photo-comment {
			transform: translateY(0);
		}

		::v-deep(.album-logo) {
			opacity: 0;
		}
	}
}

.photo,
.campaign {
	height: 14rem;
	width: auto;
	flex-shrink: 0;
}

.photo {
	object-fit: cover;
	object-position: 50% 0;
	border-radius: .25rem;
	background-size: cover;
	background-position: center;
	box-shadow: 0 0px 3px var(--shadow-weak-30);
}

.photo-comment {
	width: 100%;
	position: absolute;
	bottom: -1px;
	left: 0;
	box-sizing: border-box;
	padding: .5rem;
	color: var(--text-light);
	background: var(--shadow);
	font-size: .9rem;
	text-shadow: 0 0 3px var(--shadow);
	text-decoration: none;
	white-space: normal;
	line-height: 1.25;
	transform: translateY(100%);
	transition: transform .25s ease;
	border-radius: 0 0 .25rem .25rem;
}

@media(--small) {
	.photo,
	.campaign {
		height: 11rem;
	}
}
</style>
