import {
  
  Button,
  Stack,
  Typography,
  Avatar,
  Grid,
  useMediaQuery,
  
  Card,
  CardContent,
  //   Tabs,
  //   Tab,
} from "@mui/material";
import { useTheme } from "@mui/material/styles";
import Box from '@mui/material/Box';

import "react-toastify/dist/ReactToastify.css";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-alpine.css";
import avatar from "../../assets/images/avatar.avif";
// import PropTypes from 'prop-types';
import React from "react";
import ArrowForwardIosSharpIcon from "@mui/icons-material/ArrowForwardIosSharp";
import MuiAccordion from "@mui/material/Accordion";
import MuiAccordionSummary from "@mui/material/AccordionSummary";
import MuiAccordionDetails from "@mui/material/AccordionDetails";
import { styled } from "@mui/material/styles";
import { useEffect, useState,Suspense } from "react";
import useAxiosPrivate from "../../utils/useAxiosPrivate";
import { useParams } from "react-router-dom";
import Popup from "./Popup";
import { ToastContainer, toast } from "react-toastify";
import { useFormik } from "formik";
import CircularProgress from '@mui/material/CircularProgress';
// exercise,measurement,diet pop forms
import ExerciseMinuteForm from "./ExerciseMinuteForm";
import BodyMeasurementForm from "./DailyMeasurementForm";
import PatientDietForm from "./PatientDietForm";
import BottomRightDial from './BottomRightDial'
// pop history imports
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";
import Divider from "@mui/material/Divider";
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
import { useNavigate } from 'react-router-dom';
//table
import {
  Table,
  CardMedia,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper,
} from "@mui/material";
import WaterDropIcon from "@mui/icons-material/WaterDrop"; // bloodgroup  icon

import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import { Fullscreen } from "@mui/icons-material";

const Accordion = styled((props) => (
  <MuiAccordion disableGutters elevation={0} square {...props} />
))(({ theme }) => ({
  border: `1px solid ${theme.palette.divider}`,
  "&:not(:last-child)": {
    borderBottom: 0,
  },
  "&::before": {
    display: "none",
  },
}));

const AccordionSummary = styled((props) => (
  <MuiAccordionSummary
    expandIcon={<ArrowForwardIosSharpIcon sx={{ fontSize: "0.9rem" }} />}
    {...props}
  />
))(({ theme }) => ({
  backgroundColor:
    theme.palette.mode === "dark"
      ? "rgba(255, 255, 255, .05)"
      : "rgba(0, 0, 0, .03)",
  flexDirection: "row-reverse",
  "& .MuiAccordionSummary-expandIconWrapper.Mui-expanded": {
    transform: "rotate(90deg)",
  },
  "& .MuiAccordionSummary-content": {
    marginLeft: theme.spacing(1),
  },
}));

const AccordionDetails = styled(MuiAccordionDetails)(({ theme }) => ({
  padding: theme.spacing(2),
  borderTop: "1px solid rgba(0, 0, 0, .125)",
}));

