import React, { useContext, useState } from 'react';
import BusinessRegisterForm from './BusinessRegisterForm';
import UserRegisterForm from './UserRegisterForm';
import HorizontalStepper from '../../controls/HorizontalOptionalStepper';
import Container from '@material-ui/core/Container';
import AuthStepperContext from '../../../Context/AuthContext';
import axios from 'axios'
import { useAuth } from '../../../Context/AuthContext'

export default function RegisterStepper() {

    // the issue happens when i introduce this context
    // const {handleSubmit} = useContext(AuthStepperContext)

    const getSteps = () => {
        return ['Create Account', 'Add Business'];
    }

    const getStepContent = (step) => {
        switch (step) {
            case 0:
            return <UserRegisterForm />;
            case 1:
            return <BusinessRegisterForm />;
            default:
            return 'Unknown step';
        }
    }

    const isStepOptional = (step) => {
        return ;
    }

    const [activeStep, setActiveStep] = useState(0);

    return (
        <Container maxWidth='sm'>
            <HorizontalStepper
                getSteps = {getSteps}
                getStepContent = {getStepContent}
                isStepOptional = {isStepOptional}
                activeStep = {activeStep}
                setActiveStep = {setActiveStep}
                // handleSubmit = {handleSubmit}
            />
        </Container>
    )
}