//src/widgets/Alert.js
import React, { createContext, useContext, useState } from 'react';

// Create a Context for the alert system
const AlertContext = createContext();

// Custom hook to use the AlertContext in any component
export const useAlert = () => {
	
	return useContext(AlertContext);
};

// AlertProvider component that wraps the application to provide alert functionality
export const AlertProvider = ({ children }) => {
	
	const [alerts, setAlerts] = useState([]);
	
	// Mapping of alert types to Bootstrap classes
	const alertTypeClass = {
		error: 'alert-danger',
		danger: 'alert-danger',
		success: 'alert-success',
		info: 'alert-info',
		warning: 'alert-warning',
	};
	
	/**
	* showAlert function: Adds a new alert message to the alert state.
	* @param {string} type - The type of alert (success, error, info, etc.).
	* @param {string} message - The alert message to display.
	* @param {number} [duration=3000] - The duration in milliseconds before the alert is 
	* automatically dismissed. Default is 3000ms.
	*/
	const showAlert = (type, message, duration = 3000) => {
		
		const id = Date.now();// Unique ID for the alert
		const alertClass = alertTypeClass[type] || 'alert-info';
		
		// Add the new alert to the alerts state
		setAlerts(prevAlerts => [...prevAlerts, { id, type: alertClass, message }]);
		
		// Automatically dismiss the alert after a certain duration
		setTimeout(() => {
			
			dismissAlert(id);
		}, duration);
		
		return id;// Return the ID for future reference
	};
	
	/**
	* dismissAlert function: Removes an alert from the alert state.
	* @param {number} id - The unique ID of the alert to remove.
	*/
	const dismissAlert = (id) => {
		
		// Filter out the alert with the specified ID from the alerts state
		setAlerts(prevAlerts => prevAlerts.filter(alert => alert.id !== id));
	};
	
	return (
		
		<AlertContext.Provider value={{ alerts, showAlert, dismissAlert }}>
		
			{children}
			
			{/* Render alerts */}
			<>
				{alerts.map((alert) => (
					<div
						key={alert.id}
						className={`alert ${alert.type} alert-dismissible fade show`}
						role="alert"
					>
						{alert.message}
						
						<button 
							type="button"
							className="btn-close"
							onClick={() => dismissAlert(alert.id)}
							aria-label="Close"
						></button>
					</div>
				))}
			</>
			
		</AlertContext.Provider>
	);
};

//src/utils/Connectivity.js
import { useAlert } from '../widgets/Alert';

// Variable to store the alert ID
let offlineAlertId = null;

let isOnline = navigator.onLine;

// Event listeners
window.addEventListener('load', updateOnlineStatus);
window.addEventListener('online', updateOnlineStatus);
window.addEventListener('offline', updateOnlineStatus);

/**
* Update Online Status
*/
const updateOnlineStatus = () => {
	
	isOnline = navigator.onLine;
	if (!isOnline) {
		
		offlineAlertId = showAlert('warning', 'You are offline. Ensure your data is saved locally.');
	}
	else {
		if (offlineAlertId) {
		
			synchronizeUnsyncedData();// Handle syncing when back online
		
			dismissAlert(offlineAlertId);
			offlineAlertId = null;// Clear the stored ID after dismissing
		}
	}
};

/**
* Synchronize Layouts and User Data
*/
const synchronizeUnsyncedData = async () => {
	
	const unsyncedLayouts = await layoutDB.getUnsyncedData('LayoutData');
	for (const layout of unsyncedLayouts) {
		
		// saveLayoutData = async (layoutId, layoutData)
		await saveLayoutData(layout.id, layout.blocks);
	}
	
	/* Sync user data
	const unsyncedUsers = await layoutDB.getUnsyncedData('UserData');
	for (const user of unsyncedUsers) {
		
		await saveUserData(user.id, user.data);
	}*/
};

export const checkOnlineStatus = () => isOnline;


[eslint] 
src/utils/Connectivity.js
  Line 22:20:  'showAlert' is not defined       no-undef
  Line 29:4:   'dismissAlert' is not defined    no-undef
  Line 40:32:  'layoutDB' is not defined        no-undef
  Line 44:9:   'saveLayoutData' is not defined  no-undef