import {
  Button,
  Grid,
  FormLabel,
  FormControl,
  FormControlLabel,
  RadioGroup,
  Radio,
  Avatar,
} from "@mui/material";
import React from "react";
import { useLocation, useNavigate, useParams } from "react-router-dom";

const HearingTest = () => {
  const navigate = useNavigate();
  const location = useLocation();
  const params = useParams();
  const [testType, setTestType] = React.useState("female");
  const [company, setCompany] = React.useState(location?.state?.company);
  const handleChange = (event) => {
    setTestType(event.target.value);
  };

  return (
    <div>
      <Grid
        container
        direction="column"
        justifyContent="center"
        alignItems="center"
        // spacing={2}
      >
        <Avatar
          src={company?.logo}
          alt={company?.name}
          style={{ marginBottom: "1rem", width: 100, height: 100 }}
        />
      </Grid>
      <Grid
        container
        direction="column"
        justifyContent="center"
        alignItems="center"
      >
        <h4>Hearing Test</h4>
        <FormControl>
          <FormLabel id="demo-radio-buttons-group-label">
            Select the option for the testing of your ears.
          </FormLabel>
          <RadioGroup
            style={{ marginLeft: "5rem" }}
            value={testType}
            onChange={handleChange}
            aria-labelledby="demo-radio-buttons-group-label"
            defaultValue="female"
            name="testType"
          >
            <FormControlLabel
              value="voice"
              control={<Radio />}
              label={
                <img
                  src="https://istar-bucket.s3.ap-southeast-2.amazonaws.com/istar/62a8df80-e650-11ed-9921-c9a8d726ca1bWhatsApp_Image_2023-04-27_at_11.15.57_AM__1_-removebg-preview.png"
                  alt="voice"
                  width="100px"
                  height="100px"
                />
              }
            />
            <FormControlLabel
              value="headphone"
              control={<Radio />}
              label={
                <img
                  src="https://istar-bucket.s3.ap-southeast-2.amazonaws.com/istar/8879a8c0-e650-11ed-97f3-c76c8d10c0c1WhatsApp_Image_2023-04-27_at_11.15.57_AM-removebg-preview.png"
                  alt="headphone"
                  width="100px"
                  height="100px"
                />
              }
            />
          </RadioGroup>
        </FormControl>

        <Button
          variant="container"
          style={{
            padding: "1rem 4rem 1rem 4rem",
            marginTop: "2rem",
            backgroundColor: "#6F1EBC",
            color: "white",
          }}
          onClick={() => {
            navigate("/" + params?.id + "/startTest", {
              state: {
                customerId: location?.state?.customerId,
                responses: location?.state?.responses,
                testType,
                company,
              },
            });
          }}
        >
          Next
        </Button>
      </Grid>
    </div>
  );
};

export default HearingTest;
