// import React, { useRef, useCallback } from "react";
// import {
//   Chart as ChartJS,
//   CategoryScale,
//   LinearScale,
//   PointElement,
//   LineElement,
//   Title,
//   Tooltip,
//   Legend,
// } from "chart.js";
// import { Line } from "react-chartjs-2";
// import { useLocation, useNavigate, useParams } from "react-router-dom";
// import {
//   Avatar,
//   Box,
//   Button,
//   Card,
//   CircularProgress,
//   Grid,
// } from "@mui/material";
// import { toPng } from "html-to-image";
// import mediaService from "../services/istar/MediaService";
// import UserResponseService from "../services/istar/UserResponseService";
// const S3URL = "https://istar-bucket.s3.ap-southeast-2.amazonaws.com/";

// ChartJS.register(
//   CategoryScale,
//   LinearScale,
//   PointElement,
//   LineElement,
//   Title,
//   Tooltip,
//   Legend
// );

// export const options = {
//   responsive: true,
//   plugins: {
//     legend: {
//       position: "top",
//       display: false,
//     },
//     title: {
//       display: true,
//       text: "Test Result",
//     },
//   },
//   scales: {
//     y: {
//       min: 0,
//       max: 100,
//       ticks: {
//         stepSize: 20,
//       },
//       title: { display: true, text: "Frequency in db" },
//     },
//     x: {
//       ticks: {
//         // Include a dollar sign in the ticks
//         callback: function (value, index, ticks) {
//           // console.log(value, index, ticks);
//           if (index === 0) {
//             return "500Hz";
//           } else if (index === 1) {
//             return "1000Hz";
//           } else if (index === 2) {
//             return "2000Hz";
//           } else if (index === 3) {
//             return "3000Hz";
//           } else if (index === 4) {
//             return "4000Hz";
//           } else if (index === 5) {
//             return "6000Hz";
//           }
//         },
//         // color: ["black", "red", "blue", "yellow", "pink", "red"],
//       },
//     },
//   },
// };

// const labels = ["500 f", "1000 f", "2000 f", "3000 f", "4000 f", "6000 f"];

// export default function TestGraph() {
//   const navigate = useNavigate();
//   const location = useLocation();
//   const params = useParams();
//   console.log("LOCATION: ", location);
//   const [result, setResult] = React.useState(location?.state?.result);
//   const [company, setCompany] = React.useState(location?.state?.company);
//   const [isLoading, setIsLoading] = React.useState(false);
//   const [isSubmitted, setIsSubmitted] = React.useState(false);
//   const [buttonDisabled, setButtonDisabled] = React.useState(true);

//   const ref = useRef(null);

//   const handleStart = () => {
//     navigate(`/${params?.id}/`);
//   };

//   const data = {
//     labels,
//     datasets: [
//       {
//         label: "Left Hearing",
//         data: result.leftEar,
//         borderColor: "rgb(255, 99, 132)",
//         backgroundColor: "rgba(255, 99, 132, 0.5)",
//       },
//       {
//         label: "Right Hearing",
//         data: result.rightEar,
//         borderColor: "rgb(53, 162, 235)",
//         backgroundColor: "rgba(53, 162, 235, 0.5)",
//       },
//     ],
//   };

//   const onButtonClick = () => {
//     if (!isSubmitted) {
//       console.log("Calling", ref, !isSubmitted);
//       if (ref.current === null) {
//         return;
//       }
//       // setButtonDisabled(true);
//       setIsSubmitted(true);
//       setIsLoading(true);
//       console.log("Here", location?.state?.finalData);

//       toPng(ref.current, { cacheBust: true })
//         .then((dataUrl) => {
//           // console.log("DataUrl: ", dataUrl);
//           mediaService
//             .uploadBase64Media(dataUrl, "image/PNG", "abc.png")
//             .then((graphUrlKey) => {
//               console.log("graphUrlKey", graphUrlKey);
//               UserResponseService.submitResponse({
//                 ...location?.state?.finalData,
//                 testGraph: S3URL + graphUrlKey,
//               })
//                 .then((res) => {
//                   setButtonDisabled(false);
//                   console.log("Final Response: ", res);
//                 })
//                 .catch((err) => {})
//                 .finally(() => {
//                   setIsLoading(false);
//                 });
//             });
//         })
//         .catch((err) => {
//           console.log(err);
//         });
//     }
//   };

//   // React.useEffect(() => {
//   //   // console.log("In useeffect", ref);

//   //   const id = setTimeout(onButtonClick, 2000);
//   //   return () => clearInterval(id);
//   // }, [ref]);

//   // if (isLoading) {
//   //   return (

//   //   );
//   // }

