<template>
	<div class="container-list-view-port">
		<v-row v-if="loading">
			<template v-for="n in 12">
				<v-skeleton-loader
					class="mb-10 mx-2"
					type="card, text, paragraph"
					width="370"
				/>
			</template>
		</v-row>

		<v-row v-else-if="properties.entities?.length">
			<div v-for="e in properties.entities" :key="e.properties.id" class="container-properties">
				<div class="pa-2 container-image">
					<a :href="link(e)">
						<img
							v-if="e.property_images[0] || defaultImage"
							:alt="e.properties.name"
							:src="
								e.property_images[0]?.full_path_resized ||
								defaultImage
							"
							class="image"
						/>
					</a>
				</div>
				<div class="flex-grow-1 ps-3">
					<div class="title">
						{{ e.properties.name }}
					</div>
					<div class="description">
						<strong v-if="e.property_pricings">
							{{
								toMoney(
									e.property_pricings?.base_price,
									e.properties?.currency_code,
								)
							}}
							/Night
						</strong>
					</div>
				</div>

				<div v-if="e.property_sites?.length" class="pl-3">
					<div v-for="(site, index) in e.property_sites" :key="index">
						<a
							v-if="hiddenLinkEqualSite(site.domain)"
							:href="`${site.domain}/${e.properties.id}/${e.properties.slug}`"
							target="_blank"
							class="text-primary py-1 link text-capitalize"
						>
							{{ site.title }}
						</a>
					</div>
				</div>
			</div>
		</v-row>
	</div>


	<div class="text-center" v-if="properties.pagination">
		<v-container>
			<v-row justify="center">
				<v-col cols="8">
					<v-container class="max-width">
						<v-pagination
							v-model="page"
							:length="properties?.pagination?.total_pages"
							class="my-4 "
							:disabled="loading"
							:total-visible="7"
							@update:model-value="(v) => changePagination(v)"
						></v-pagination>
					</v-container>
				</v-col>
			</v-row>
		</v-container>
	</div>
</template>

<script setup>
const {defineProps, onMounted, ref} = Vue;
const properties = ref({})
const loading = ref(true)
const page = ref(1)
const defaultImage = `${SAS_URL}/src/assets/default.jpg`;

const props = defineProps({
	viewPort: {
		type: Array, default: () => [
			-0.8788717828324148,
			184.21875000000003,
			-40.84706035607122,
			84.02343750000001
		]
	},
});

const changePagination = async (v) => {
	page.value = v

	const container = document.querySelector(".container-list-view-port");
	if (container) {
		container.scrollIntoView({behavior: "smooth"});
	}

	await load()
}

const load = async () => {
	try {
		loading.value = true
		const params = {
			'search[ne_lat]': props.viewPort[0].replace(/[.,]+$/, ''),
			'search[ne_lng]': props.viewPort[1].replace(/[.,]+$/, ''),
			'search[sw_lat]': props.viewPort[2].replace(/[.,]+$/, ''),
			'search[sw_lng]': props.viewPort[3].replace(/[.,]+$/, ''),
			per_page: 12,
			page: page.value
		};
		const {data} = await axios.get("/properties/wordpress/search/posts", {params});
		properties.value = data.data
	} catch (e) {
		console.error(e)
	} finally {
		loading.value = false
	}
}

const link = (link) => {
	const path = `${link.properties.id}/${link.properties.slug}`
	return `${window.env?.sas_route_vendor_property_main_featured}/${path}`;
}

const toMoney = (value) => {
	return window.money(value, value.properties?.currency_code);
};

const hiddenLinkEqualSite = (domain) => !domain.includes(window.location.origin)

onMounted(async () => await load())
</script>
<style scoped>
.container-list-view-port {
	max-width: 1600px;
	margin: 0 auto;
}

.container-properties {
	width: 380px;
	display: flex;
	flex-direction: column;
	margin-bottom: 2rem;
	cursor: pointer;
}

.container-image {
	height: 250px;
}

.image {
	height: 250px;
	object-fit: cover;
	width: 100%;
}

.image:hover {
	transform: scale(1.1) !important;
	transition: transform 0.4s linear !important;
}

@media screen and (max-width: 570px) {
	.container-properties {
		width: 100%;
	}
}

.title {
	font-size: 20px;
	margin-top: 1rem;
	color: #000;
	font-weight: 600;
	text-align: left;
	font-family: Verdana;
}

.description {
	font-size: 14px;
	line-height: 30px;
	color: #999;
	text-align: left;
	font-weight: 400;
	font-family: Poppins;
}

strong {
	color: #333;
}

.link:hover {
	text-decoration: underline;
}
</style>
