require('./notificationPopup.less');
import React, { useEffect, useState } from 'react';
const request = require('../../utils/request-middleware.js');

import Dialog from '../../../components/dialog.jsx';

const DISMISS_KEY = 'dismiss_notification04-09-24';
const DISMISS_BUTTON = <i className='fas fa-times dismiss' />;

const NotificationPopup = ()=>{

	const [notifications, setNotifications] = useState([]);
	const [dissmissKeyList, setDismissKeyList] = useState([]);
	const [error, setError] = useState(null);

	useEffect(()=>{
		getNotifications();
	}, []);

	const getNotifications = async () => {
		setError(null);

		try {
			const res = await request.get('/admin/notification/all');
			pickActiveNotifications(res.body || []);
		} catch (err) {
			console.log(err);
			setError(`Error looking up notifications: ${err?.response?.body?.message || err.message}`);
		}
	}

	const pickActiveNotifications = (notifs) => {
		const now = new Date();
		const filteredNotifications = notifs.filter(notification => {
			const startDate = new Date(notification.startAt);
			const stopDate = new Date(notification.stopAt);
			const dismissed = localStorage.getItem(notification.dismissKey) ? true : false;
			return now >= startDate && now <= stopDate && !dismissed;
		});
		setNotifications(filteredNotifications);
		setDismissKeyList(filteredNotifications.map(notif => notif.dismissKey));
	}

	const renderNotificationsList = ()=>{
		if(error)
			return <div className='error'>{error}</div>;

		return notifications.map((notification)=>(
					<li key={notification.dismissKey} >
						<em>{notification.title}</em><br />
						<p>{notification.text}</p>
					</li>
				))
	};

	return <Dialog className='notificationPopup' dismissKeys={dissmissKeyList} closeText={DISMISS_BUTTON} >
		<div className='header'>
			<i className='fas fa-info-circle info'></i>
			<h3>Notice</h3>
			<small>This website is always improving and we are still adding new features and squashing bugs. Keep the following in mind:</small>
		</div>
		<ul>
			{renderNotificationsList()}
		</ul>
	</Dialog>;
};

module.exports = NotificationPopup;