<template>
	<div class="photos">
		<a
			v-if="tag.poster"
			:href="`/img/${poster.path}`"
			:title="poster.comment"
			target="_blank"
			rel="noopener noreferrer"
			class="photo-link"
		>
			<img
				:src="`/img/${poster.thumbnail}`"
				:style="{ 'background-image': `url(/img/${poster.lazy})` }"
				:alt="tag.poster.comment"
				class="poster"
				loading="lazy"
				@load="$emit('load', $event)"
			>

			<span
				v-if="poster.comment"
				class="photo-comment"
			>{{ poster.comment }}</span>
		</a>

		<a
			v-for="photo in photos"
			:key="`photo-${photo.id}`"
			:title="photo.comment"
			:href="`/img/${photo.path}`"
			target="_blank"
			rel="noopener noreferrer"
			class="photo-link"
		>
			<img
				:src="`/img/${photo.thumbnail}`"
				:style="{ 'background-image': `url(/img/${photo.thumbnail})` }"
				:alt="photo.comment"
				class="photo"
				@load="$emit('load', $event)"
			>

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

<script>
function poster() {
	if (this.$store.state.ui.sfw) {
		return this.tag.poster.sfw;
	}

	return this.tag.poster;
}

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

	return this.tag.photos;
}

export default {
	props: {
		tag: {
			type: Object,
			default: null,
		},
	},
	emits: ['load'],
	computed: {
		poster,
		photos,
	},
};
</script>

<style lang="scss" scoped>
.photos {
	width: 100%;
	padding: .5rem 1rem;
	box-sizing: border-box;
	white-space: nowrap;
    font-size: 0;
	border-bottom: solid 1px var(--shadow-hint);

    &::-webkit-scrollbar {
        display: none;
    }

	&.expanded {
		display: flex;
		justify-content: center;
		flex-wrap: wrap;
		padding: 0 0 0 1rem;

		.photo-link {
			margin: 0 .5rem .5rem 0;
		}

		.poster,
		.photo {
			max-height: 18rem;
		}
	}
}

.photo-link {
	display: inline-block;
	position: relative;
	overflow: hidden;
	margin: 0 .5rem 0 0;

	&:last-child {
		margin: 0 1rem 0 0;
	}

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

.poster,
.photo {
	max-height: 15rem;
	max-width: 100%;
	box-shadow: 0 0 3px var(--shadow-weak);
	object-fit: cover;
	background-position: center;
	background-size: cover;
}

.photo-comment {
	width: 100%;
	position: absolute;
	bottom: 0;
	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);
	white-space: normal;
	line-height: 1.25;
	transform: translateY(100%);
	transition: transform .25s ease;
}
</style>
