<template>
	<div v-if="isDesktop">
		<div v-if="bannerImages.length > 0" class="image-grid">
			<div class="primary-image">
				<img
					:alt="`Image ${bannerImages[0].id}`"
					:src="bannerImages[0].full_path_medium"
					class="image"
					height="500px"
				/>
			</div>
			<div
				:class="
					bannerImages.length > 3
						? 'secondary-images-max'
						: 'secondary-images-min'
				"
				class="secondary-images"
			>
				<div
					v-for="image in bannerImages.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
			height="500px"
			hide-delimiters
			v-model="slide"
			v-if="bannerImages.length > 0"
		>
			<template v-for="img in bannerImages ?? []">
				<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 { computed, ref, onMounted } = Vue;

const slide = ref(0);
const bannerImages = ref([]);

onMounted(() => {
	window.env.properties.forEach((property) => {
		if (
			property.property_images?.length > 0 &&
			bannerImages.value.length < 5
		) {
			bannerImages.value.push(property.property_images[0]);
		}
	});
});

const isDesktop = computed(() => {
	return window.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>
