<template>
	<header class="simplestats-header">
		<div class="simplestats-header-logo">
			<img :src="getImageUrl('logo.svg')" alt="SimpleStats" />
		</div>
		<div class="simplestats-header-actions">
			<button
				type="button"
				class="simplestats-header-notification-button"
				:class="{ 'has-unread': hasUnread, 'is-disabled': ! notificationsEnabled }"
				:aria-label="text_notifications"
				:aria-disabled="!notificationsEnabled || null"
				@click.stop="onBellClick"
			>
				<svg
					class="simplestats-header-notification-icon"
					width="20"
					height="20"
					viewBox="0 0 20 20"
					fill="none"
					xmlns="http://www.w3.org/2000/svg"
					aria-hidden="true"
				>
					<path
						d="M8.55662 17.5C8.70291 17.7533 8.9133 17.9637 9.16666 18.11C9.42001 18.2563 9.70741 18.3333 9.99995 18.3333C10.2925 18.3333 10.5799 18.2563 10.8333 18.11C11.0866 17.9637 11.297 17.7533 11.4433 17.5"
						stroke="currentColor"
						stroke-width="1.66667"
						stroke-linecap="round"
						stroke-linejoin="round"
					/>
					<path
						d="M2.71772 12.7717C2.60886 12.891 2.53702 13.0394 2.51094 13.1988C2.48486 13.3582 2.50566 13.5217 2.57081 13.6695C2.63597 13.8173 2.74267 13.943 2.87794 14.0312C3.0132 14.1195 3.17121 14.1665 3.33272 14.1667H16.6661C16.8276 14.1667 16.9856 14.1199 17.1209 14.0318C17.2563 13.9437 17.3631 13.8181 17.4285 13.6704C17.4938 13.5227 17.5148 13.3592 17.4889 13.1998C17.4631 13.0404 17.3914 12.892 17.2827 12.7725C16.1744 11.63 14.9994 10.4158 14.9994 6.66667C14.9994 5.34058 14.4726 4.06881 13.5349 3.13113C12.5972 2.19345 11.3255 1.66667 9.99939 1.66667C8.67331 1.66667 7.40154 2.19345 6.46386 3.13113C5.52618 4.06881 4.99939 5.34058 4.99939 6.66667C4.99939 10.4158 3.82356 11.63 2.71772 12.7717Z"
						stroke="currentColor"
						stroke-width="1.66667"
						stroke-linecap="round"
						stroke-linejoin="round"
					/>
				</svg>
			</button>
		</div>
		<Transition v-if="notificationsEnabled" name="simplestats-notification">
			<NotificationDrawer v-if="store.showNotification" />
		</Transition>
	</header>
</template>

<script setup>
	import { computed } from 'vue';
	import NotificationDrawer from './NotificationDrawer.vue';
	import { useStore } from '@/dashboard/store.js';

	const props = defineProps( {
		notificationsEnabled: { type: Boolean, default: true },
	} );

	const store = useStore();

	const text_notifications = wp.i18n.__( 'Notifications', 'simplestats-friendly-website-analytics' );

	const hasUnread = computed( () => {
		if ( ! props.notificationsEnabled ) {
			return false;
		}
		const events = store.getNotification?.events;
		return Array.isArray( events ) && events.length > 0;
	} );

	function onBellClick() {
		if ( ! props.notificationsEnabled ) {
			return;
		}
		store.toggleNotification();
	}
</script>
