<template>
	<v-skeleton-loader v-if="loading" type="image, image, image" />

	<div v-if="isDesktop">
		<div class="image-grid" v-if="props.property.property_images.length">
			<div class="primary-image">
				<img
					:alt="`Image ${props.property.property_images[0].id}`"
					:src="props.property.property_images[0].full_path_medium"
					class="image"
					height="500px"
				/>
			</div>
			<div
				:class="
					props.property.property_images.length > 3
						? 'secondary-images-max'
						: 'secondary-images-min'
				"
				class="secondary-images"
			>
				<div
					v-for="image in props.property.property_images.slice(1, 5)"
					:key="image.id"
					class="secondary-image-item"
				>
					<img
						:alt="`Image ${image.id}`"
						:src="image.full_path_medium"
						class="image"
					/>
				</div>
			</div>
		</div>
	</div>

	<div v-else>
		<v-carousel
			v-model="slide"
			height="500px"
			hide-delimiters
			v-if="props.property.property_images.length"
		>
			<template v-for="img in props.property.property_images ?? []">
				<v-carousel-item>
					<a
						:style="`display: block; height: 500px; background: url(${img.full_path_large}) center center no-repeat; background-size: cover;`"
						target="_blank"
					>
						&nbsp;
					</a>
				</v-carousel-item>
			</template>
		</v-carousel>
	</div>
</template>

<script setup>
const props = defineProps({ property: { type: Object, default: () => ({}) } });
const slide = Vue.ref(0);

const loading = Vue.computed(() => {
	return (
		Object.values(props.property ?? {}).length === 0 &&
		usePropertiesStore().getLoading
	);
});

const isDesktop = Vue.computed(() => {
	return screen.width >= 900;
});
</script>

<style scoped>
.image-grid {
	display: flex;
	height: 500px;
}

.primary-image {
	flex: 1;
}

.secondary-images {
	flex: 1;
	display: grid;
	grid-template-rows: repeat(2, calc(500px / 2));
}

.secondary-images-min {
	grid-template-columns: repeat(1, 1fr);
}

.secondary-images-max {
	grid-template-columns: repeat(2, 1fr);
}

.secondary-image-item {
	position: relative;
	width: 100%;
	height: 100%;

	.image {
		aspect-ratio: 16 / 9;
	}
}

.image {
	width: 100%;
	height: 100% !important;
	object-fit: contain;
}
</style>
