<template>
	<section class="similar__section"
			 v-if="showSection">
		<h2 v-show="filteredProducts.length > 0"
			class="similar__section__title">
			{{ $t("relaitedProducts") }}
		</h2>
		<div class="similar__section__items">
			<product-card v-for="product in filteredProducts"
						  :key="product.id"
						  :data-source="product" />
		</div>
	</section>
</template>
<script>
import productCard from "@/components/product/product_card";
import { getSimilarProducts } from "@/api/api_list";

export default {
	name: "SimilarProductsSection",
	async beforeMount() {
		await this.getProducts();
	},
	components: {
		productCard,
	},
	computed: {
		filteredProducts() {
			return this.productList.filter(
				(product) => product.id != this.productIdToExclude
			);
		},
		showSection() {
			return this.categoryId && this.categoryId > 0;
		},
	},
	data() {
		return {
			productList: [],
		};
	},
	methods: {
		async getProducts() {
			try {
				if (!this.showSection) return;
				this.productList = await getSimilarProducts(
					this.$axios,
					this.$i18n.locale,
					4,
					this.categoryId
				);
			} catch (error) {
				this.productList = [];
			}
		},
	},
	props: {
		categoryId: {
			required: true,
		},
		productIdToExclude: {
			default: 0,
			required: false,
		},
	},
};
</script>
<style lang="scss" scoped>
.similar__section {
	content-visibility: auto;
	margin-bottom: $padding-default;

	&__title {
		color: $color-text;
		display: block;
		font-size: 14px;
		margin: $padding-default auto $padding-default*0.5 auto;
	}

	@media (min-width: $tablet) {
		margin: 0 $padding-default;



		&__title {
			margin-bottom: 0;
		}
	}

	@media (min-width: $desktop) {
		&__items {
			margin: 0 (-1 * $padding-default * 0.5);
			white-space: nowrap;
			overflow: hidden;
		}
	}
}
</style>