import { useState } from 'react';
import { progressTrackerContext } from './context/progressTrackerContext';
import { tokenContext } from './context/tokenContext';
import ScheduleDropdown from './components/ScheduleDropdown';
import CategoryDropdown from './components/CategoryDropdown';
import Calendar from './components/Calendar';
import UserForm from './components/UserForm';
import SummaryPage from './components/SummaryPage';
import Confirmation from './components/Confirmation';

import { SkeletonTheme } from 'react-loading-skeleton';

const App = () => {

	const [currentStep, setCurrentStep] = useState(1);
	const [tokenid, setTokenid] = useState(null);

	const renderComponent = () => {

		if (currentStep === 1) {
			return <ScheduleDropdown />;
		}

		if (currentStep === 2) {
			return <CategoryDropdown />;
		}

		if (currentStep === 3) {
			return <Calendar />;
		}

		if (currentStep === 4) {
			return <UserForm />;
		}

		if (currentStep === 5) {
			return <SummaryPage />;
		}

		if (currentStep === 6) {
			return <Confirmation />;
		}

		return <div>Thank You!</div>;
	};

	return (
		<SkeletonTheme baseColor="#D3D3D3">

			<progressTrackerContext.Provider
				value={{
					currentStep,
					setCurrentStep
				}}
			>

				<tokenContext.Provider
					value={{
						tokenid,
						setTokenid
					}}
				>

					<div className="book-an-appointment-block">

						<div className="book-an-appointment-block-wrapper">

							<h3>
								Book an Appointment
							</h3>

							{renderComponent()}

						</div>

					</div>

				</tokenContext.Provider>

			</progressTrackerContext.Provider>

		</SkeletonTheme>
	);
};

export default App;
