<template>
	<div class="category__page">
		<breadcrumb-base class="category__breadcrumb" />
		<filter-column
			:filtered-products-count="filteredProductsCount"
			:filter-columns-data="filterColumns"
			@filterProducts="filterProducts"
			:is-show-category-filter="false"
		/>
		<items-column
			:data-source="filteredProducts"
			:category-image="category.image"
			:category-contents="category.content"
		/>
		<div v-if="category.seoJsonLd" v-html="category.seoJsonLd"></div>
	</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 { getCategory, getProductsByCategoryId } from "@/api/api_list";
import { getFilterDataByCategorySlug } from "../../../../store/category_filter_data";
import { filterProductsBaseOnAcf } from "../../../../helper/product_helper";

export default {
	name: "CategoryIndex",
	async asyncData({ $axios, params, i18n }) {
		const locale = i18n.locale;
		const slug = encodeURIComponent(params.slug);
		let category = await getCategory($axios, locale, slug);

		let page = 1;
		let isProductsExict = true;
		let products = [];
		const productsCount = 100;

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

		return {
			slug: slug,
			category: category,
			categoryProducts: (products || []).sort(
				(a, b) => a.order.categoryPage - b.order.categoryPage
			)
		};
	},
	components: {
		breadcrumbBase,
		filterColumn,
		itemsColumn
	},
	computed: {
		filterColumns() {
			return getFilterDataByCategorySlug(this.slug);
		},
		filteredProducts() {
			let filters = this.filterList || [];
			return filterProductsBaseOnAcf(
				filters,
				this.categoryProducts || []
			);
		},
		filteredProductsCount() {
			return this.filteredProducts.length;
		}
	},
	data() {
		return {
			filterList: []
		};
	},
	head() {
		return {
			title: `${this.category.title} | ${this.$t("parsmega")}`,
			meta: [
				{
					hid: "description",
					name: "description",
					content: this.category.seoDescription || ""
				}
			]
		};
	},
	methods: {
		filterProducts(filterList) {
			this.filterList = filterList.properties;
		}
	}
};
</script>
<style lang="scss" scoped>
.category {
	&__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"] {
	.category {
		&__count {
			@media (min-width: $desktop) {
				float: right;
				left: 0;
				margin-left: $padding-default;
				margin-right: 0;
			}
		}

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