<template>
	<div v-if="hasSubLinks"
		 class="root-link root-link--has-child"
		 @click="toogleChilds">
		<div class="root-link"
			 style="padding: 0">
			{{ $t(link.showName) }}
			<nuxt-link :to="localePath(link.url)"
					   v-if="link.url"
					   class="root-link__go-parent-on-desktop"></nuxt-link>
		</div>
		<div class="links-childs-wrapper"
			 :class="{ 'links-childs-wrapper--active': isChildsWrapperActive }">
			<nuxt-link v-for="item in subLinks"
					   :key="item.name"
					   :to="localePath(item.url)"
					   class="child-link">
				{{ $t(item.showName) }}
			</nuxt-link>
		</div>
	</div>
	<component v-else
			:is="tagType"
			:to="isLocalizeLinkUrl? localePath(link.url) : link.url"
			:href="isLocalizeLinkUrl? localePath(link.url) : link.url"
			:data-is-catalog="isCatalog"
			class="root-link"
		 	target="isLocalizeLinkUrl ? 'self' : 'blank'"
			:active-class="'root-link--active'">
		{{ $t(link.showName) }}
	</component>
</template>
<script>

export default {
	name: "NavigationItem",
	computed: {
		hasSubLinks() {
			return this.subLinks && this.subLinks.length > 0;
		},
	},
	data() {
		return {
			isChildsWrapperActive: true,
		};
	},
	methods: {
		toogleChilds() {
			//this.isChildsWrapperActive = !this.isChildsWrapperActive;
		},
	},
	props: {
		link: {
			required: true,
			type: Object,
		},
		subLinks: {
			required: true,
		},
		tagType: {
			default: "nuxt-link",
			required: false
		},
		isLocalizeLinkUrl: {
			default: true,
			required: false
		},
		isCatalog: {
			default: false,
			required: false
		}
	},
};
</script>
<style lang="scss" scoped>
%link {
	color: $color-text;
	cursor: pointer;
	display: block;
	height: 32px;
	line-height: 32px;
	overflow: hidden;
	text-decoration: none;
	width: 100%;

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

.root-link {
	@extend %link;
	font-weight: bold;
	position: relative;

	&__go-parent-on-desktop {
		display: none;
	}

	&--has-child {
		height: auto;
	}



	@media (min-width: $desktop) {
		display: inline-block;
		height: $menu-bar-height;
		line-height: $menu-bar-height;
		padding: 0 $padding-default;
		vertical-align: middle;
		width: auto;

		&--has-child {
			position: relative;

			.root-link__go-parent-on-desktop {
				display: block;
				height: 100%;
				position: absolute;
				right: 0;
				top: 0;
				width: 100%;
			}

			&:hover {
				overflow: visible;

				.links-childs-wrapper {
					background: $color-white;
					box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16);
					height: auto;
					opacity: 1;
					right: 0;
					top: $menu-bar-height;
					width: 260px;
				}
			}
		}

		&[data-is-catalog="true"] {
			background-color: $color-success;
			color: $color-white;
			border-radius: 16px;
			height: 32px;
			line-height: 32px;

			&:hover {
				background-color: #03a35e;;
			}
		}
	}

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

.links-childs-wrapper {
	height: 0;
	opacity: 0;
	overflow: hidden;
	position: relative;
	transition: all ease-in-out 0.2s;

	&--active {
		height: auto;
		opacity: 1;
	}

	@media (min-width: $desktop) {
		position: absolute;
	}
}

.child-link {
	@extend %link;
	font-weight: normal;

	@media (min-width: $desktop) {
		padding: 0 $padding-default;
		text-align: right;
	}
}

[data-lang="en"] {
	@media (min-width: $desktop) {
		.links-childs-wrapper {
			left: 0;
			right: unset;
		}

		.child-link {
			text-align: left;
		}
	}
}
</style>