//   return (
//     <>
//       {isLoading && (
//         <Grid
//           container
//           direction="row"
//           justifyContent="center"
//           alignItems="center"
//         >
//           <Box sx={{ display: "flex" }}>
//             <CircularProgress />
//           </Box>
//         </Grid>
//       )}
//       {/* <div ref={ref}>
//         <img
//           src="https://istar-bucket.s3.ap-southeast-2.amazonaws.com/istar/2bff2c10-c714-11ed-a294-616cbf9fc9fbhomeImage.png"
//           width="100%"
//           height="100%"
//         />
//       </div> */}
//       <div>
//         <Grid
//           container
//           direction="column"
//           justifyContent="center"
//           alignItems="center"
//           style={{ marginTop: "1rem" }}
//         >
//           <Avatar
//             src={company?.logo}
//             alt={company?.name}
//             style={{ marginBottom: "1rem", width: 100, height: 100 }}
//           />
//         </Grid>
//         <Grid
//           container
//           direction="column"
//           justifyContent="center"
//           alignItems="center"
//           spacing={2}
//         >
//           {/* <div > */}
//           <Grid item lg={4} md={4} sm={12} xs={12} ref={ref}>
//             <Card sx={{ px: 3, py: 2, mb: 3 }}>
//               <Line options={options} data={data} />
//             </Card>
//           </Grid>
//           {/* </div> */}

//           <Grid item lg={12} md={12} sm={12} xs={12}>
//             <p>
//               Thank you for completing the Hearing Test. A member of our team
//               will contact you in the next 24 - 48 hours to discuss the results
//             </p>
//           </Grid>
//           <Button
//             color="primary"
//             variant="contained"
//             disabled={buttonDisabled}
//             onClick={(e) => {
//               e.preventDefault();
//               navigate(`/${params.id}`);
//             }}
//           >
//             Go to home
//           </Button>
//         </Grid>
//         {/* <button onClick={onButtonClick}>Click me</button> */}
//       </div>
//     </>
//   );
// }

// import React from "react";
// import {
//   LineChart,
//   Line,
//   XAxis,
//   YAxis,
//   CartesianGrid,
//   Tooltip,
//   Legend,
// } from "recharts";

// const data = [
//   { x: 125, y: 20 },
//   { x: 250, y: 40 },
//   { x: 500, y: 10 },
//   { x: 1000, y: 80 },
//   { x: 2000, y: 100 },
//   { x: 4000, y: 120 },
//   { x: 8000, y: 140 },
// ];

// const CustomizedAxisTick = (props) => {
//   const { x, y, payload } = props;

//   return (
//     <g transform={`translate(${x},${y})`}>
//       <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">
//         {payload.value}
//       </text>
//     </g>
//   );
// };

// const TestGraph = () => {
//   return (
//     <LineChart width={800} height={400} data={data}>
//       <XAxis dataKey="x" tick={<CustomizedAxisTick />} />
//       <YAxis
//         domain={[-10, 120]}
//         ticks={[-20, -10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]}
//       />
//       <CartesianGrid strokeDasharray="3 3" />
//       <Tooltip />
//       <Legend />
//       <Line
//         type="monotone"
//         dataKey="y"
//         stroke="#66152e"
//         strokeWidth={2}
//         dot={{ stroke: "#66152e", strokeWidth: 2, r: 4 }}
//       />
//     </LineChart>
//   );
// };

// export default TestGraph;

// import React from "react";
// import {
//   LineChart,
//   Line,
//   XAxis,
//   YAxis,
//   CartesianGrid,
//   Tooltip,
//   Legend,
//   ReferenceArea,
//   Label,
// } from "recharts";

// const data = [
//   { x: 125, y: 20 },
//   { x: 250, y: 40 },
//   { x: 500, y: 60 },
//   { x: 1000, y: 80 },
//   { x: 2000, y: 100 },
//   { x: 4000, y: 120 },
//   { x: 8000, y: 140 },
// ];

// const CustomizedAxisTick = (props) => {
//   const { x, y, payload } = props;

//   return (
//     <g transform={`translate(${x},${y})`}>
//       <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">
//         {payload.value}
//       </text>
//     </g>
//   );
// };

// const LineGraph = () => {
//   const referenceAreas = [
//     { y1: -10, y2: 20, color: "#664e15" },
//     { y1: 20, y2: 40, color: "#2b6615" },
//     { y1: 40, y2: 55, color: "#1f1566" },
//     { y1: 55, y2: 70, color: "#591147" },
//     { y1: 70, y2: 90, color: "#ff0000" },
//     { y1: 90, y2: 120, color: "#ff3399" },
//   ];

//   return (
//     <LineChart width={800} height={400} data={data}>
//       <XAxis dataKey="x" tick={<CustomizedAxisTick />} />
//       <YAxis
//         domain={[-10, 120]}
//         ticks={[-10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]}
//       >
//         {referenceAreas.map((area, index) => (
//           <Label
//             key={index}
//             value={area.label}
//             position="insideRight"
//             style={{ fill: "#fff", textAnchor: "middle" }}
//             offset={10}
//           />
//         ))}
//       </YAxis>
//       <CartesianGrid strokeDasharray="3 3" />
//       <Tooltip />
//       <Legend />

//       {referenceAreas.map((area, index) => (
//         <ReferenceArea
//           key={index}
//           y1={area.y1}
//           y2={area.y2}
//           fill={area.color}
//           fillOpacity={0.3}
//         />
//       ))}

