<template>
	<span v-if="loading"></span>
	<span v-else>
		<router-link
			:class="['wcc-nav-menu-item', {}]"
			class="wcc-nav-menu-item"
			:to="data.to"
			:data-test-id="data['data-test-id']"
		>
			{{ data.text }}
			<span class="wcc-license-status-icon" v-if = "data.to.name === 'license'">
				<span class="wcc-license-active-icon" v-if = "licenseStatus">
					<base-icon icon="success-circle-minor"></base-icon>
				</span>
				<span class="wcc-license-deactive-icon" v-else>
					<base-icon icon="exclamation-circle"></base-icon>
				</span>
			</span>
			<span class="wcc-renew-consent-warning-icon" v-if = "data.to.name === 'advanced' && renewConsentNotice">
				<base-icon icon="exclamation-circle-minor"></base-icon>
			</span>
		</router-link>
	</span>
</template>

<script>
import BaseIcon from "@/components/icons/BaseIcon.vue";
import { mapState } from "vuex";

export default {
	name: "MenuItem",
	props: {
		data: Object,
	},
	components: {
		BaseIcon
	},
	data() {
		return {};
	},
	methods: {},
	computed: {
		licenseStatus() {
			return this.info.license.status;
		},
		renewConsentNotice() {
			return this.info.renew_consent_notice.status;
		},
		...mapState("settings", ["info"]),
		loading() {
			return this.info === false;
		},
	},	
};
</script>

<style lang="scss">
@include wrap-class() {
	.wcc-nav-menu-item {
		text-decoration: none !important;
		cursor: pointer;
		color: lighten(color(primary, font), 20%);
		padding: 10px 16px;
		display: inline-block;
		margin: 0 5px;
		-webkit-transition: all 0.2s ease;
		-moz-transition: all 0.2s ease;
		transition: all 0.2s ease;
		font-weight: 400;
		text-align: center;
		&.router-link-active,
		&:hover {
			color: #3157A6;
		}
		&.router-link-active {
			font-weight: 600;
			font-size: 14px;
			border-bottom: 4px solid #3157A6;
			color: #3157A6;
		}
		&:first-child {
			margin-left: 0px;
		}
		.wcc-license-status-icon .wcc-license-active-icon .wcc-icon-base,.wcc-license-status-icon .wcc-license-deactive-icon .wcc-icon-base {
			vertical-align: bottom;
		}
		.wcc-renew-consent-warning-icon{
			vertical-align: middle;
		}
		.wcc-license-status-icon .wcc-license-deactive-icon .wcc-icon-base > svg {
			height: 18px;
			width: 18px;
		}
	}
}
</style>