<template>
	<div class="products__page">
		<breadcrumb-base class="products__breadcrumb" />
		<div class="products__count">
			{{ filteredProductsCount }}

			{{ $t("product") }}
		</div>
		<filter-column
			:filtered-products-count="filteredProductsCount"
			:filter-columns-data="filterColumns"
			@filterProducts="filterProducts"
			:is-show-category-filter="true"
		/>
		<items-column :data-source="filteredProducts" />
	</div>
</template>
<script>
import breadcrumbBase from "@/components/shared/breadcrumb/breadcrumb_base";
import filterColumn from "@/components/pages/products/products_filter_column";
import itemsColumn from "@/components/pages/products/products_items_column";

import { getProducts } from "@/api/api_list";
import { filterProductsBaseOnAcf } from "../../helper/product_helper";
import { getFilterDataByCategorySlug } from "../../store/category_filter_data";

export default {
	name: "ProductsIndex",
	async asyncData({ $axios, i18n }) {
		const locale = i18n.locale;
		const productsCount = 100;
		let page = 1;
		let isProductsExist = true;
		let products = [];

		while (isProductsExist) {
			let tempResult = await getProducts(
				$axios,
				locale,
				productsCount,
				page
			);
			products.push(...tempResult);
			if (tempResult.length < productsCount) isProductsExist = false;
			else page++;
		}

		return {
			productsDataSource: (products || []).sort(
				(a, b) => a.order.productsPage - b.order.productsPage
			)
		};
	},
	components: {
		breadcrumbBase,
		filterColumn,
		itemsColumn
	},
	computed: {
		filterColumns() {
			return getFilterDataByCategorySlug(null);
		},
		filteredProducts() {
			let filters = this.filterList || [];
			let products = this.getFilteredProductsByCategory();

			return filterProductsBaseOnAcf(filters, products);
		},
		filteredProductsCount() {
			return this.filteredProducts.length;
		}
	},
	data() {
		return {
			filterList: [],
			categories: null
		};
	},
	head() {
		return {
			title: `${this.$t("products")} | ${this.$t("parsmega")}`,
			meta: []
		};
	},
	methods: {
		filterProducts(filterData) {
			this.filterList = filterData.properties;
			this.categories = filterData.categories;
		},
		getFilteredProductsByCategory() {
			if (this.categories == null) return this.productsDataSource;
			if (this.categories.length == 0) return this.productsDataSource;

			let products = this.productsDataSource || [];

			let filteredProducts = [];
			for (let i = 0; i < products.length; i++) {
				let productCategories = products[i].categories || [];
				let isMatchCategory = false;

				this.categories.forEach((category) => {
					let productContainsCategory =
						productCategories.filter((item) => item == category)
							.length > 0;
					if (productContainsCategory) isMatchCategory = true;
				});

				if (isMatchCategory) filteredProducts.push(products[i]);
			}

			return filteredProducts;
		}
	}
};
</script>
<style lang="scss" scoped>
.products {
	&__page {
		margin: 0 auto;
		max-width: $app-max-width;
		padding-bottom: $padding-default;
		position: relative;
		width: 100%;

		@media (min-width: $desktop) {
			padding: $padding-default;
			padding-top: 0;
			position: relative;
		}
	}

	&__count {
		display: none;

		@media (min-width: $desktop) {
			color: $color-text--light;
			display: block;
			float: left;
			font-size: 13px;
			left: 2%;
			margin-right: $padding-default;
			top: 18px;
			position: absolute;
		}
	}

	&__breadcrumb {
		@media (min-width: $desktop) {
			padding-right: 30% !important;
		}
	}
}

[data-lang="en"] {
	.products {
		&__count {
			@media (min-width: $desktop) {
				float: right;
				left: unset;
				margin-left: $padding-default;
				margin-right: 0;
				right: 2%;
			}
		}

		&__breadcrumb {
			@media (min-width: $desktop) {
				padding-left: 30% !important;
				padding-right: 0 !important;
			}
		}
	}
}
</style>