//       <Line
//         type="monotone"
//         dataKey="y"
//         stroke="#8884d8"
//         strokeWidth={2}
//         dot={{ stroke: "#8884d8", strokeWidth: 2, r: 4 }}
//       />
//     </LineChart>
//   );
// };

// export default LineGraph;

import { Grid } from "@mui/material";
import React from "react";
import {
  LineChart,
  Line,
  XAxis,
  YAxis,
  CartesianGrid,
  Tooltip,
  Legend,
  ReferenceArea,
} from "recharts";

const data = [
  { x: 125, y1: 20, y2: 30 }, // Added y2 value for the second line
  { x: 250, y1: 40, y2: 35 }, // Added y2 value for the second line
  { x: 500, y1: 60, y2: 55 }, // Added y2 value for the second line
  { x: 1000, y1: 80, y2: 65 }, // Added y2 value for the second line
  { x: 2000, y1: 100, y2: 70 }, // Added y2 value for the second line
  { x: 4000, y1: 120, y2: 75 }, // Added y2 value for the second line
  { x: 8000, y1: 10, y2: 50 }, // Added y2 value for the second line
];

const CustomizedCircle = (props) => {
  const { cx, cy, stroke, payload, value } = props;
  return (
    <svg
      x={cx - 2}
      y={cy - 6}
      width={100}
      height={100}
      fill="black"
      viewBox="0 0 1024 1024"
      stroke={10}
    >
      <circle
        cx="50"
        cy="50"
        r="45"
        fill="none"
        stroke="black"
        stroke-width="8"
      />
      {/* <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="10" />
      <line x1="10" y1="90" x2="90" y2="10" stroke="black" stroke-width="10" /> */}
    </svg>
  );
};

const CustomizedCross = (props) => {
  const { cx, cy, stroke, payload, value } = props;
  return (
    <svg
      x={cx - 1}
      y={cy - 5}
      width={100}
      height={100}
      fill="black"
      viewBox="0 0 1024 1024"
      stroke={10}
    >
      <line x1="10" y1="10" x2="90" y2="90" stroke="black" stroke-width="10" />
      <line x1="10" y1="90" x2="90" y2="10" stroke="black" stroke-width="10" />
    </svg>
  );
};

const LineGraph = () => {
  const referenceAreas = [
    { y1: -10, y2: 25, color: "#84BC54", label: "Normal" },
    { y1: 25, y2: 40, color: "#F08F23", label: "Wild" },
    { y1: 40, y2: 55, color: "#E85914", label: "Moderate" },
    { y1: 55, y2: 70, color: "#DD3C10", label: "Moderate Severe" },
    { y1: 70, y2: 90, color: "#AE0E16", label: "Severe" },
    { y1: 90, y2: 120, color: "#932288", label: "Very Severe" },
  ];
  const renderLegend = () => {
    return (
      <ul style={{ listStyleType: "none", padding: 0 }}>
        {referenceAreas.map((area, index) => (
          <li
            key={index}
            style={{
              display: "flex",
              alignItems: "center",
              marginBottom: "5px",
            }}
          >
            <div
              style={{
                width: "12px",
                height: "12px",
                backgroundColor: area.color,
                marginRight: "5px",
              }}
            />
            <span>{area.label}</span>
          </li>
        ))}
      </ul>
    );
  };

  return (
    <div style={{ display: "flex", flexDirection: "row" }}>
      <div style={{ display: "flex", flexDirection: "column" }}>
        {renderLegend()}
      </div>
      <LineChart width={700} height={500} data={data}>
        <XAxis dataKey="x" />
        <YAxis
          domain={[-10, 120]}
          ticks={[-10, 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110, 120]}
        />
        <CartesianGrid strokeDasharray="3 3" />
        {/* <Tooltip /> */}
        <Legend
          content={() => {
            return (
              <Grid
                container
                direction="row"
                justifyContent="space-around"
                alignItems="center"
              >
                <p style={{ color: "blue", fontWeight: "bold" }}>Left Ear X</p>
                <p style={{ color: "red", fontWeight: "bold" }}>Right Ear O</p>
              </Grid>
            );
          }}
        />

        {referenceAreas.map((area, index) => (
          <ReferenceArea
            key={index}
            y1={area.y1}
            y2={area.y2}
            fill={area.color}
            // fillOpacity={0.3}
          />
        ))}

        <Line
          type="monotone"
          dataKey="y1"
          // stroke="blue"
          stoke="#82ca9d"
          strokeWidth={2}
          // dot={{ stroke: "#8884d8", strokeWidth: 2, r: 4 }}
          dot={<CustomizedCircle />}
        />

        {/* Second line */}
        <Line
          type="monotone"
          dataKey="y2"
          stoke="#82ca9d"
          // stroke="red"
          strokeWidth={2}
          // dot={{ stroke: "#82ca9d", strokeWidth: 1, r: 4 }}
          dot={<CustomizedCross />}
        />
      </LineChart>
    </div>
  );
};

export default LineGraph;
