<template>
	<div class="category">
		<div class="category__base">
			{{ $t("products") }}
		</div>
		<div class="category__level1">
			<div class="category__level1-group"
				 v-for="level1 in level1Categories"
				 :key="level1.name"
				 :class="{ 'category__level1-group--has-child': getLevel2Items(level1.name).length }">
				<nuxt-link :to="localePath(level1.url)"
						   class="category__level1-link">
				
						<picture v-if="level1.icon">
							<source v-if="level1.iconAvif" :srcset="level1.iconAvif"    />
							<img class="category__icon category__icon--level1"
								:src="level1.icon"
								decoding="async"
								loading="lazy"
								alt=""
								width="16" height="16"
								aria-hidden="true" />
						</picture>
					{{ level1.showName }}
				</nuxt-link>
				<div class="category__level2">
					<nuxt-link v-for="level2 in getLevel2Items(level1.name)"
							   :key="level2.name"
							   :to="localePath(level2.url)"
							   class="category__level2-link">
						
							 <picture v-if="level2.icon">
								<source v-if="level2.iconAvif" :srcset="level2.iconAvif"    />
								<img class="category__icon category__icon--level2"
								:src="level2.icon"
								decoding="async"
								loading="lazy"
								alt=""
								height="66.6"
								width="100"
								aria-hidden="true" />
							</picture>	 
						{{ level2.showName }}
					</nuxt-link>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
import { getAllCategories } from "../../../api/api_list";
import { convertImagePathToAvif} from "../../../helper/helper";

export default {
	name: "NavigationProductCategories",
	data() {
		return {
			level1Categories: [],
			level2Categories: []
		};
	},
	async beforeMount() {
		const categories = await getAllCategories(this.$axios, this.$i18n.locale);
		const visibleInMenuList = categories.filter((item) => item?.acf?.is_show_in_menu);

		const productsBaseCategoryId = 2;
		const level1Categories = visibleInMenuList
			.filter((item) => item.parent == productsBaseCategoryId)
			.map((item) => {
				return {
					"id": item.id,
					"name": item.slug,
					"showName": item.title,
					"url": `/products/category/${item.slug}`,
					"parent": null,
					"icon": item.acf?.icon,
					"iconAvif": convertImagePathToAvif(item.acf?.icon),
					"order": Number(item.acf?.order) || 100
				};
			}).sort((cat1, cat2) => cat1.order - cat2.order);

		const level2Categories = [];
		for (let i = 0; i < level1Categories.length; i++) {
			const level1 = level1Categories[i];
			const level1Childe = visibleInMenuList
				.filter((item) => item.parent == level1.id);
			level1Childe.forEach(level2Item => {
				level2Categories.push({
					"name": level2Item.slug,
					"showName": level2Item.title,
					"url": `/products/category/${level2Item.slug}`,
					"parent": level1.name,
					"icon": level2Item.acf.icon,
					"iconAvif": convertImagePathToAvif(level2Item.acf.icon),
					"order": Number(level2Item.acf?.order) || 100
				});
			});
		}

		this.level1Categories = level1Categories;
		this.level2Categories = level2Categories.sort((cat1, cat2) => cat1.order - cat2.order);
	},
	methods: {
		getLevel2Items(level1Name) {
			return this.level2Categories.filter((item) => item.parent == level1Name);
		}
	}
};
</script>
<style lang="scss" scoped>
%link {
	color: $color-text;
	cursor: pointer;
	display: block;
	height: 32px;
	line-height: 32px;
	text-decoration: none;
	width: 100%;

	[data-lang="en"] & {
		direction: ltr;
		text-align: left;
	}

	&:hover {
		color: $color-primary;
	}
}

.category {
	display: block;

	&__base {
		@extend %link;

		font-weight: bold;
		position: relative;
	}

	&__icon {
		$size: 16px;

		display: inline-block;
		height: $size;
		margin-left: 16px;
		vertical-align: middle;
		width: $size;

		[data-lang="en"] & {
			margin-left: 0;
			margin-right: 16px;
		}

		&--level2 {
			display: none;
		}
	}

	&__level1-group {
		display: block;
		padding: 0 8px 0 0;

		[data-lang="en"] & {
			padding: 0 0 0 8px;
		}
	}

	&__level1-link {
		@extend %link;
	}

	&__level2 {
		display: block;
		padding-right: 36px;

		[data-lang="en"] & {
			padding-left: 36px;
			padding-right: 0;
		}
	}

	&__level2-link {
		@extend %link;

		color: $color-text--light;
	}

	@media (min-width: $desktop) {
		$sub-menu-width: 280px;

		display: inline-block;
		height: $menu-bar-height;
		line-height: $menu-bar-height;
		padding: 0 $padding-default;
		position: relative;
		vertical-align: middle;
		width: auto;

		&__base {
			cursor: pointer;
			display: block;
			height: $menu-bar-height;
			line-height: $menu-bar-height;
		}

		&__level1 {
			background: $color-white--dark;
			opacity: 0;
			padding: 0;
			pointer-events: none;
			position: absolute;
			padding: 8px 0;
			right: 8px;
			top: 50px;
			transform: translateY(-10%);
			transition: transform ease-in 0.1s, opacity ease-in 0.15s;
			width: $sub-menu-width;

			[data-lang="en"] & {
				left: 8px;
				right: auto;
			}

			.category:hover & {
				pointer-events: all;
				opacity: 1;
				transform: translateY(0);
			}
		}

		&__level1-link {
			height: 42px;
			line-height: 42px;
			padding: 0 12px;

			.category__level1-group--has-child & {
				&::before {
					$size: 6px;
					border-top: 2px solid $color-text;
					border-left: 2px solid $color-text;
					content: "";
					display: block;
					float: left;
					height: $size;
					margin-top: 18px;
					transform: rotate(-45deg);
					width: $size;

					[data-lang="en"] & {
						float: right;
						transform: rotate(135deg);
					}
				}
			}

			.category__level1-group:hover & {
				color: $color-primary;

				&::before {
					border-color: $color-primary;
				}
			}
		}

		&__level2 {
			background: $color-white;
			font-size: 0;
			min-height: 100%;
			top: 0;
			opacity: 0;
			padding: 12px;
			pointer-events: none;
			position: absolute;
			right: $sub-menu-width;
			transform: translateX(25%);
			transition: transform ease-in 0.1s, opacity ease-in 0.2s;
			width: $sub-menu-width;


			[data-lang="en"] & {
				left: $sub-menu-width;
				right: auto;
				transform: translateX(-25%);
			}

			.category__level1-group--has-child:hover & {
				pointer-events: all;
				opacity: 1;
				transform: translateX(0);
			}
		}

		&__icon--level2 {
			display: block;
			margin: 0 auto;
			height: 66.6px;
			width: 100px;
		}

		&__level2-link {
			display: inline-block;
			font-size: 12px;
			height: auto;
			vertical-align: top;
			text-align: center;
			width: 50%;
		}
	}
}
</style>