import React, { useState } from "react";
import { Select, ImageList, ImageListItem, Grid } from '@mui/material';
import {
Typography,
TextField,
Button,
Stepper,
Step,
StepLabel,
} from "@material-ui/core";
import { makeStyles } from "@material-ui/core/styles";
import {
useForm,
Controller,
FormProvider,
useFormContext,
} from "react-hook-form";
const itemData = [
{
img: "https://images.unsplash.com/photo-1453728013993-6d66e9c9123a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80",
title: "picture"
}
]
const useStyles = makeStyles((theme) => ({
button: {
marginRight: theme.spacing(1),
},
textField: {
border: "2px solid green"
}
}));
function getSteps() {
return [
"Personal information",
"Student Information",
"Payment",
"Confirmation"
];
}
const GetStepContent=(step) =>{
const classes = useStyles();
switch (step) {
case 0:
return (
<>
<TextField
id="first-name"
label="First Name"
variant="outlined"
placeholder="Enter Your First Name"
width="75%"
margin="normal"
className={classes.textField}
name="firstName"
/>
<TextField
id="last-name"
label="Last Name"
variant="outlined"
placeholder="Enter Your Last Name"
// fullWidth
width="50%"
margin="normal"
name="lastName"
/>
<TextField
required
id="phone-number"
label="Phone Number"
variant="outlined"
placeholder="Enter Your Phone Number"
fullWidth
margin="normal"
name="phoneNumber"
/>
<TextField
required
id="email"
label="E-mail"
variant="outlined"
placeholder="Enter Your E-mail Address"
fullWidth
margin="normal"
name="emailAddress"
/>
<TextField
required
id="address1"
label="Address 1"
variant="outlined"
placeholder="Enter Your Address 1"
fullWidth
margin="normal"
name="address1"
/>
<TextField
required
id="address2"
label="Address 2"
variant="outlined"
placeholder="Enter Your Address 2"
fullWidth
margin="normal"
name="address2"
/>
<TextField
required
id="address3"
label="Address 3"
variant="outlined"
placeholder="Enter Your Address 3"
fullWidth
margin="normal"
name="address2"
/>
<TextField
required
id="country"
label="Country"
variant="outlined"
placeholder="Enter Your Country Name"
fullWidth
margin="normal"
name="country"
/>
<TextField
required
id="postal-code"
label="Postal Code"
variant="outlined"
placeholder="Enter your Postal code"
margin="normal"
name="postalCode"
/>
</>
);
case 1:
return (
<>
<TextField
required
id="rollNo"
label="Roll Number"
variant="outlined"
placeholder="Enter Your Roll Number"
fullWidth
margin="normal"
name="rollNo"
/>
<TextField
required
id="regNo"
label="Reg. ID Number"
variant="outlined"
placeholder="Enter Your Reg. ID Number"
fullWidth
margin="normal"
name="regNo"
/>
<TextField
required
id="year"
label="Year"
variant="outlined"
placeholder="Enter Your Year"
fullWidth
margin="normal"
name="year"
/>
<TextField
required
id="branch"
label="Branch"
variant="outlined"
placeholder="Enter Your Branch"
fullWidth
margin="normal"
name="branch"
/>
<TextField
required
id="divion"
label="Divion"
variant="outlined"
placeholder="Enter Your Divion"
fullWidth
margin="normal"
name="divion"
/>
<TextField
required
id="waNumber"
label="Whatsapp Number"
variant="outlined"
placeholder="Enter Your Whatsapp Number"
fullWidth
margin="normal"
name="waNumber"
/>
<TextField
required
id="altNumber"
label="Alternate Number"
variant="outlined"
placeholder="Enter Your Alternate Number"
fullWidth
margin="normal"
name="altNumber"
/>
</>
);
case 2:
return (
<>
<TextField
required
id="reason"
label="Reason to join PASC"
variant="outlined"
placeholder="Why do you want to join PASC?"
fullWidth
margin="normal"
multiLine="true"
rows={2}
name="reason"
/>
<TextField
required
id="expectation"
label="Expectations from PASC"
variant="outlined"
placeholder="Your expectations from PASC?"
fullWidth
margin="normal"
multiLine="true"
rows={2}
name="expectation"
/>
<Grid container justify="center">
<Grid item xs={6}>
<div>Scan QR code</div>
</Grid>
<Grid item xs={4}>
<ImageList sx={{ width: 200, height: 200 }} cols={1} rowHeight={200}>
{itemData.map((item) => (
<ImageListItem key={item.img}>
<img
src={`${item.img}?w=200&h=200&fit=crop&auto=format`}
srcSet={`${item.img}?w=200&h=200&fit=crop&auto=format&dpr=2 2x`}
alt={item.title}
loading="lazy"
/>
</ImageListItem>
))}
</ImageList>
</Grid>
</Grid>
<div>Upload Payment Screenshot</div>
<Button
variant="contained"
component="label"
color="primary"
>
Upload
<input
type="file"
hidden
/>
</Button>
<TextField
required
id="cardNumber"
label="Card Number"
variant="outlined"
placeholder="Enter Your Card Number"
fullWidth
margin="normal"
name="cardNumber"
/>
<TextField
required
id="cardMonth"
label="Card Month"
variant="outlined"
placeholder="Enter Your Card Month"
fullWidth
margin="normal"
name="cardMonth"
/>
<TextField
required
id="cardYear"
label="Card Year"
variant="outlined"
placeholder="Enter Your Card Year"
fullWidth
margin="normal"
name="cardYear"
/>
option for handling screen shot
</>
);
case 3:
return (
<>
Confirmation Detail
</>
);
default:
return "unknown step";
}
}
const LinaerStepper = () => {
const classes = useStyles();
const [activeStep, setActiveStep] = useState(0);
const [skippedSteps, setSkippedSteps] = useState([]);
const steps = getSteps();
const isStepOptional = (step) => {
return step === 1 || step === 2;
};
const isStepSkipped = (step) => {
return skippedSteps.includes(step);
};
const handleNext = () => {
setActiveStep(activeStep + 1);
setSkippedSteps(skippedSteps.filter((skipItem) => skipItem !== activeStep));
};
const handleBack = () => {
setActiveStep(activeStep - 1);
};
const handleSkip = () => {
if (!isStepSkipped(activeStep)) {
setSkippedSteps([...skippedSteps, activeStep]);
}
setActiveStep(activeStep + 1);
};
return (
<div>
<Stepper alternativeLabel activeStep={activeStep}>
{steps.map((step, index) => {
const labelProps = {};
const stepProps = {};
if (isStepOptional(index)) {
labelProps.optional = (
<Typography
variant="caption"
align="center"
style={{ display: "block" }}
>
optional
</Typography>
);
}
if (isStepSkipped(index)) {
stepProps.completed = false;
}
return (
<Step {...stepProps} key={index}>
<StepLabel {...labelProps}>{step}</StepLabel>
</Step>
);
})}
</Stepper>
{activeStep === steps.length ? (
<Typography variant="h3" align="center">
Thank You
</Typography>
) : (
<>
<form>{GetStepContent(activeStep)}</form>
<Button
className={classes.button}
disabled={activeStep === 0}
onClick={handleBack}
>
back
</Button>
{isStepOptional(activeStep) && (
<Button
className={classes.button}
variant="contained"
color="primary"
onClick={handleSkip}
>
skip
</Button>
)}
<Button
className={classes.button}
variant="contained"
color="primary"
onClick={handleNext}
>
{activeStep === steps.length - 1 ? "Finish" : "Next"}
</Button>
</>
)}
</div>
);
};
export default LinaerStepper;