const DoctorDashboard = () => {
  // const [rowData, setRowData] = useState([]);
  const axiosClientPrivate = useAxiosPrivate();
  const [patientinfo, setPatientinfo] = useState({});
  // const [healthparemeter,setHealthparemeter] = useState({});
  const [patientname, setPatientname] = useState("");
  const [idpara, setIdpara] = useState({});
  const [idexercise, setIdexercise] = useState({});
  const [dietpair, setDietpair] = useState({});
  const [parameters, setParameters] = useState([]);
  const [patientexercise, setPatientexercise] = useState([]);
  const [patientdiet, setPatientdiet] = useState([]);
  const [fetchTrigger, setFetchTrigger] = useState(0);
  // const [unitpair,setUnitpair] = useState({});

  // add buttons
  const [showupdate, setShowupdate] = useState(false);
  const [exercises, setExercise] = useState([]);
  const [unit, setUnit] = useState([{}]);
  const [bodyparams, setBodyparams] = useState([]);
  const [nutrient, setNutrient] = useState([]);
  const [patientid, setPatientid] = useState(null);
  const [titlle, setTitle] = useState("Patient Master");
  const [currentForm, setCurrentForm] = useState("ExerciseMinuteForm");
  const [openPopup, setOpenPopup] = useState(false);

  const [bodyparameterpair, setBodyparameterpair] = useState({});

  const [unitpair, setUnitpair] = useState({});

  const [nutrientpair, setNutrientpair] = useState({});

  const [bodyparaunit, setBodyparaunit] = useState({});
  const [paraid, setParaid] = useState({});
  const [paraunitid, setParaunitid] = useState({});
  const [exerciseid, setExerciseid] = useState({});
  const [nutrientidpair, setNutrientidpair] = useState({});

  

  // complain history 
   const [complaintHistory,setComplaintHistory] = useState([]);




  // history model state
  const [open, setOpen] = useState(false);
  const [historyTitle, setHistoryTitle] = useState("");
  const [measurementHistory, setMeasurementHistory] = useState([]);
  
   
  const [dailyParameter, setDailyParameter] = useState([]);
  const [dailyExercise, setDailyExercise] = useState([]);
  const [daillyDiet, setDailyDiet] = useState([]);

  // current consultation 
  const [currentComplain,setCurrentComplain] = useState({});
  const [currentConsultationId,setCurrentConsultationId] = useState();
  
  const [currentMeasurement,setCurrentMeasurement] = useState();


  const [bloodGroup, setBloodGroup] = useState("");

  const [isLoading, setIsLoading] = useState(false);

  const navigate = useNavigate();

  const handleClickOpen = (title) => {
    setOpen(true);
    setHistoryTitle(title);
  };

  const handleClose = () => {
    setOpen(false);
  };

  // const descriptionElementRef = useRef(null);
  // React.useEffect(() => {
  //   if (open) {
  //     const { current: descriptionElement } = descriptionElementRef;
  //     if (descriptionElement !== null) {
  //       descriptionElement.focus();
  //     }
  //   }
  // }, [open]);

  // to calculate the age of a patient
  function calculateAge(dob) {
    if (dob == null) {
      return "";
    }

    const dobDate = new Date(dob);
    const currentDate = new Date();

    let age = currentDate.getFullYear() - dobDate.getFullYear();

    const monthDifference = currentDate.getMonth() - dobDate.getMonth();
    const dayDifference = currentDate.getDate() - dobDate.getDate();

    if (monthDifference < 0 || (monthDifference === 0 && dayDifference < 0)) {
      age--;
    }

    return age;
  }

  // Function to format the date from YYYY-MM-DD to DD-MM-YYYY
  function formatDate(dateString) {
    if (dateString != null || dateString != undefined || dateString != "") {
      const [year, month, day] = dateString.split("-");
      return `${day}-${month}-${year}`;
    }
  }

  // for history date
  const historyFormat = (dateString) => {
    const date = new Date(dateString);
    const day = date.getDate();
    const month = date
      .toLocaleString("default", { month: "long" })
      .toUpperCase();
    const year = date.getFullYear();
    return `${day}-${month}-${year}`;
  };

  // patient display data
  const { encodedId } = useParams();
  const pid = atob(encodedId);
  // alert(pid)
  // const patietnEncodeId = btoa(pid);
  const patietnEncodeId = btoa((JSON.stringify({pid : pid})));
  //  console.log("patient id : ",patientid);
  useEffect(() => {
    const controller = new AbortController();
    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get(`/patients`, {
          signal: controller.signal,
        });
        const items = response.data.content;
        // console.log("patient info : ",items);
        // setRowData(items);

        const patient = items.find((item) => item.id == pid);
        // console.log(" iterator  : ",patient);
        setPatientname(
          patient.patientName +
            "," +
            patient.gender +
            "," +
            calculateAge(patient.dob)
        );
        setBloodGroup(patient.bloodGroup);
        if (patient) {
          // console.log('got a patient with id', id);
          const age = calculateAge(patient.dob);
          const object = {
            "Patient Id": patient.id ? patient.id : "",
            "Patient Name": patient.patientName ? patient.patientName : "",
            "Father Name": patient.fatherName ? patient.fatherName : "",
            DOB: patient.dob ? formatDate(patient.dob) : "",
            Age: age,
            Email: patient.emailId,
          };
          setPatientinfo(object);
          // console.log("getting the object : ",object);
        }
      } catch (err) {
        console.error("Failed to fetch data: ", err);
        // setRowData([]);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [pid, axiosClientPrivate]);

  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get("/units", {
          signal: controller.signal,
        });
        const items = response.data.content;
        // console.log("units :-",items);

        const unitobj = {};
        items.map((item) => {
          unitobj[item.id] = item.unitName;
        });

        setUnitpair(unitobj);
        //  console.log("id name :-",unitobj);
      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, []);

  // body measurement parameter
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get("/measurements", {
          signal: controller.signal,
        });
        const items = response.data.content;
        console.log("body parameter :-",items);

        const idpara = {};
        items.forEach((item) => {
          idpara[item.id] = item.bmName;
        });
        setIdpara(idpara);
      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [axiosClientPrivate]);

  // id diet pair

  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get("/nutrient-masters", {
          signal: controller.signal,
        });
        const items = response.data.content;
        console.log("nutrient master :-", items);

        const iddietpair = {};
        if (items.length > 0) {
          items.forEach((item) => {
            iddietpair[item.id] = item.nutrientName;
          });
        }

        setDietpair(iddietpair);

        console.log("id diet pair :-", iddietpair);
      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [axiosClientPrivate]);

  // id exercise pair

  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get("/exercise-masters", {
          signal: controller.signal,
        });
        const items = response.data.content;
        // console.log("exercise master :-",items);

        const idexercisepair = {};
        if (items.length > 0) {
          items.forEach((item) => {
            idexercisepair[item.id] = item.exerciseName;
          });
        }

        setIdexercise(idexercisepair);

        console.log("id exercise pair :-", idexercisepair);
      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [axiosClientPrivate]);

  
  //patient measurement value
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get(`/patient-measurements`, {
          signal: controller.signal,
        });
        const items = response.data.content;

         console.log("measurement items",items);
         console.log("current consulatation",currentConsultationId);
         

        const currentMeasurement = items
          .filter((item) => item.consultationId == currentConsultationId)
          .map((item) => item.bodyMeasurementValues);

        console.log("patient measurement values",currentMeasurement);

        // const parameter = items.find((item) => item.empId == patientid)
        // const transformData = (data) => {
        //   console.log("Input data:", data);
        //   console.log("idpara:", idpara);
        //   return Object.keys(data).map((key) => ({
        //     label: idpara[Number(key)], // Convert the key to a number
        //     // value: data[key].value + data[key].value[data[key].unitId]
        //     // value: `${data[key].value} ${unitpair[data[key].unitId]}`,
        //     value: `${data[key].value}`,
        //   }));
        // };

        const transformData = (data) => {
          console.log("Input data:", data);
          console.log("idpara:", idpara);

          return Object.keys(data).map((key) => {
            const valueData = data[key];
            const label = idpara[Number(key)]; // Convert the key to a number and map it to a label using idpara
        
            return {
              label: label !== undefined ? label : "Unknown Label", // Fallback if label is undefined
              value: valueData && valueData.value !== undefined && valueData.unitId !== undefined
                ? `${valueData.value} ${unitpair[valueData.unitId]}` // Combine value with unit
                : `${valueData.value}`, // Just use the value if unitId is missing
            };
          });
        };

               const check = transformData(currentMeasurement)
             console.log("current measurement",check);
             
        // setCurrentMeasurement(transformData(currentMeasurement));


        // const historyData = items.filter((item) => item.empId == pid);
        // // console.log(" measurement history data :- ",historyData);
        // if (historyData.length > 0) {
        //   const data = historyData.map((item) => {
        //     return {
        //       date: item.date,
        //       bodyMeasurementValues: transformData(item.bodyMeasurementValues),
        //     };
        //   });
        //   setMeasurementHistory(data);
        //   console.log("history object", data);
        // }

        // const getLatestDataForEmpId = (data, empId) => {
        //   return data.reduce((latest, current) => {
        //     if (current.empId == empId) {
        //       return !latest ||
        //         new Date(current.lastModified) > new Date(latest.lastModified)
        //         ? current
        //         : latest;
        //     }
        //     return latest;
        //   }, null);
        // };
        // const latestData = getLatestDataForEmpId(items, pid);
        // console.log("measurement latest data",latestData);

        // if (latestData.bodyMeasurementValues != null) {
        //   const formattedData = transformData(latestData.bodyMeasurementValues);
        //   setParameters(formattedData);
        //   console.log("parameter array :", formattedData);
        // }
      } catch (err) {
        console.error("Failed to fetch data: ", err);
        // setRowData([]);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [fetchTrigger, pid, axiosClientPrivate, idpara, unitpair,currentConsultationId]);

  //patient Exercise plan
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get(
          "/patient-exercise-plans",
          { signal: controller.signal }
        );
        const items = response.data.content;
        console.log("exercise items", items);

        const getLatestDataForEmpId = (data, empId) => {
          return data.reduce((latest, current) => {
            if (current.empId == empId) {
              return !latest ||
                new Date(current.lastModified) > new Date(latest.lastModified)
                ? current
                : latest;
            }
            return latest;
          }, null);
        };
        const latestData = getLatestDataForEmpId(items, pid);
        console.log("exercise latest data", latestData);

        const transformData = (data) => {
          return Object.keys(data).map((key) => ({
            label: idexercise[Number(key)], // Convert the key to a number
            // value: data[key].value + data[key].value[data[key].unitId]
            value: `${data[key].value} ${unitpair[data[key].unitId]}`,
          }));
        };

        if (latestData.exercisePlanValues != null && latestData != null) {
          const formattedData = transformData(latestData.exercisePlanValues);
          setPatientexercise(formattedData);
          console.log("exercise final value", formattedData);
        }
      } catch (err) {
        console.error("Failed to fetch patient exercise plan: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [fetchTrigger, unitpair, idexercise, pid, axiosClientPrivate]);

  //patient Deit plan
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get("/patient-diet-plans", {
          signal: controller.signal,
        });
        const items = response.data.content;
        console.log("nutrients items", items);

        const getLatestDataForEmpId = (data, empId) => {
          // to get the latest data
          return data.reduce((latest, current) => {
            if (current.empId == empId) {
              return !latest ||
                new Date(current.lastModified) > new Date(latest.lastModified)
                ? current
                : latest;
            }
            return latest;
          }, null);
        };
        const latestData = getLatestDataForEmpId(items, pid);
        console.log("exercise latest data", latestData);

        const transformData = (data) => {
          return Object.keys(data).map((key) => ({
            label: dietpair[Number(key)], // Convert the key to a number
            // value: data[key].value + data[key].value[data[key].unitId]
            value: `${data[key].value} ${unitpair[data[key].unitId]}`,
          }));
        };

        if (latestData.dietPlanDetails != null) {
          const formattedData = transformData(latestData.dietPlanDetails);
          setPatientdiet(formattedData);
          console.log("diet final value", formattedData);
        }
      } catch (err) {
        console.error("Failed to fetch exercise: ", err);
      }
    };

    getAllOhc();
    return () => {
      controller.abort();
    };
  }, [unitpair, dietpair, pid, axiosClientPrivate]);




  // fetching daily measurement data(tracking)
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get("/patient-daily-measurements", {
          signal: controller.signal,
        });
        const items = response.data.content;
        console.log("daily measurement",items);
        
        const getLatestDataForEmpId = (data, empId) => {
          return data.reduce((latest, current) => {
            if (current.empId == empId) {
              return !latest ||
                new Date(current.lastModified) > new Date(latest.lastModified)
                ? current
                : latest;
            }
            return latest;
          }, null);
        };

        const transformData = (data) => {
          return Object.keys(data).map((key) => ({
            label: idpara[Number(key)], // Convert the key to a number
            value: `${data[key].value} ${unitpair[data[key].unitId]}`,
          }));
        }
        const latestData = getLatestDataForEmpId(items, 1);
        if (latestData.bodyMeasurementValues != null) {
          const formattedData = transformData(latestData.bodyMeasurementValues);
          setDailyParameter(formattedData);
          console.log("daily measurement",formattedData);
        }
        
        
        setTimeout(() => {
          setIsLoading(false);
        }, 300);

        console.log("actula fitness data :-", latestData);

      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [axiosClientPrivate,unitpair,idpara]);


  // fetching daily exercise data
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get("/patient-daily-exercises", {
          signal: controller.signal,
        });
        const items = response.data.content;
        
        const getLatestDataForEmpId = (data, empId) => {
          return data.reduce((latest, current) => {
            if (current.empId == empId) {
              return !latest ||
                new Date(current.lastModified) > new Date(latest.lastModified)
                ? current
                : latest;
            }
            return latest;
          }, null);
        };

        const transformData = (data) => {
          return Object.keys(data).map((key) => ({
            label: idexercise[Number(key)], // Convert the key to a number
            // value: data[key].value + data[key].value[data[key].unitId]
            value: `${data[key].value} ${unitpair[data[key].unitId]}`,
          }));
        }
        const latestData = getLatestDataForEmpId(items, 1);
        if (latestData.exerciseValues != null) {
          const formattedData = transformData(latestData.exerciseValues);
          setDailyExercise(formattedData);
        }
        setTimeout(() => {
          setIsLoading(false);
        }, 300);
        console.log("actula exercise data :-", latestData);

      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [axiosClientPrivate,unitpair,idexercise]);


  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

  const [expanded, setExpanded] = useState("panel1");

  const handleChange = (panel) => (event, newExpanded) => {
    setExpanded(newExpanded ? panel : false);
  };

  //   const exerciseData = [
  //     { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
  //     // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
  //     // { name: 'Running', minutes: 30, remarks: 'Cardio' },
  //     // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
  //     // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
  //     // { name: 'Running', minutes: 30, remarks: 'Cardio' },
  //     // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
  //     // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
  //     // { name: 'Running', minutes: 30, remarks: 'Cardio' },
  //     // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
  //     // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
  //     // { name: 'Running', minutes: 30, remarks: 'Cardio' },
  //     // { name: 'Push-ups', minutes: 10, remarks: 'Warm-up' },
  //     // { name: 'Squats', minutes: 15, remarks: 'Strength training' },
  //     // { name: 'Running', minutes: 30, remarks: 'Cardio' },

  //   ];

  // health parameter
  // const data = [
  //   { value: "120cm", label: "Height", bgColor: "#ce93d8" },
  //   { value: "50Kg", label: "Weight", bgColor: "#ffffff", textColor: "#000" },
  //   { value: "22", label: "Bmi", bgColor: "#9e9e9e" },
  //   { value: "120/80", label: "Bp", bgColor: "#000000" },
  //   { value: "72bpm", label: "Pulse", bgColor: "#8bc34a" },
  //   { value: "80%", label: "Health Index", bgColor: "#29b6f6" },
  //   { value: "90 mg/dL", label: "Fbs", bgColor: "#a5d6a7" },
  //   { value: "140 mg/dL", label: "Rbs", bgColor: "#cfd8dc" },
  //   { value: "160 mg/dL", label: "Ppbs", bgColor: "#ffcc80" },
  // ];

  const getTextColor = (bgColor) => {
    return bgColor === "#ffffff" ? "#000000" : "#ffffff";
  };

  const colors = [
    "#ce93d8",
    "#ffffff",
    "#9e9e9e",
    "#000000",
    "#8bc34a",
    "#29b6f6",
    "#a5d6a7",
    "#cfd8dc",
    "#ffcc80",
  ];


  // consultation - fetching current and history  
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {

        setIsLoading(true);
        const response = await axiosClientPrivate.get(
          `/patient-consultations/employee/${pid}`,
          { signal: controller.signal }
        );
        const items = response.data.content;
          console.log("patient consultation data",items);
        
        // patient measurement target 
        const measurementData = (data) => {
          return Object.keys(data).map((key) => ({
            label: idpara[Number(key)], // Convert the key to a number
            // value: data[key].value + data[key].value[data[key].unitId]
            value: `${data[key].value} ${unitpair[data[key].unitId]}`,
          }));
        };
          // patient exercise target
        const exerciseData = (data) => {
          return Object.keys(data).map((key) => ({
            label: idexercise[Number(key)], // Convert the key to a number
            // value: data[key].value + data[key].value[data[key].unitId]
            value: `${data[key].value} ${unitpair[data[key].unitId]}`,
          }));
        };
            // patient diet  target
        const dietData = (data) => {
          return Object.keys(data).map((key) => ({
            label: dietpair[Number(key)], // Convert the key to a number
            // value: data[key].value + data[key].value[data[key].unitId]
            value: `${data[key].value} ${unitpair[data[key].unitId]}`,
          }));
        };


        const historyData = items.map((item)=>{
          return {
            consultationId : item.id,
            date : historyFormat(item.date),
            complaint : item.complaint,
            remark : item.remark,
            patientMeasurement  : measurementData(item.bodyMeasurements),
            patientExercise : exerciseData(item.exercises),
            patientDiet  :  dietData(item.dietPlans)
          };
        })

        // historyData.reverse();
        if(historyData.length > 0){
          historyData.reverse()
          historyData.shift();
          setComplaintHistory(historyData);
        }
        
        console.log('history data',historyData);



            // to get the current complain,date,remark
        const getLatestDataForEmpId = (data, empId) => {
          return data.reduce((latest, current) => {
            if (current.empId == empId) {
              return !latest ||
                new Date(current.lastModified) > new Date(latest.lastModified)
                ? current
                : latest;
            }
            return latest;
          }, null);
        };
        
        const latestData = getLatestDataForEmpId(items, pid);
        setCurrentConsultationId(latestData.id)
        console.log("patient latest complain",latestData);

         const currentComplain = {
            consultationId : latestData.id,
                date : historyFormat(latestData.date),
                complain : latestData.complaint,
                remark : latestData.remark,
        patientMeasurement  : measurementData(latestData.bodyMeasurements),
            patientExercise : exerciseData(latestData.exercises),
               patientDiet  :  dietData(latestData.dietPlans)
         }
        setCurrentComplain(currentComplain);
          setIsLoading(false);
        console.log("patient latest complain",currentComplain);
      }catch (err) {
        console.error("Failed to fetch complain: ", err)
        setIsLoading(false)
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [axiosClientPrivate,idpara,idexercise,dietpair,pid,unitpair,fetchTrigger]);
  
  const consultationDelete = async(consultationId)=>{
    // alert(consultationId);
    if(window.confirm('Are you sure you want to delete this data?')){
      try {
          await axiosClientPrivate.delete(`/patient-consultations/${consultationId}`);
          toast.success("Deleted Successfully!", {
            position: "top-center",
            autoClose : 300
          });
          setFetchTrigger(Prev => Prev+1);
      } catch (error) {
          console.error('Error deleting row:', error);
      }
  }
}

  // if(!currentComplain.length){
  //   setIsLoading(false);
  // }

  const hasCurrentMeasurementData = currentComplain['patientMeasurement'] && currentComplain['patientMeasurement'].length > 0;
  const hasCurrentExerciseData = currentComplain['patientExercise'] && currentComplain['patientExercise'].length > 0;
  const hasCurrentDietData = currentComplain['patientDiet'] && currentComplain['patientDiet'].length > 0;
  

  


  // add buttons

  // exercise plan
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get(
          "/exercise-masters",
          { signal: controller.signal }
        );
        const items = response.data.content;

        setExercise(items);
        const pair = {};
        items.forEach((item) => {
          pair[item.exerciseName] = item.id;
        });

        setExerciseid(pair);
        console.log("exercise and id pair", pair);
      } catch (err) {
        console.error("Failed to fetch exercise: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, []);
  // console.log("jhkhkjh",exercises);
  const exerciseMinuteFormik = useFormik({
    enableReinitialize: true,
    initialValues: {
      exercises: exercises.map((item) => ({
        exercisename: item.exerciseName,
        minutes: "",
        remark: "",
      })),
    },
    // validationSchema: ExerciseMinuteValidationForm, // if you have a validation schema for this form
    onSubmit: async (values, { resetForm }) => {
      const filteredExercises = values.exercises.filter(
        (exercise) => exercise.minutes && exercise.remark
      );
      console.log("filter", filteredExercises);
      const exercisePlanValues = filteredExercises.reduce((acc, param) => {
        acc[exerciseid[param.exercisename]] = {
          value: parseFloat(param.minutes),
          // unitId: paraunitid[param.measurementname],
          remark: param.remark,
        };
        return acc;
      }, {});

      const finalValues = {
        date: getFormattedDate(),
        empId: patientid,
        exercisePlanValues: exercisePlanValues,
      };

      console.log("exercise final json obj", finalValues);

      try {
        const response = await axiosClientPrivate.post(
          "/patient-exercise-plans",
          finalValues
        );
        toast.success("Saved Successfully!", {
          position: "top-center",
        });
        console.log("Response:", response.data);
        resetForm();
        setFetchTrigger((prev) => prev + 1);
      } catch (error) {
        console.log(values);
        console.error("Error:", error);
      }
    },
  });

  // body measurement parameter
  useEffect(() => {
    const controller = new AbortController();

    const getAllOhc = async () => {
      try {
        const response = await axiosClientPrivate.get(
          "/measurements",
          { signal: controller.signal }
        );
        const items = response.data.content;
        console.log("body parameter :-", items);

        const parameter = {};
        const paraid = {};
        const paraunitid = {};
        items.forEach((item) => {
          parameter[item.bmName] = unitpair[item.id];
          paraid[item.bmName] = item.id;
          paraunitid[item.bmName] = item.unitId;
        });
        console.log("check key value parameter", parameter);
        setBodyparameterpair(parameter);
        setParaid(paraid);
        setParaunitid(paraunitid);
        console.log("parameter and id pair", paraid);
        console.log("parameter and unit pair", paraunitid);

        setBodyparams(items);
      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    getAllOhc();

    return () => {
      controller.abort();
    };
  }, [axiosClientPrivate, unitpair]);
  


  function getFormattedDate() {
    const date = new Date();
    const day = String(date.getDate()).padStart(2, "0");
    const month = String(date.getMonth() + 1).padStart(2, "0"); // Months are zero-indexed
    const year = date.getFullYear();
    return `${year}-${month}-${day}`;
  }

  useEffect(() => {
    const controller = new AbortController();

    const fetchNutrientMasters = async () => {
      try {
        const response = await axiosClientPrivate.get("/nutrient-masters", {
          signal: controller.signal,
        });
        const items = response.data.content;
        // console.log("Nutrient masters:", items);

        // const nutrient = {};
        // items.forEach(item => {
        //     nutrient[item.id] = item.nutrientName;
        // });

        setNutrient(items);

        const nutrientpair = {};
        items.forEach((item) => {
          nutrientpair[item.nutrientName] = unitpair[item.unitId];
        });
        setNutrientpair(nutrientpair);

        const nutrient = {};

        items.forEach((item) => {
          nutrient[item.nutrientName] = item.id;
        });
        // console.log("nutrietn and id pair",nutrient);
        setNutrientidpair(nutrient);
      } catch (err) {
        console.error("Failed to fetch data: ", err);
      }
    };

    fetchNutrientMasters();

    return () => {
      controller.abort();
    };
  }, [unitpair, axiosClientPrivate]);

  const patientDietFormik = useFormik({
    enableReinitialize: true,
    initialValues: {
      nutrients: nutrient.map((item) => ({
        nutrientname: item.nutrientName,
        nutrientvalue: "",
        remark: "",
      })),
    },
    // validationSchema: ExerciseMinuteValidationForm, // if you have a validation schema for this form
    onSubmit: async (values, { resetForm }) => {
      console.log("not filter values:", values);
      const filterednutrients = values.nutrients.filter(
        (item) => item.nutrientvalue && item.remark
      );

      const dietPlanDetails = filterednutrients.reduce((acc, param) => {
        acc[nutrientidpair[param.nutrientname]] = {
          value: parseFloat(param.nutrientvalue),
          // unitId: paraunitid[param.measurementname],
          remark: param.remark,
        };
        return acc;
      }, {});

      const finalValues = {
        date: getFormattedDate(),
        empId: patientid,
        dietPlanDetails: dietPlanDetails,
      };
      //  console.log('format ---->:', bodyMeasurementValues);
      console.log("filter values:", finalValues);

      try {
        const response = await axiosClientPrivate.post(
          "/patient-diet-plans",
          finalValues
        );
        toast.success("Saved Successfully!", {
          position: "top-center",
        });
        console.log("Response:", response.data);
        resetForm();
      } catch (error) {
        console.log(values);
        console.error("Error:", error);
      }
    },
  });

  const bodyMeasurementFormik = useFormik({
    enableReinitialize: true,
    initialValues: {
      //  empId : patientid,
      parameters: bodyparams.map((item) => ({
        measurementname: item.bmName,
        measuremenvalue: "",
        remark: "",
      })),
    },
    // validationSchema: ExerciseMinuteValidationForm, // if you have a validation schema for this form
    onSubmit: async (values, { resetForm }) => {
      //  console.log('not filter values:', values);
      const filteredMeasurement = values.parameters.filter(
        (item) => item.measuremenvalue && item.remark
      );

      const bodyMeasurementValues = filteredMeasurement.reduce((acc, param) => {
        acc[paraid[param.measurementname]] = {
          value: parseFloat(param.measuremenvalue),
          // unitId: paraunitid[param.measurementname],
          remark: param.remark,
        };
        return acc;
      }, {});

      const finalValues = {
        date: getFormattedDate(),
        empId: patientid,
        bodyMeasurementValues: bodyMeasurementValues,
      };
      //  console.log('format ---->:', bodyMeasurementValues);
      console.log("filter values:", finalValues);
      try {
        const response = await axiosClientPrivate.post(
          "/patient-measurements",
          finalValues
        );
        toast.success("Saved Successfully!", {
          position: "top-center",
        });
        console.log("Response:", response.data);
        resetForm();
        setFetchTrigger((prev) => prev + 1);
      } catch (error) {
        console.log(finalValues);
        console.error("Error:", error);
      }
    },
  });

  const switchForm = (formName, id) => {
    // alert("patient id "+`${id}`);
    // console.log("patient id ",id);
    setCurrentForm(formName);
    setPatientid(id);
    setOpenPopup(true);
  };

  useEffect(() => {
    if (currentForm === "BodyMeasurementForm") {
      setTitle("Patient Measurement Plan");
    } else if (currentForm === "PatientDietForm") {
      setTitle("Patient Diet Plan");
    } else if (currentForm === "PatientInfoForm") {
      setTitle("Patient Master");
    }
  }, [currentForm]);

  let formikProps;
  switch (currentForm) {
    case "ExerciseMinuteForm":
      formikProps = exerciseMinuteFormik;
      break;
    case "BodyMeasurementForm":
      formikProps = bodyMeasurementFormik;
      break;
    case "PatientDietForm":
      formikProps = patientDietFormik;
      break;
    default:
      break;
  }

  const formComponents = {
    ExerciseMinuteForm: ExerciseMinuteForm,
    BodyMeasurementForm: BodyMeasurementForm,
    PatientDietForm: PatientDietForm,
  };

  const FormComponent = formComponents[currentForm];

  // const useStyles = makeStyles((theme) => ({
  //   tableContainer: {
  //     marginTop: theme.spacing(2), // Maintain margin consistency
  //     overflowX: 'auto', // Enable horizontal scroll for responsive behavior
  //   },
  //   table: {
  //     minWidth: 650, // Set a minimum width for desktop layout
  //   },
  //   tableCell: {
  //     padding: theme.spacing(1), // Adjust cell padding for readability
  //     textAlign: 'center', // Center text alignment
  //     borderBottom: `1px solid ${theme.palette.divider}`, // Add subtle border for visual separation
  //     fontSize: theme.typography.body1.fontSize, // Consistent font size
  //     fontWeight: theme.typography.fontWeightMedium, // Slightly bold for emphasis
  //     '&:nth-child(odd)': { // Alternate row background for better visual hierarchy
  //       backgroundColor: theme.palette.background.default,
  //     },
  //     '&:nth-child(even)': {
  //       backgroundColor: theme.palette.background.paper,
  //     },
  //   },
  // }));

  // const classes = useStyles();

  // const theme = useTheme();
  const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
  const isLargeScreen = useMediaQuery(theme.breakpoints.up("lg"));
  const isxLargeScreen = useMediaQuery(theme.breakpoints.up("xl"));

  




  return (
    <Box
      padding={1}
      // sx={{ backgroundColor: "#e0f7fa" }}//
      sx={{ backgroundColor: "#e0f7fa", height: "100vh", overflowY: "auto" }}
    >
      <ToastContainer />
      <Stack
        // spacing={isLargeScreen  ? 30 : 15}

        direction={isSmallScreen ? "column" : "row"}
        justifyContent="center"
        // justifyContent="space-around"
        spacing={15}
        alignItems="center"
        // display={'flex'}
        // flexWrap={isSmallScreen ? "wrap" : ""}
        padding={1}
        // spacing={8}
      >
        <Box component={'span'}
        sx={{width : '30%'}}
        display={'flex'}
        flexDirection={'column'}
        justifyContent={'center'}
        alignItems={'center'}
        >
          <Avatar
            alt="Profile Picture"
            src={avatar} // replace with actual image path
            sx={{ 
               width: 120, 
               height: 120,
              //  marginLeft: 6,
              //  textAlign :  'center'
               }}
            variant="square"
          />
          <Typography
            variant="h6"
            gutterBottom
            sx={{
              fontWeight: "bold",
              color: "#00796b",
              marginTop: 1,
              backgroundColor: "#b2ebf2",
              borderRadius: 2,
              // width: 160,
              width: "auto",
              padding:1
            }}
            textAlign={"center"}
          >
            {/*RAJESH YADAV*/}
            {patientname}
          </Typography>
          <Typography
            variant="h6"
            gutterBottom
            sx={{
              fontWeight: "bold",
              color: "#00796b",
              marginTop: 1,
              backgroundColor: "#b2ebf2",
              borderRadius: 2,
              width: '50px',
            }}
            textAlign={"center"}
          >
            <WaterDropIcon
              // sx={{ color: 'blue', marginRight: 2 }}
              color="error"
              // fontSize="small"
              fontSize="small"
              sx={{ marginBottom: "4px" }}
            />
            {bloodGroup}
          </Typography>
        </Box>

        <Box
          display={"flex"}
          flexDirection={"column"}
          justifyContent={"center"}
          width={"100%"}
        >
          <Box>
            <Typography
              variant="h5"
              gutterBottom
              textAlign={"center"}
              sx={{
                fontWeight: "bold",
                color: "#00796b",
                marginTop: 0,
                // marginBottom: 5,
                backgroundColor: "#b2ebf2",
                borderRadius: 2,
                width : '100%'
              }}
            >
              Patient Dashboard
            </Typography>
          </Box>

          <Box display={"flex"} flexWrap="wrap" columnGap={3} >
          {currentComplain['patientMeasurement'] && currentComplain['patientMeasurement'].length > 0 ? (
            currentComplain['patientMeasurement'].map((param, index) => (
                <Button
                  key={index}
                  variant="contained"
                  sx={{
                    backgroundColor: colors[index % colors.length],
                    color: getTextColor(colors[index % colors.length]),
                    borderRadius: 0,
                    width: 82,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2">{param.value}</Typography>
                    <Typography>{param.label}</Typography>
                  </Box>
                </Button>
              ))
            ) : (
              <>
                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#ce93d8",
                    // color: getTextColor("#ce93d8"),
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Height</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#ffffff",
                    // color: '#ffffff' || "inherit",
                    color: getTextColor("#ffffff"),
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Weight</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#9e9e9e",
                    // color: '#ffffff' || "inherit",
                    // color: "getTextColor(item.bgColor)",
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Bmi</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#000000",
                    color: getTextColor("#000000"),
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Bp</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#8bc34a",
                    // color: '#ffffff' || "inherit",
                    color: "getTextColor(item.bgColor)",
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Pulse</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#29b6f6",
                    // color: '#ffffff' || "inherit",
                    color: "getTextColor(item.bgColor)",
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Health Index</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#a5d6a7",
                    // color: '#ffffff' || "inherit",
                    color: "getTextColor(item.bgColor)",
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Fbs</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#cfd8dc",
                    // color: '#ffffff' || "inherit",
                    color: "getTextColor(item.bgColor)",
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Rbs</Typography>
                  </Box>
                </Button>

                <Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#ffcc80",
                    borderRadius: 0,
                    width: 80,
                    height: 64,
                    textTransform: "none",
                  }}
                >
                  <Box>
                    <Typography variant="body2"></Typography>
                    <Typography>Ppbs</Typography>
                  </Box>
                </Button>
              </>
            )}
          </Box>

          <Divider sx={{ marginTop: "5px" }} />

          {/* Patient Information Row */}
          <TableContainer
            component={Paper}
            sx={{
              maxWidth: "100%",
              overflowX: "auto",
              backgroundColor: "#e0f7fa",
              display : "flex",
              flexWrap : "wrap"
            }}

          >
            {isSmallScreen ? (
              <Box sx={{ p: 2,display: "flex", flexDirection: "column", gap: 2,width : '100%' }}  >
                {Object.entries(patientinfo).map(([key, value]) => (
                  <Grid container key={key}>
                    <Grid
                      item
                      xs={6}
                      sx={{ fontWeight: "bold", backgroundColor: "#e0f7fa" }}
                    >
                      {key}
                    </Grid>
                    <Grid
                      item
                      xs={6}
                      sx={{ padding: "8px", paddingTop: "10px" }}
                    >
                      {value}
                    </Grid>
                  </Grid>
                ))}
              </Box>
            ) : (
              <Paper sx={{ padding: 2, backgroundColor: "#e0f7fa",width :'100%'}}>
      <Box sx={{ display: "flex", justifyContent: "space-between",mb : 1 }}>
        {/* Table header */}
        <Grid container spacing={2}>
          {Object.keys(patientinfo).map((key) => (
            <Grid item xs={isSmallScreen ? 12 : 2} key={key}>
              <Typography variant="subtitle1" sx={{ fontWeight: "bold", color: "#00796b" }}>
                {key}
              </Typography>
            </Grid>
          ))}
        </Grid>
      </Box>
      <Divider />

      <Box sx={{ display: "flex", justifyContent: "space-between",mt : 2 }}>
        {/* Table content */}
        <Grid container spacing={2}>
          {Object.values(patientinfo).map((value, index) => (
            <Grid item xs={isSmallScreen ? 12 : 2} key={index}>
              <Typography variant="body2" sx={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
                {value}
              </Typography>
            </Grid>
          ))}
        </Grid>
      </Box>
    </Paper>
            )}
          </TableContainer>
        </Box>
      </Stack>

      {/*patient profile and patietn health data*/}
      <Stack
        display={"flex"}
        flexDirection={"column"}
        // mt={2}
        padding={1}
        spacing={8}
        height={'100%'}
      >
        <Box>
          <Stack
            direction={isSmallScreen ? "column" : "row"}
            justifyContent="flex-start"
            alignItems={isSmallScreen ? "start" : "center"}
            spacing={isSmallScreen ? 2 : 'auto'}
            sx={{
              color: "#00796b",
              backgroundColor: "#b2ebf2",
              borderRadius: 2,
              padding: 2,
            }}
          >
            <Typography
              // variant={isxLargeScreen ? "h6" : "h6"}
              gutterBottom
              // textAlign={"left"}
            >
              Last Consultation Date : {currentComplain['date']}
            </Typography>
            <Typography
              // variant={isxLargeScreen ? "h6" : "h6"}
              gutterBottom
              // textAlign="center"
            >
              Last Complaints :{currentComplain['complain']}
            </Typography>
            <Typography
              // variant={isxLargeScreen ? "h6" : "h6"}
              gutterBottom
              // textAlign={"right"}
            >
              Remarks : {currentComplain['remark']}
            </Typography>
            <Box component={'div'}> <Button onClick={()=> navigate(`/ConsultationForm/${btoa((JSON.stringify({cid : currentComplain['consultationId'],pid : pid })))}`) }> <EditNoteRoundedIcon /></Button>
           <Button color="error" onClick={()=> consultationDelete(currentComplain['consultationId'])} > <DeleteSweepRoundedIcon /> </Button> </Box>
          </Stack>

          <Stack
            direction={isSmallScreen ? "column" : "row"}
            justifyContent={isLargeScreen ? "space-around" : "center"}
            spacing={2}
            mt={1}
          >
            <Card
              sx={{
                width: "100%",
                padding: 2,
                borderRadius: "10px",
                boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
                marginBottom: "10px",
                backgroundColor: "#e0f7fa",
                
              }}
              // textAlign="center"
            >
              {/* Display an icon if no image is provided */}
              <Typography textAlign={"center"} variant="h6" color={'#00796b'}>
              Patient Health Parameter
              </Typography>

              <CardContent
                // variant = "stack"
                sx={{
                  // direction : 'row',
                  display: "flex",
                  flexWrap: "wrap",
                  //  justifyContent : 'left',
                  justifyContent: isLoading ? "center" : "flex-start" ,
                  alignItems: "center",
                  gap: 3,
                }}
              >
              {isLoading ? (
                <CircularProgress  sx={{textAlign: 'center',color : "#00796b"}} />
              ) : hasCurrentMeasurementData ? (
                currentComplain['patientMeasurement'].map((item, index) => (
                  <Box
                    variant="body2"
                    sx={{
                      display: "flex",
                      flexDirection: "column",
                    }}
                    key={index}
                  >
                    <span style={{ fontWeight: "bold", color: "#616161" }}>
                      {item.label}
                    </span>
                    <Divider />
                    <span style={{ color: "#424242" }}>{item.value}</span>
                  </Box>
                ))
              ) : (
                <Typography
                  color="textSecondary"
                  style={{ color: theme.palette.grey[500] }}
                  marginLeft={5}
                >
                  No parameters available
                </Typography>
              )}
              </CardContent>
              <Divider />
              <Stack
                //  display={'flex'}
                alignItems={"center"}
                direction={"row"}
                justifyContent={"center"}
                spacing={2}
                mt={1}
              >
                <Typography textAlign={"center"} variant="h6" color={"#00796b"}>
                  Patient Daily Fitness
                </Typography>
               {/*<Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#00796b",
                    "&:hover": {
                      backgroundColor: "#00796b",
                    },
                    height: 28,
                    width: 20,
                    // float : 'right'
                  }}
                  onClick={() => switchForm("BodyMeasurementForm", 1)}
                >
                  Add
                </Button>*/}
              </Stack>
              <CardContent
                // variant = "stack"
                sx={{
                  // direction : 'row',
                  display: "flex",
                  flexWrap: "wrap",
                  //  justifyContent : 'left',
                  // justifyContent: "flex-start",
                    justifyContent: isLoading ? "center" : "flex-start" ,
                    // justifyContent:daillyDiet && daillyDiet.length > 0
                    //   ? "flex-start"
                    //   : "center",
                  alignItems: "center",
                  gap: 3,
                }}
              >
                
                  {isLoading ? (
                    <CircularProgress  sx={{textAlign: 'center',color : "#00796b"}} />
                  ) :  dailyParameter && dailyParameter.length > 0 ? (
                  dailyParameter.map((item, index) => (
                    <Box
                      variant="body2"
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                      }}
                      key={index}
                    >
                      <span style={{ fontWeight: "bold", color: "#616161" }}>
                        {item.label}
                      </span>
                      <Divider />
                      <span style={{ color: "#424242" }}>{item.value}</span>
                    </Box>
                  ))
                ) : (
                  <Typography
                    color="textSecondary"
                    style={{ color: theme.palette.grey[500] }}
                    // marginLeft={5}
                  >
                    No parameters available
                  </Typography>
                )}
              </CardContent>
            </Card>

            <Card
              sx={{
                // width: 600,
                width: "100%",
                padding: 2,
                borderRadius: "10px",
                boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
                marginBottom: "10px",
                backgroundColor: "#e0f7fa",
              }}
              // textAlign="center"
            >
              {/* Display an icon if no image is provided */}
              <Typography textAlign={"center"} variant="h6" color={'#00796b'}>
                Patient Exercise Plan
              </Typography>

              <CardContent
                // variant = "stack"
                sx={{
                  // direction : 'row',
                  display: "flex",
                  flexWrap: "wrap",
                  //  justifyContent : 'left',
                  // justifyContent: "flex-start",
                  justifyContent: isLoading ? "center" : "flex-start" ,
                  alignItems: "center",
                  gap: 3,
                }}
              >
              {isLoading  ? (
                <CircularProgress  sx={{textAlign: 'center',color : "#00796b"}} />
              ) : hasCurrentExerciseData ? (
                currentComplain['patientExercise'].map((item, index) => (
                    <Box
                      variant="body2"
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                      }}
                      key={index}
                    >
                      <span style={{ fontWeight: "bold", color: "#616161" }}>
                        {item.label}
                      </span>
                      <Divider />
                      <span style={{ color: "#424242" }}>{item.value}</span>
                    </Box>
                  ))
                ) : (
                  <Typography
                    color="textSecondary"
                    style={{ color: theme.palette.grey[500] }}
                    marginLeft={5}
                  >
                    No parameters available
                  </Typography>
                )}
              </CardContent>

              <Divider />
              <Stack
                //  display={'flex'}
                alignItems={"center"}
                direction={"row"}
                justifyContent={"center"}
                spacing={2}
                mt={1}
              >
                <Typography textAlign={"center"} variant="h6" color={"#00796b"}>
                  Patient Daily Exercise
                </Typography>
                {/*<Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#00796b",
                    "&:hover": {
                      backgroundColor: "#00796b",
                    },
                    height: 28,
                    width: 20,
                    // float : 'right'
                  }}
                  onClick={() => switchForm("ExerciseMinuteForm", 1)}
                >
                  Add
                </Button>*/}
              </Stack>
              <CardContent
                // variant = "stack"
                sx={{
                  // direction : 'row',
                  display: "flex",
                  flexWrap: "wrap",
                  //  justifyContent : 'left',
                  // justifyContent: "flex-start",
                  justifyContent: isLoading ? "center" : "flex-start" ,
                  // justifyContent:
                  //   daillyDiet && daillyDiet.length > 0
                  //     ? "flex-start"
                  //     : "center",
                  alignItems: "center",
                  gap: 3,
                }}
              >
              {isLoading ? (
                <CircularProgress  sx={{textAlign: 'center',color : "#00796b"}} />
              ) : dailyExercise && dailyExercise.length > 0 ? (
                  dailyExercise.map((item, index) => (
                    <Box
                      variant="body2"
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                      }}
                      key={index}
                    >
                      <span style={{ fontWeight: "bold", color: "#616161" }}>
                        {item.label}
                      </span>
                      <Divider />
                      <span style={{ color: "#424242" }}>{item.value}</span>
                    </Box>
                  ))
                ) : (
                  <Typography
                    color="textSecondary"
                    style={{ color: theme.palette.grey[500] }}
                    // marginLeft={5}
                  >
                    No exercise available
                  </Typography>
                )}
              </CardContent>

            </Card>

            <Card
              sx={{
                // width: 600,
                width: "100%",
                padding: 2,
                borderRadius: "10px",
                boxShadow: "2px 8px 16px rgba(0, 0, 0, 0.2)",
                marginBottom: "10px",
                backgroundColor: "#e0f7fa",
              }}
              // textAlign="center"
            >
              {/* Display an icon if no image is provided */}
              <Typography textAlign={"center"} variant="h6" color={'#00796b'}>
                Patient Diet Plan
              </Typography>

              <CardContent
                // variant = "stack"
                sx={{
                  // direction : 'row',
                  display: "flex",
                  flexWrap: "wrap",
                  //  justifyContent : 'left',
                  // justifyContent: "flex-start",
                  justifyContent: isLoading ? "center" : "flex-start" ,

                  alignItems: "center",
                  gap: 3,
                }}
              >
              {isLoading  ? (
                <CircularProgress  sx={{textAlign: 'center',color : "#00796b"}} />
              ) : hasCurrentDietData ? (
                currentComplain['patientDiet'].map((item, index) => (
                    <Box
                      variant="body2"
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                      }}
                      key={index}
                    >
                      <span style={{ fontWeight: "bold", color: "#616161" }}>
                        {item.label}
                      </span>
                      <Divider />
                      <span style={{ color: "#424242" }}>{item.value}</span>
                    </Box>
                  ))
                ) : (
                  <Typography
                    color="textSecondary"
                    style={{ color: theme.palette.grey[500] }}
                    marginLeft={5}
                  >
                    No parameters available
                  </Typography>
                )}
              </CardContent>

              <Divider />
              <Stack
                //  display={'flex'}
                alignItems={"center"}
                direction={"row"}
                justifyContent={"center"}
                spacing={2}
                mt={1}
              >
                <Typography textAlign={"center"} variant="h6" color={"#00796b"}>
                  Patient Daily Diet 
                </Typography>
                {/*<Button
                  variant="contained"
                  sx={{
                    backgroundColor: "#00796b",
                    "&:hover": {
                      backgroundColor: "#00796b",
                    },
                    height: 28,
                    width: 20,
                    // float : 'right'
                  }}
                  // onClick={()=> switchForm("PatientDietForm",1)}

                  onClick={() => {
                    setOpenDietForm(true);
                  }}
                >
                  Add
                </Button>*/}
              </Stack>
              <CardContent
                // variant = "stack"
                sx={{
                  // direction : 'row',
                  display: "flex",
                  flexWrap: "wrap",
                  //  justifyContent : 'left',
                  // justifyContent: "flex-start",
                  justifyContent:
                    daillyDiet && daillyDiet.length > 0
                      ? "flex-start"
                      : "center",
                  alignItems: "center",
                  gap: 3,
                }}
              >
                {daillyDiet && daillyDiet.length > 0 ? (
                  daillyDiet.map((item, index) => (
                    <Box
                      variant="body2"
                      sx={{
                        display: "flex",
                        flexDirection: "column",
                      }}
                      key={index}
                    >
                      <span style={{ fontWeight: "bold", color: "#616161" }}>
                        {item.label}
                      </span>
                      <Divider />
                      <span style={{ color: "#424242" }}>{item.value}</span>
                    </Box>
                  ))
                ) : (
                  <Typography
                    color="textSecondary"
                    style={{
                      color: theme.palette.grey[500],
                      textAlign: "center",
                    }}
                    // marginLeft={6}
                  >
                    No Diet available
                  </Typography>
                )}
              </CardContent>

            </Card>
          </Stack>
          <Accordion
          sx={{ backgroundColor: '#e0f7fa', marginBottom: 2,mt : 1,border: '0'}}
          
       >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon sx={{ color: '#00796b' }} />}
          aria-controls="panel1-content"
          id="panel1-header"
          // sx={{textAlign : 'center',display : 'flex',justifyContent : 'center'}}
          sx={{
            borderRadius: "10px",
            backgroundColor: '#b2ebf2',
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            '&:hover': {
              backgroundColor: '#80deea',
            },
            '&.Mui-expanded': {
              backgroundColor: '#4dd0e1',
            },
            '& .MuiAccordionSummary-content': {
              fontWeight: 'bold',
              justifyContent: 'center', // Center text horizontally
            },
          }}
        >
        <Typography variant="h5" color={'#00796b'}> Consultation History </Typography>
        </AccordionSummary>
        <AccordionDetails>
        {complaintHistory.map((item, index) => (
        <Accordion
         sx = {{border: 0,mt:'4px'}}
         key={index}
        >
        <AccordionSummary
          expandIcon={<ExpandMoreIcon />}
          aria-controls="panel1a-content"
          id="panel1a-header"
          sx={{
            color : '#00796b',
            borderRadius: "10px",
            backgroundColor: '#b2ebf2',
            '&:hover': {
              backgroundColor: '#80deea',
            },
            '&.Mui-expanded': {
              backgroundColor: '#4dd0e1',
            },
            '& .MuiAccordionSummary-content': {
              fontWeight: 'bold',
              // justifyContent: 'center',
              direction : isSmallScreen ? "column" : "row",
            justifyContent : "space-around",
            alignItems : isSmallScreen ? "start" : "center",
            spacing : isSmallScreen ? 2 : 25
            },
            // direction : isSmallScreen ? "column" : "row",
            // justifyContent : "center",
            // alignItems : isSmallScreen ? "start" : "center",
            // spacing : isSmallScreen ? 2 : 25
          }}
        >

          <Typography textAlign={"left"}>Last Consultation Date : {item.date}</Typography>
          <Typography textAlign={"center"}> Last Complaints : {item.complaint}</Typography>
          <Typography textAlign={"right"}>  Remarks : {item.remark}</Typography>
          <Box component={'div'}> <Button onClick={()=> navigate(`/ConsultationForm/${btoa((JSON.stringify({cid : item.consultationId,pid : pid })))}`) }> <EditNoteRoundedIcon /></Button>
       <Button color="error" onClick={()=> consultationDelete(item.consultationId)} > <DeleteSweepRoundedIcon /> </Button> </Box>
        </AccordionSummary>
        <AccordionDetails
        //   sx={{
        //     '& .MuiAccordionDetails-content': {
        //     direction : isSmallScreen ? "column" : "row",
        //     justifyContent :isLargeScreen ? "space-around" : "center",
        //     spacing :2,
        //     mt :1,
        //   }}
        // }
        sx={{
          display: 'flex',
          flexDirection: isSmallScreen ? 'column' : 'row',
          justifyContent: isLargeScreen ? 'space-around' : 'center',
          spacing: 2,
          mt: 1,
          backgroundColor : "#e0f7fa"
        }}
        
        >
        <Card
        sx={{
          width: "100%",
          padding: 2,
          borderRadius: "10px",
          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
          marginBottom: "10px",
          backgroundColor: "#e0f7fa",
        }}
        // textAlign="center"
      >
        {/* Display an icon if no image is provided */}
        <Typography textAlign={"center"} variant="h6" color={'#00796b'}>
        Patient Health Parameter
        </Typography>

        <CardContent
          // variant = "stack"
          sx={{
            // direction : 'row',
            display: "flex",
            flexWrap: "wrap",
            //  justifyContent : 'left',
            justifyContent: "flex-start",
            alignItems: "center",
            gap: 3,
          }}
        >
        {item.patientMeasurement && item.patientMeasurement.length > 0 ? (
          item.patientMeasurement.map((item, index) => (
              <Box
                variant="body2"
                sx={{
                  display: "flex",
                  flexDirection: "column",
                }}
                key={index}
              >
                <span style={{ fontWeight: "bold", color: "#616161" }}>
                  {item.label}
                </span>
                <Divider />
                <span style={{ color: "#424242" }}>{item.value}</span>
              </Box>
            ))
          ) : (
            <Typography
              color="textSecondary"
              style={{ color: theme.palette.grey[500] }}
              marginLeft={5}
            >
              No parameters available
            </Typography>
          )}
        </CardContent>
      </Card>

      <Card
        sx={{
          // width: 600,
          width: "100%",
          padding: 2,
          borderRadius: "10px",
          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
          marginBottom: "10px",
          marginLeft : 3,
          backgroundColor: "#e0f7fa"
        }}
        // textAlign="center"
      >
        {/* Display an icon if no image is provided */}
        <Typography textAlign={"center"} variant="h6" color={'#00796b'}>
          Patient Exercise Plan
        </Typography>

        <CardContent
          // variant = "stack"
          sx={{
            // direction : 'row',
            display: "flex",
            flexWrap: "wrap",
            //  justifyContent : 'left',
            justifyContent: "flex-start",
            alignItems: "center",
            gap: 3,
          }}
        >
        {item.patientExercise && item.patientExercise.length > 0 ? (
          item.patientExercise.map((item, index) => (
              <Box
                variant="body2"
                sx={{
                  display: "flex",
                  flexDirection: "column",
                }}
                key={index}
              >
                <span style={{ fontWeight: "bold", color: "#616161" }}>
                  {item.label}
                </span>
                <Divider />
                <span style={{ color: "#424242" }}>{item.value}</span>
              </Box>
            ))
          ) : (
            <Typography
              color="textSecondary"
              style={{ color: theme.palette.grey[500] }}
              marginLeft={5}
            >
              No parameters available
            </Typography>
          )}
        </CardContent>
      </Card>

      <Card
        sx={{
          // width: 600,
          width: "100%",
          padding: 2,
          borderRadius: "10px",
          boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
          marginBottom: "10px",
          marginLeft : 3,
          backgroundColor: "#e0f7fa"
        }}
        // textAlign="center"
      >
        {/* Display an icon if no image is provided */}
        <Typography textAlign={"center"} variant="h6" color={'#00796b'}>
          Patient Diet Plan
        </Typography>

        <CardContent
          // variant = "stack"
          sx={{
            // direction : 'row',
            display: "flex",
            flexWrap: "wrap",
            //  justifyContent : 'left',
            justifyContent: "flex-start",
            alignItems: "center",
            gap: 3,
            
          }}
        >
        {item.patientDiet && item.patientDiet.length > 0 ? (
          item.patientDiet.map((item, index) => (
              <Box
                variant="body2"
                sx={{
                  display: "flex",
                  flexDirection: "column",
                }}
                key={index}
              >
                <span style={{ fontWeight: "bold", color: "#616161" }}>
                  {item.label}
                </span>
                <Divider />
                <span style={{ color: "#424242" }}>{item.value}</span>
              </Box>
            ))
          ) : (
            <Typography
              color="textSecondary"
              style={{ color: theme.palette.grey[500] }}
              marginLeft={5}
            >
              No parameters available
            </Typography>
          )}
        </CardContent>

      </Card>
        </AccordionDetails>
      </Accordion>
    ))}
        </AccordionDetails>
      </Accordion>
      <BottomRightDial >
      Add Consultation
      </BottomRightDial>
      <Button
      variant="contained"
      sx={{
        backgroundColor: '#00796b',
        '&:hover': {
          backgroundColor: '#00796b',
        },
        float : 'right'
      }}
      endIcon={<AddCircleOutlineRoundedIcon />}
      onClick={() =>navigate(`/ConsultationForm/${patietnEncodeId}`)}
    >
      Add Consultation
    </Button>
        </Box>
      </Stack>

      <Popup
        showupdate={showupdate}
        setShowupdate={setShowupdate}
        resetForm={formikProps.resetForm}
        handleSubmit={formikProps.handleSubmit}
        openPopup={openPopup}
        setOpenPopup={setOpenPopup}
        title={titlle}
      >
        <FormComponent
          unit={unit}
          nutrientpair={nutrientpair}
          bodyparameterpair={bodyparameterpair}
          exerciseMinuteFormik={exerciseMinuteFormik}
          nutrient={nutrient}
          bodyparams={bodyparams}
          exercises={exercises}
          values={formikProps.values}
          touched={formikProps.touched}
          errors={formikProps.errors}
          handleBlur={formikProps.handleBlur}
          handleChange={formikProps.handleChange}
          setFieldValue={formikProps.setFieldValue}
          handleSubmit={formikProps.handleSubmit}
        />
      </Popup>

      <React.Fragment>
        <Dialog
          open={open}
          onClose={handleClose}
          // scroll={scroll}
          aria-labelledby="scroll-dialog-title"
          aria-describedby="scroll-dialog-description"
        >
          <DialogTitle id="scroll-dialog-title">{historyTitle}</DialogTitle>
          <DialogContent>
            <DialogContentText
              id="scroll-dialog-description"
              // ref={descriptionElementRef}
              tabIndex={-1}
            >
              <Grid container spacing={2}>
                {measurementHistory.map((item, index) => (
                  <React.Fragment key={index}>
                    <Grid item xs={12}>
                      <Typography
                        variant="h6"
                        sx={{ color: "#424242", marginBottom: 1 }}
                      >
                        {historyFormat(item.date)}
                      </Typography>
                    </Grid>
                    {item.bodyMeasurementValues.map((measurement, subIndex) => (
                      <React.Fragment key={subIndex}>
                        <Grid item xs={12} sm={6}>
                          <Typography
                            variant="body2"
                            sx={{ fontWeight: "bold", color: "#616161" }}
                          >
                            {measurement.label}:
                          </Typography>
                        </Grid>

                        <Grid item xs={12} sm={6}>
                          <Typography variant="body2" sx={{ color: "#424242" }}>
                            {measurement.value}
                          </Typography>
                        </Grid>
                      </React.Fragment>
                    ))}
                    {index < measurementHistory.length - 1 && (
                      <Grid item xs={12} sx={{ marginY: 2 }}>
                        <Divider />
                      </Grid>
                    )}
                  </React.Fragment>
                ))}
              </Grid>
            </DialogContentText>
          </DialogContent>
          <DialogActions>
            {/*<Button onClick={handleClose}>Cancel</Button>*/}
            
            <Button
              onClick={handleClose}
              sx={{
                backgroundColor: "#00796b",
                ":hover": { backgroundColor: "#004d40" },
              }}
              size="small"
              variant="contained"
            >
              Ok
            </Button>
          </DialogActions>
        </Dialog>
      </React.Fragment>
    </Box>
  );
};

export default DoctorDashboard;