import { useContext, useEffect, useState } from 'react';
import { tokenContext } from '../context/tokenContext';
import checkIcon from '../../../images/success-gif.gif';
import fetchUserData from '../services/fetch-user-data';

const Confirmation = () => {
	const { tokenid, setTokenid } = useContext(tokenContext);
	const [settings, setSettings] = useState({});

	useEffect(() => {
		const fetchSettings = async () => {
			try {
				const fieldSettings = await fetchUserData('ssas/v1/settings-fields', '');
				setSettings(fieldSettings);
			} catch (error) {
				console.error('Failed to fetch settings:', error);
			}
		};
		fetchSettings();
	}, []);


	return (
		<div className='booking-confirmation-block'>
			<p className='booking-component-title'>Booking Confirmation</p>
			<div className='book-an-appointment-block book-an-appointment-block-success'>
				<img src={checkIcon} alt="My Image" />
				<h2 className='success-mes'>Your Booking is completed</h2>
				<p className='booking-token-number'>Your Token Number is: <span>{tokenid}</span></p>
				<p className='booking-confirmation-description'>
					You will receive a confirmation email. If you do not receive an email within 5 minutes, please check your Junk Mail or Spam folder. If you need to change your reservation,
				</p>
				<div className="wp-block-button is-style-fill booking-nav-link-wrapper">
					<a href={settings?.schedule_success_url} className='booking-nav-next booking-nav-link wp-block-button__link wp-element-button'>Click here</a>
				</div>
			</div>
		</div>
	)
}

export default Confirmation
