Untitled

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;