import React, { useContext, useEffect, useState } from 'react';
import { progressTrackerContext } from '../context/progressTrackerContext';

const StepTracker = () => {

	const { currentStep, setCurrentStep } = useContext(progressTrackerContext);
	const [progressWidth, setProgressWidth] = useState('20%');

	useEffect(() => {
		if ( currentStep === 2 ) {
			setProgressWidth('40%');
		} else if ( currentStep === 3 ) {
			setProgressWidth('60%');
		} else if ( currentStep === 4 ) {
			setProgressWidth('80%')
		} else if ( currentStep === 5 ) {
			setProgressWidth('100%')
		} else {
			setProgressWidth('20%')
		}
	}, [currentStep])

	return (
		<div className='booking-progrss-tracker'>
			<div className='booking-step-tracker'>Step {currentStep}/5</div>
			<div className='booking-progress-bar-wrapper'>
				<div className="booking-progress-bar-active" style={{ width: `${progressWidth}` }}></div>
			</div>
		</div>
	)
}

export default StepTracker
