text: import React from "react";
  import { makeStyles } from "@material-ui/core/styles";
  import Stepper from "@material-ui/core/Stepper";
  import Step from "@material-ui/core/Step";
  import StepButton from "@material-ui/core/StepButton";
  import Button from "@material-ui/core/Button";
  import Typography from "@material-ui/core/Typography";
  import Radio from "@material-ui/core/Radio";
  import RadioGroup from "@material-ui/core/RadioGroup";
  import FormControlLabel from "@material-ui/core/FormControlLabel";
  
  const useStyles = makeStyles((theme) => ({
    root: {
      width: "100%",
    },
    button: {
      marginRight: theme.spacing(1),
    },
    completed: {
      display: "inline-block",
    },
    instructions: {
      marginTop: theme.spacing(1),
      marginBottom: theme.spacing(1),
    },
  }));
  
  function getSteps() {
    return ["", "", "", "", ""];
  }
  
  function getStepContent(step) {
    switch (step) {
      case 0:
        return "Step 1: Select campaign settings...";
      case 1:
        return "Step 2: What is an ad group anyways?";
      case 2:
        return "Step 3: This is the bit I really care about!";
      default:
        return "Unknown step";
    }
  }
  const tutorialSteps = [
    {
      label:
        "Suppose the numbers 7, 5, 1, 8, 3, 6, 0, 9, 4, 2 are inserted in that order into an initially empty binary search tree. The binary search tree uses the usual ordering on natural numbers. What is the in-order traversal sequence of the resultant tree?",
      op1: "7 5 1 0 3 2 4 6 8 9",
      op2: "0 2 4 3 1 6 5 9 8 7",
      op3: "0 1 2 3 4 5 6 7 8 9.",
      op4: "9 8 6 4 2 3 0 1 5 7",
    },
    {
      label:
        "What is the worst case time complexity for search, insert and delete operations in a general Binary Search Tree?",
      op1: "O(n) for all.",
      op2: "O(Logn) for all",
      op3: "O(Logn) for search and insert, and O(n) for delete",
      op4: "O(Logn) for search, and O(n) for insert and delete",
    },
    {
      label:
        "While inserting the elements 71, 65, 84, 69, 67, 83 in an empty binary search tree (BST) in the sequence shown, the element in the lowest level is",
      op1: "65",
      op2: "67.",
      op3: "69",
      op4: "83",
    },
    {
      label:
        "The following numbers are inserted into an empty binary search tree in the given order: 10, 1, 3, 5, 15, 12, 16. What is the height of the binary search tree (the height is the maximum distance of a leaf node from the root)? ",
      op1: "2",
      op2: "3.",
      op3: "4",
      op4: "6",
    },
    {
      label:
        "Suppose that we have numbers between 1 and 100 in a binary search tree and want to search for the number 55. Which of the following sequences CANNOT be the sequence of nodes examined?",
      op1: "{10, 75, 64, 43, 60, 57, 55}",
      op2: "{90, 12, 68, 34, 62, 45, 55}",
      op3: "{9, 85, 47, 68, 43, 57, 55}.",
      op4: "{79, 14, 72, 56, 16, 53, 55}",
    },
  ];
  
  export default function PostAssessment() {
    const classes = useStyles();
    const [activeStep, setActiveStep] = React.useState(0);
    const [completed, setCompleted] = React.useState({});
    const steps = getSteps();
  
    const totalSteps = () => {
      return steps.length;
    };
  
    const completedSteps = () => {
      return Object.keys(completed).length;
    };
  
    const isLastStep = () => {
      return activeStep === totalSteps() - 1;
    };
  
    const allStepsCompleted = () => {
      return completedSteps() === totalSteps();
    };
  
    const handleNext = () => {
      const newActiveStep =
        isLastStep() && !allStepsCompleted()
          ? // It's the last step, but not all steps have been completed,
            // find the first step that has been completed
            steps.findIndex((step, i) => !(i in completed))
          : activeStep + 1;
      setActiveStep(newActiveStep);
    };
  
    const handleBack = () => {
      setActiveStep((prevActiveStep) => prevActiveStep - 1);
    };
  
    const handleStep = (step) => () => {
      setActiveStep(step);
    };
  
    const handleComplete = () => {
      const newCompleted = completed;
      newCompleted[activeStep] = true;
      setCompleted(newCompleted);
      handleNext();
    };
  
    const handleReset = () => {
      setActiveStep(0);
      setCompleted({});
    };
  
    //________For Radio button_______
    const [value, setValue] = React.useState("female");
  
    const handleChange = (event) => {
      setValue(event.target.value);
    };
  
    return (
      <div className={classes.root}>
        <Stepper nonLinear activeStep={activeStep}>
          {steps.map((label, index) => (
            <Step key={label}>
              <StepButton
                onClick={handleStep(index)}
                completed={completed[index]}
              >
                {label}
              </StepButton>
            </Step>
          ))}
        </Stepper>
        <div>
          {allStepsCompleted() ? (
            <div>
              <Typography className={classes.instructions}>
                Post-Assessment completed Successfully.
              </Typography>
            </div>
          ) : (
            <div>
              <br />
              <Typography>{tutorialSteps[activeStep].label}</Typography>
              <br />
              <RadioGroup onChange={handleChange} color="primary">
                <FormControlLabel
                  value={tutorialSteps[activeStep].op1}
                  control={<Radio />}
                  label={tutorialSteps[activeStep].op1}
                />
                <FormControlLabel
                  value={tutorialSteps[activeStep].op2}
                  control={<Radio />}
                  label={tutorialSteps[activeStep].op2}
                />
                <FormControlLabel
                  value={tutorialSteps[activeStep].op3}
                  control={<Radio />}
                  label={tutorialSteps[activeStep].op3}
                />
                <FormControlLabel
                  value={tutorialSteps[activeStep].op4}
                  control={<Radio />}
                  label={tutorialSteps[activeStep].op4}
                />
              </RadioGroup>
              <br />
              <div>
                <Button
                  variant="contained"
                  color="primary"
                  disabled={activeStep === 0}
                  onClick={handleBack}
                  className={classes.button}
                >
                  Back
                </Button>
  
                {activeStep !== steps.length &&
                  (completed[activeStep] ? (
                    <Typography variant="caption" className={classes.completed}>
                      Step {activeStep + 1} already completed
                    </Typography>
                  ) : (
                    <Button
                      variant="contained"
                      color="primary"
                      onClick={handleComplete}
                    >
                      {completedSteps() === totalSteps() - 1 ? "Submit" : "Next"}
                    </Button>
                  ))}
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
  