<template>
	<div v-if="property.loading" class="container-list">
		<v-row>
			<template v-for="n in 6">
				<v-skeleton-loader
					class="mb-10 mx-2"
					type="card, text, button"
					width="370"
				/>
			</template>
		</v-row>
	</div>

	<div v-else class="container-list px-02rem">
		<v-row class="justify-content-between">
      <v-col
        v-for="p in property.entities" class="container-properties"
        :key="p.id"
        cols="12"
        :sm="12"
        :md="6"
        :lg="4"
        :xxl="4"
      >
        <property-item :property="p"/>
      </v-col>
		</v-row>
	</div>
	<div class="text-center">
		<v-container>
			<v-row justify="center">
				<v-col cols="8">
					<v-container class="max-width">
						<v-pagination
							v-model="property.params.page"
							:length="property?.pagination?.total_pages"
							class="my-4"
							:disabled="property.loading"
						></v-pagination>
					</v-container>
				</v-col>
			</v-row>
		</v-container>
	</div>
</template>

<script setup>
const {computed, inject, onMounted, onUnmounted, ref, watch} = Vue;

const PropertyItem = Vue.defineAsyncComponent(() =>
	loadModule(`${SAS_URL}/src/components/property/Item.vue`, options),
);

const props = defineProps({
	property: {type: Object, default: () => ({})},
});

const propertyUrl = (path = "") => {
	path = path.replace(/^[\\/]+|[\\/]+$/g, "");
	return `${window.env?.sas_route_vendor_property_main_featured}/${path}`;
};
const screenWidth = ref(window.innerWidth);
const store = usePropertiesStore();

onMounted(() => {
	property.value.submit();
	window.addEventListener("resize", handleResize);
});

onUnmounted(() => {
	window.removeEventListener("resize", handleResize);
});

const toMoney = (value, currency) => {
	return window.money(value, currency);
};

const handleResize = () => {
	screenWidth.value = window.innerWidth;
};

const defaultImage = `${SAS_URL}/src/assets/default.jpg`;
const selection = ref({
	data: {},
	select(item) {
		this.data = {};
		setTimeout(() => {
			this.data = item;

			if (screenWidth.value < 960) {
				window.location.href = property.value.link(item);
			}
		}, 500);
	},
	imageUrl() {
		if (this.data) {
			return this.data.property_images[0]
				? this.data.property_images[0].full_path_resized
				: defaultImage;
		}

		return "";
	},
});

let paginationSeed = null;

const property = ref({
	loading: false,
	error: false,
	seed: null,
	params: {
		per_page: 9,
		page: 1,
		order: {
			field: "random",
			seed: null,
		},
	},
	entities: [],
	list_nearby: [],
	pagination: {
		count: 0,
		current_page: 1,
	},
	async submit() {
		this.error = false;
		this.loading = true;
		try {
			store.setLoading(true);

			const {params} = this;

			const {data} = await axios.get(
				"/properties",
				{params},
				{
					baseUrl: `${window.env.sas_api_url}/api/`,
				},
			);
			this.entities = data.data.entities;
			this.list_nearby = data.data.list_nearby;
			this.pagination = data.data.pagination;
			this.seed = data.data.seed;

			// const bannerImages = []
			// this.entities.forEach(property => {
			//   if (property.property_images?.length > 0 && bannerImages.length < 5) {
			//     bannerImages.push(property.property_images[0])
			//   }
			// })
			//
			// store.setBannerImages(bannerImages)

			if (Object.values(selection.value.data).length === 0) {
				selection.value.data = data.data.entities[0];
			}
		} catch (err) {
			this.error = err.response.data;
		} finally {
			this.loading = false;
			store.setLoading(false);
		}
	},
	link(entity) {
		return propertyUrl(
			[entity.properties.id, entity.properties.slug].join("/"),
		);
	},
	async changePage(entity) {
		this.loading = true;
		try {
			const {params} = this;
			params.order["field"] = "random";
			params.order["value"] = this.seed;

			const {data} = await axios.get("/properties", {params});

			this.entities = data.data.entities;
			this.list_nearby = data.data.list_nearby;
			this.pagination = data.data.pagination;
		} catch (e) {
			console.error(e);
			this.error = e.response.data;
		}
		this.loading = false;
	},
});

const scroll = (direction) => {
	const items = document.querySelectorAll(".v-list .v-list-item");
	const itemWidth = items[0].offsetWidth + 10;
	const offset = direction === "prev" ? -itemWidth : itemWidth;

	items.forEach((item) => {
		item.style.transform = `translateX(${
			parseInt(item.style.transform || "0") + offset
		}px)`;
	});
};

watch(
	() => property.value.params.page,
	(page) => {
		property.value.changePage(page);
	},
);
</script>

<style scoped>
.container-list {
	max-width: 1600px;
	margin: 0 auto;
}

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

.container-list .container-properties .container-image {
	height: 250px;
}

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

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

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

.px-02rem {
  padding: 0 0.2rem;
}

.saswp-theme-home-discover__title_small {
	font-size: 14px;
	letter-spacing: 7px;
	line-height: 48px;
	text-transform: uppercase;
	color: #999;
	font-weight: 500;
	text-align: center;
	font-family: Poppins;
}

.saswp-theme-home-discover__title {
	font-size: 3rem;
	line-height: 48px;
	text-align: center;
	color: #000;
	font-weight: 500;
	font-family: Verdana;
}

.saswp-theme-home-discover__item-title {
	font-size: 18px;
  margin-top: 1rem;
  color: #000;
  font-weight: 500;
  font-family: 'Poppins';
}

.saswp-theme-home-discover__item-description {
	font-size: 14px;
	line-height: 30px;
	color: #999;
	font-weight: lighter;
	font-family: Poppins;
}

strong {
	color: #333;
}

.btn {
	background-color: #000000 !important;
	border-radius: 1px 1px 1px 1px !important;
	padding: 0 30px !important;
	color: #fff !important;
	margin-top: 0.5rem !important;
}

@media screen and (max-width: 959px) {
	.none {
		display: none;
	}
}
</style>
