import { useState, createContext, useContext } from '@wordpress/element';

/**
 * Context Component.
 */
const SettingsContext = createContext(null);

export function useSettings() {
	return useContext(SettingsContext);
}

const SettingsProvider = ({ children }) => {
	const [rating, setRating] = useState(0);
	const [feedback, setFeedback] = useState('');
	const [currentPage, setCurrentPage] = useState('ratings');
	const [nextButtonDisabled, setNextButtonDisabled] = useState(true);
	const [isOpened, setIsOpened] = useState(true);

	// Notification
	const [showNotification, setShowNotification] = useState(false);
	const [notificationMessage, setNotificationMessage] = useState('');
	const [notificationType, setNotificationType] = useState('');

	return (
		<SettingsContext.Provider
			value={{
				rating,
				setRating,
				feedback,
				setFeedback,
				currentPage,
				setCurrentPage,
				nextButtonDisabled,
				setNextButtonDisabled,
				showNotification,
				setShowNotification,
				notificationMessage,
				setNotificationMessage,
				notificationType,
				setNotificationType,
				isOpened,
				setIsOpened,
			}}
		>
			{children}
		</SettingsContext.Provider>
	);
};

export const useNotifications = () => {
	const { setNotificationMessage, setNotificationType, setShowNotification } =
		useContext(SettingsContext);

	const error = (message) => {
		setNotificationMessage(message);
		setNotificationType('error');
		setShowNotification(true);
	};

	const success = (message) => {
		setNotificationMessage(message);
		setNotificationType('success');
		setShowNotification(true);
	};

	return {
		success,
		error,
	};
};

export default SettingsProvider;