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 StartTest = () => {
  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.testType);
  };

  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"
      >
        {location?.state?.testType === "headphone" ? (
          <>
            <h4>Please put the headphones on now</h4>
            <div>
              <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"
              />
            </div>
          </>
        ) : (
          <>
            <div>
              <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"
              />
            </div>
          </>
        )}

        <Button
          variant="container"
          style={{
            marginTop: "2rem",
            backgroundColor: "#6F1EBC",
            color: "white",
          }}
          onClick={() => {
            if (location?.state?.testType === "headphone") {
              navigate("/" + params?.id + "/player", {
                state: {
                  customerId: location?.state?.customerId,
                  responses: location?.state?.responses,
                  testType: location?.state?.testType,
                  company,
                },
              });
            } else if (location?.state?.testType === "voice") {
              navigate("/" + params?.id + "/voiceplayer", {
                state: {
                  customerId: location?.state?.customerId,
                  responses: location?.state?.responses,
                  testType: location?.state?.testType,
                  company,
                },
              });
            }
          }}
        >
          Start The Test
        </Button>
      </Grid>
    </div>
  );
};

export default StartTest;
