<template>
	<aside class="simplestats-notification-wrapper" ref="notificationWrapper">
		<div class="simplestats-notification-inner">
			<div class="simplestats-notification-top-section">
				<div class="simplestats-notification-top-section-left">
					<svg width="24" height="16" viewBox="0 0 28 18"><path d="M26.7258 8.4375C26.9602 8.8125 27.1008 9.23438 27.1008 9.70312V15.75C27.1008 16.4062 26.8665 16.9219 26.4446 17.3438C25.9758 17.8125 25.4602 18 24.8508 18H2.35083C1.69458 18 1.17896 17.8125 0.75708 17.3438C0.28833 16.9219 0.10083 16.4062 0.10083 15.75V9.70312C0.10083 9.23438 0.19458 8.8125 0.47583 8.4375L5.44458 0.984375C5.63208 0.703125 5.86646 0.46875 6.24146 0.28125C6.56958 0.09375 6.94458 0 7.31958 0H19.8821C20.2571 0 20.5852 0.09375 20.9602 0.28125C21.2883 0.46875 21.5696 0.703125 21.7571 0.984375L26.7258 8.4375ZM7.69458 3L3.71021 9H9.47583L10.9758 12H16.2258L17.7258 9H23.4915L19.5071 3H7.69458Z" fill="currentColor"></path></svg>
					<span v-text="text_inbox"></span>
				</div>
				<div class="simplestats-notification-top-section-right">
					<span v-text="showDismissed ? text_back_to_inbox : text_view_dismissed" @click="toggleDismissed"></span>
					<button @click="store.toggleNotification()">
						<svg width="16" height="16" viewBox="0 0 352 512"><path fill="currentColor" d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"></path></svg>
					</button>
				</div>
			</div>
			<NotificationContent v-if="showDismissed" name="dismissed" />
			<NotificationContent v-else name="events" />
		</div>
	</aside>
</template>

<script setup>
	import { ref, onMounted, onBeforeUnmount } from 'vue';
	import { useStore } from '@/dashboard/store.js';
	import NotificationContent from "./NotificationContent.vue";

	const store = useStore();

	const text_inbox = wp.i18n.__('Inbox', 'simplestats-friendly-website-analytics');
	const text_view_dismissed = wp.i18n.__('View Dismissed', 'simplestats-friendly-website-analytics');
	const text_back_to_inbox = wp.i18n.__('Back to Inbox', 'simplestats-friendly-website-analytics');

	const showDismissed = ref(false);
	const notificationWrapper = ref(null);

	function toggleDismissed() {
		showDismissed.value = ! showDismissed.value;
	}

	function outsideClickEventListener(event) {
		let withinBoundaries = event.composedPath().includes( notificationWrapper.value );

		// Outside click and notification open.
		if ( ! withinBoundaries && store.showNotification ) {
			store.toggleNotification();
		}
	}

	onMounted(() => {
		document.addEventListener('click', outsideClickEventListener);
	});

	onBeforeUnmount(() => {
		// Remove listener to handle multiple trigger.
		document.removeEventListener('click', outsideClickEventListener);
	});
</script>
