import {  Button, ButtonGroup, Stack } from '@mui/material';
import Box from '@mui/material/Box';

import { useEffect, useState } from 'react';
import { AgGridReact } from 'ag-grid-react';
import useAxiosPrivate from '../../utils/useAxiosPrivate';
import EditNoteRoundedIcon from '@mui/icons-material/EditNoteRounded';
import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
import Popup from './Popup';
import { useFormik } from "formik";
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
import DownloadIcon from '@mui/icons-material/Download';
import ExcelJS from 'exceljs';
import jsPDF from 'jspdf';
import 'jspdf-autotable';
import PropTypes from "prop-types";
import VisibilityIcon from '@mui/icons-material/Visibility';
import * as Yup from 'yup';
import { Link } from 'react-router-dom';
import { useNavigate } from 'react-router-dom';
const PatientValidationForm = Yup.object({
    // selectpatientcategory: Yup.string().required("Please choose patient category "),
    patientName: Yup.string().required("Please enter patient name"),
    // fhname: Yup.string().required("Please enter father anme "),
//   date: Yup.string().required("Please enter birth date"),
//   genderchoose: Yup.string().required("Please  genderchoose"),
//   blood: Yup.string().required("Please enter  blood"),
//   aadhar: Yup.string().required("Please enter aadhar"),
//   phone: Yup.string().required("Please enter phone number"),
//   village: Yup.string().required("Please enter village"),
//   post: Yup.string().required("Please enter post"),
//   ps: Yup.string().required("Please enter ps"),
//   tehsil:Yup.string().required("Please enter tehsil "),
//   district:Yup.string().required("Please enter district "),
//   state:Yup.string().required("Please enter sat"),
//   pin:Yup.string().required("Please enter pin"),
});

//exercise || diet || measurement icon
// import FitnessCenterIcon from '@mui/icons-material/FitnessCenter';
import SettingsAccessibilityIcon from '@mui/icons-material/SettingsAccessibility';
// import RestaurantIcon from '@mui/icons-material/Restaurant';

import ExerciseMinuteForm from './ExerciseMinuteForm';
import DailyMeasurementForm from './DailyMeasurementForm';
import PatientInfoForm from "./PatientProfileForm"
import PatientDietForm from './PatientDietForm';

import Tooltip, { tooltipClasses } from '@mui/material/Tooltip';
import { styled } from '@mui/material/styles';
import DirectionsRunIcon from '@mui/icons-material/DirectionsRun';
import DashboardIcon from '@mui/icons-material/Dashboard';


const formComponents = {
    PatientInfoForm: PatientInfoForm,
    ExerciseMinuteForm: ExerciseMinuteForm,
    DailyMeasurementForm: DailyMeasurementForm,
    PatientDietForm : PatientDietForm
  };

const PatientList = () => {

    const [rowData, setRowData] = useState([]);
    const [colDefs, setColDefs] = useState([]);
    const [openPopup, setOpenPopup] = useState(false);
    const [viewMode, setViewMode] = useState(false);
    const axiosClientPrivate = useAxiosPrivate();
    const [id, setId] = useState(1);
    const [showupdate, setShowupdate] = useState(false);
    const [fetchTrigger, setFetchTrigger] = useState(0);
    const navigate = useNavigate();
    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('PatientInfoForm');


    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({});

    const patientInfoFormik = useFormik({
        initialValues: {
            selectpatientcategory: "",
            patientName: "",
            fatherName: "",
            dob: "",
            gender: "",
            bloodGroup: "",
            aadharNo: "",
            primaryPhone: "",
            village: "",
            post: "",
            ps: "",
            tehsil: "",
            district: "",
            state: "",
            pinCode: "",
            lastModified: "",
            modifiedBy: ""
        },
        validationSchema: PatientValidationForm,
        onSubmit: async (values, { resetForm }) => {
            try {
                const response = await axiosClientPrivate.post('/patients', values);
                toast.success("Saved Successfully!", {
                    position: "top-center"
                });
                setFetchTrigger(prev => prev + 1);
                console.log('Response:', response.data);
                resetForm();
                // navigate(`/PatientAndContact/${rowData[rowData.length - 1].id + 1}`);
            } catch (error) {
                console.log(values);
                console.error('Error:', error);
            }
        },
    });



    
    
    // console.log("to checkkk",exercises);

    // const cehck = "chekk"


    // const [exercisess] = useState([
    //     { name: 'Push-ups', id: 1 },
    //     { name: 'Sit-ups', id: 2 },
    //     { name: 'Squats', id: 3 },
    //   ]);

    // const dd = 

    // console.log("dd",exercises);

     // exercise plan
    useEffect(() => {
        const controller = new AbortController();
    
        const getAllOhc = async () => {
            
            try {
                const response = await axiosClientPrivate.get('http://localhost:8080/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();
            } 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('http://localhost:8080/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}`;
      }

    // console.log("date",getFormattedDate());

    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();
         } catch (error) {
             console.log(finalValues);
             console.error('Error:', error);
         }
     },
 });


  // nutrient master
 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 switchForm = (formName,id) => {
        // alert("patient id "+`${id}`);
        // console.log("patient id ",id);
        setCurrentForm(formName);
        setPatientid(id)
        setOpenPopup(true);
    };

    // const formikProps = currentForm === 'PatientInfoForm' ? patientInfoFormik : exerciseMinuteFormik;
     
    useEffect(() => {
        if (currentForm === 'ExerciseMinuteForm') {
          setTitle("Patient Exercise Plan");
        } else if(currentForm === 'DailyMeasurementForm'){
            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 'PatientInfoForm':
          formikProps = patientInfoFormik
          break;
        case 'ExerciseMinuteForm':
            formikProps = exerciseMinuteFormik
          break;
        case 'DailyMeasurementForm':
            formikProps = bodyMeasurementFormik
          break;
        case 'PatientDietForm':
            formikProps = patientDietFormik
          break;
        default:
          break;
      }

    // console.log("fomik",exerciseMinuteFormik);
    // console.log("fomik prop",formikProps);

      const FormComponent = formComponents[currentForm];

    // const handleEdit = async (id) => {
    //     alert(id);
    //     try {
    //         const response = await axiosClientPrivate.get(`/patients/${id}`);
    //         console.log(response.data);
    //         setFieldValue("id", response.data.id);
    //         setFieldValue("selectpatientcategory", response.data.selectpatientcategory);
    //         setFieldValue("patientName", response.data.patientName);
    //         setFieldValue("fatherName", response.data.fatherName);
    //         setFieldValue("dob", response.data.dob);
    //         setFieldValue("gender", response.data.gender);
    //         setFieldValue("bloodGroup", response.data.bloodGroup);
    //         setFieldValue("aadharNo", response.data.aadharNo);
    //         setFieldValue("primaryPhone", response.data.primaryPhone);
    //         setFieldValue("village", response.data.village);
    //         setFieldValue("post", response.data.post);
    //         setFieldValue("ps", response.data.ps);
    //         setFieldValue("tehsil", response.data.tehsil);
    //         setFieldValue("district", response.data.district);
    //         setFieldValue("state", response.data.state);
    //         setFieldValue("pinCode", response.data.pinCode);
    //         setFieldValue("lastModified", response.data.lastModified);
    //         setFieldValue("modifiedBy", response.data.modifiedBy);
    //         setId(id);
    //         setShowupdate(true);
    //         setOpenPopup(true);
    //     } catch (error) {
    //         console.error('Error fetching item for edit:', error);
    //     }
    // };

    const handleView = async (id) => {
        // alert(id);
        try {
            const response = await axiosClientPrivate.get(`/patients/${id}`);
            console.log(response.data);
            patientInfoFormik.setFieldValue("id", response.data.id);
            patientInfoFormik.setFieldValue("selectpatientcategory", response.data.selectpatientcategory);
            patientInfoFormik.setFieldValue("patientName", response.data.patientName);
            patientInfoFormik.setFieldValue("fatherName", response.data.fatherName);
            patientInfoFormik.setFieldValue("dob", response.data.dob);
            patientInfoFormik.setFieldValue("gender", response.data.gender);
            patientInfoFormik.setFieldValue("bloodGroup", response.data.bloodGroup);
            patientInfoFormik.setFieldValue("aadharNo", response.data.aadharNo);
            patientInfoFormik.setFieldValue("primaryPhone", response.data.primaryPhone);
            patientInfoFormik.setFieldValue("village", response.data.village);
            patientInfoFormik.setFieldValue("post", response.data.post);
            patientInfoFormik.setFieldValue("ps", response.data.ps);
            patientInfoFormik.setFieldValue("tehsil", response.data.tehsil);
            patientInfoFormik.setFieldValue("district", response.data.district);
            patientInfoFormik.setFieldValue("state", response.data.state);
            patientInfoFormik.setFieldValue("pinCode", response.data.pinCode);
            patientInfoFormik.setFieldValue("lastModified", response.data.lastModified);
            patientInfoFormik.setFieldValue("modifiedBy", response.data.modifiedBy);
            setId(id);

            setViewMode(true);
            setOpenPopup(true);
        } catch (error) {
            console.error('Error fetching item for view:', error);
        }
    };

    const handleUpdate = async (id) => {
        // alert(id);
        const update = patientInfoFormik.values;
        try {
            console.log(patientInfoFormik.values);
            await axiosClientPrivate.put(`/patients/${id}`, update);
            toast.success("Updated Successfully!", {
                position: "top-center",
                autoClose: 3000,
            });
            patientInfoFormik.resetForm();
            setFetchTrigger(prev => prev + 1);
        } catch (err) {
            console.log(patientInfoFormik.values);
            console.log(err);
        }
    }

    const handleDeleteRow = async (id) => {
        // alert(id)
        if (window.confirm('Are you sure you want to delete this data?')) {
            try {
                await axiosClientPrivate.delete(`/patients/${id}`);
                setFetchTrigger(prev => prev + 1);
            } catch (error) {
                console.error('Error deleting row:', error);
            }
        }
    };


    const LightTooltip = styled(({ className, ...props }) => (
        <Tooltip {...props} classes={{ popper: className }} />
      ))(({ theme }) => ({
        [`& .${tooltipClasses.tooltip}`]: {
          backgroundColor: theme.palette.common.white,
          color: 'rgba(0, 0, 0, 0.87)',
          boxShadow: theme.shadows[1],
          fontSize: 11,
        },
      }));


    const CustomActionComponent = ({ id }) => {
        const encodedId = btoa(id);
        CustomActionComponent.propTypes = {
            id: PropTypes.number.isRequired,
        };
        return <div>
            <LightTooltip title="View"  placement="top">
            <Button onClick={() => handleView(id)}><VisibilityIcon /></Button>
            </LightTooltip>
            <LightTooltip title="Edit"  placement="top">
            <Link to={`/PatientAndContact/${id}`}>
            <Button ><EditNoteRoundedIcon /></Button>
            </Link>
            </LightTooltip>
            <LightTooltip title="Delete"  placement="top">
            <Button color="error" onClick={() => handleDeleteRow(id)}><DeleteSweepRoundedIcon /></Button>
            </LightTooltip>
            <LightTooltip title="Patient Consultation"  placement="top">
            <Link to={`/DoctorDashboard/${encodedId}`}>
            <Button><DashboardIcon/></Button>
            </Link>
            </LightTooltip>

            {/*<LightTooltip title="Patient Measurement plan"  placement="top">
            <Button onClick={() => switchForm('BodyMeasurementForm',id)} ><SettingsAccessibilityIcon /></Button>
            </LightTooltip>

            <LightTooltip title="Patient Exercise Plan"  placement="top">
            <Button onClick={() => switchForm('ExerciseMinuteForm',id)} ><DirectionsRunIcon /></Button>
            </LightTooltip>
            <LightTooltip title="Patient Diet Plan"  placement="top">
            <Button onClick={() => switchForm('PatientDietForm',id)} ><RestaurantIcon /></Button>
            </LightTooltip>*/}
        </div>
    };

    const pagination = true;
    const paginationPageSize = 50;
    const paginationPageSizeSelector = [50, 100, 200, 500];

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

        const getAllOhc = async () => {
            try {
                const response = await axiosClientPrivate.get(`/patients?page=0&size=${paginationPageSize}`, { signal: controller.signal });
                const items = response.data.content;
                console.log("patient info : ",items);
                setRowData(items);
                if (items.length > 0) {
                    const headerMappings = {
                        selectpatientcategory: "Patient Category",
                        patientName : "Patient Name",
                        fatherName : "Father Name",
                        dob : "DOB",
                        genderchoose : "Gender Choose",
                        bloodGroup : "Blood Group",
                        aadharNo : "Aadhar Number",
                        primaryPhone : "Primary Phone",
                        village : "Village",
                        post : "Post",
                        ps : "PS",
                        tehsil : "Tehsil",
                        district : "District",
                        pinCode : "Pin Code",
                        emailId : "Email Id",
                        lastModified : "Last Modified",
                        modifiedBy : "Modified By",
                    };

                   const  columns = Object.keys(items[0]).map(key => ({
                        field: key,
                        headerName: headerMappings[key] || key.charAt(0).toUpperCase() + key.slice(1),
                        filter: true,
                        floatingFilter: true,
                        sortable: true,
                        width: key === 'id' ? 100 : undefined,
                        valueGetter: (params) => {
                            if (key === 'dob' && params.data.dob) {
                                const [year, month, day] = params.data.dob.split('-');
                                return `${day}-${month}-${year}`;
                            }
                            return params.data[key];
                        }
                    }));

                    columns.unshift({
                        field: "Actions", cellRenderer: (params) => {
                            const id = params.data.id;
                            return <CustomActionComponent id={id} />
                        },
                        width: 300,
                    });

                    setColDefs(columns);
                }
            } catch (err) {
                console.error("Failed to fetch data: ", err);
                setRowData([]);
            }
        };

        getAllOhc();

        return () => {
            controller.abort();
        };

    }, [fetchTrigger,axiosClientPrivate]);


   


    useEffect(() => {
        const controller = new AbortController();
    
        const getAllOhc = async () => {
            
            try {
                const response = await axiosClientPrivate.get('http://localhost:8080/units', { signal: controller.signal });
                const items = response.data.content;
                    // console.log("units :-",items);
    
    
                    const options = items.map((item)=>{
                      return {label:item.unitName,value:item.id};
                    });
                    setUnit(options);

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

                   setUnitpair(unitobj);
                    console.log(unitpair);
    
            } catch (err) {
                console.error("Failed to fetch data: ", err);
            }
        };
    
        getAllOhc();
    
        return () => {
            controller.abort();
        };
    
    }, []);


    // measurements

    useEffect(() => {
        const controller = new AbortController();
    
        const getAllOhc = async () => {
            
            try {
                const response = await axiosClientPrivate.get('http://localhost:8080/measurements', { signal: controller.signal });
                const items = response.data.content;
                    console.log("measurment name :-",items);
    
                    // const newDiagnosisMap = new Map();
                    // items.forEach(item => newDiagnosisMap.set(item.ailmentSysName, item.id));
                    // setBodysystem(newDiagnosisMap);
    
                    // console.log(diagnosisMap.size);
                    // const ailment = items.map((item)=>{
                    //   // diagnosisMap.set(item.id,item.ailmentSysName);
                    //   return item.ailmentSysName;
                    // });
    
                    // const options = items.map((item)=>{
                    //   return {label:item.unitName,value:item.id};
                    // });
    
                    // setUnit(options);



                    const para = {};
                    items.map((item)=>{
                     para[item.bmName] = unitpair[item.unitId];  
                   });
   
                   setBodyparameterpair(para);
                    console.log("main pppppp",para);
    
            } catch (err) {
                console.error("Failed to fetch data: ", err);
            }
        };
    
        getAllOhc();
    
        return () => {
            controller.abort();
        };
    
    }, [unitpair,axiosClientPrivate]);

    const exportpdf = async () => {
        const doc = new jsPDF();
        const header = [['id', 'pname', "fhname", "date", "genderchoose", "blood", "aadhar", "phone", "village", "post", "ps", "tehsil", "district", "state", "pin"]];
        const tableData = rowData.map(item => [
            item.id,
            // item.selectpatientcategory,
            item.patientName,
            item.fatherName,
            item.dob,
            item.gender,
            item.bloodGroup,
            item.aadharNo,
            item.primaryPhone,
            item.village,
            item.post,
            item.ps,
            item.tehsil,
            item.district,
            item.state,
            item.pinCode,
        ]);
        doc.autoTable({
            head: header,
            body: tableData,
            startY: 20,
            theme: 'grid',
            margin: { top: 30 },
            styles: { fontSize: 5 },
            columnStyles: { 0: { cellWidth: 'auto' }, 1: { cellWidth: 'auto' } }
        //     columnStyles: {
        //     0: { cellWidth: 5 },   // id
        //     2: { cellWidth: 20 },   // pname
        //     3: { cellWidth: 20 },   // fhname
        //     4: { cellWidth: 15 },   // date
        //     5: { cellWidth: 20 },   // genderchoose
        //     6: { cellWidth: 5 },   // blood
        //     7: { cellWidth: 25 },   // aadhar
        //     8: { cellWidth: 15 },   // phone
        //     9: { cellWidth: 15 },   // village
        //     10: { cellWidth: 25 },  // post
        //     11: { cellWidth: 25 },  // ps
        //     12: { cellWidth: 15 },  // tehsil
        //     13: { cellWidth: 15 },  // district
        //     14: { cellWidth: 25 },  // state
        //     // 15: { cellWidth: 15 }   // pin
        // }
        });
        doc.save("PatientList.pdf");
    };

    const exportExcelfile = async () => {
        const workbook = new ExcelJS.Workbook();
        const sheet = workbook.addWorksheet('My Sheet');

        const headerStyle = {
            alignment: { horizontal: 'center' }
        };

        sheet.getRow(1).font = { bold: true };

        const columnWidths = {
            id: 10,
            // selectpatientcategory: 20,
            patientName: 20,
            fatherName: 20,
            dob: 20,
            gender: 20,
            bloodGroup: 20,
            aadharNo: 20,
            primaryPhone: 20,
            village: 20,
            post: 20,
            ps: 20,
            tehsil: 20,
            district: 20,
            state: 20,
            pinCode: 20,
        };

        sheet.columns = [
            { header: "id", key: 'id', width: columnWidths.id, style: headerStyle },
            // { header: "selectpatientcategory", key: 'cpname', width: columnWidths.cpname, style: headerStyle },
            { header: "pname", key: 'patientName', width: columnWidths.patientName, style: headerStyle },
            { header: "fhname", key: 'fatherName', width: columnWidths.fatherName, style: headerStyle },
            { header: "date", key: 'dob', width: columnWidths.dob, style: headerStyle },
            { header: "genderchoose", key: 'gender', width: columnWidths.gender, style: headerStyle },
            { header: "blood", key: 'bloodGroup', width: columnWidths.bloodGroup, style: headerStyle },
            { header: "aadhar", key: 'aadharNo', width: columnWidths.aadharNo, style: headerStyle },
            { header: "phone", key: 'primaryPhone', width: columnWidths.primaryPhone, style: headerStyle },
            { header: "village", key: 'village', width: columnWidths.village, style: headerStyle },
            { header: "post", key: 'post', width: columnWidths.post, style: headerStyle },
            { header: "ps", key: 'ps', width: columnWidths.ps, style: headerStyle },
            { header: "tehsil", key: 'tehsil', width: columnWidths.tehsil, style: headerStyle },
            { header: "district", key: 'district', width: columnWidths.district, style: headerStyle },
            { header: "state", key: 'state', width: columnWidths.state, style: headerStyle },
            { header: "pin", key: 'pinCode', width: columnWidths.pinCode, style: headerStyle },
        ];

        rowData.map(product => {
            sheet.addRow({
                id: product.id,
                // selectpatientcategory: product.selectpatientcategory,
                patientName: product.patientName,
                fatherName: product.fatherName,
                dob: product.dob,
                gender: product.gender,
                bloodGroup: product.bloodGroup,
                aadharNo: product.aadharNo,
                primaryPhone: product.primaryPhone,
                village: product.village,
                post: product.post,
                ps: product.ps,
                tehsil: product.tehsil,
                district: product.district,
                state: product.state,
                pinCode: product.pinCode,
            })
        });

        workbook.xlsx.writeBuffer().then(data => {
            const blob = new Blob([data], {
                type: "application/vnd.openxmlformats-officedocument.spreadsheet.sheet",
            });
            const url = window.URL.createObjectURL(blob);
            const anchor = document.createElement('a');
            anchor.href = url;
            anchor.download = 'PatientList.xlsx';
            anchor.click();
        })
    }

   

    return (
        <>
            <ToastContainer />
            <Box
                className="ag-theme-quartz"
                // style={{ height: 500 }}
                style={{ height: "78vh" }}
            >
                <Stack sx={{ display: 'flex', flexDirection: 'row' }} marginY={1} paddingX={1}>
                    <ButtonGroup variant="contained" aria-label="Basic button group">
                        <Button variant="contained" endIcon={<AddCircleOutlineRoundedIcon />} onClick={() => switchForm('PatientInfoForm')} >Add New</Button>
                        <Button variant="contained" onClick={exportpdf} color="success" endIcon={<PictureAsPdfIcon />}>PDF</Button>
                        <Button variant="contained" onClick={() => exportExcelfile()} color="success" endIcon={<DownloadIcon />}>Excel</Button>
                    </ButtonGroup>
                </Stack>

                <Box
      // className="ag-theme-alpine"
      style={{
        height: '100%', // Set the height
        width: '100%'    // Set the width
      }}
    >
                <AgGridReact
                    rowData={rowData}
                    columnDefs={colDefs}
                    animateRows={true}
                    pagination={pagination}
                    paginationPageSize={paginationPageSize}
                    paginationPageSizeSelector={paginationPageSizeSelector}
                />
                </Box>
            </Box>

            <Popup showupdate={showupdate} id={id} handleUpdate={handleUpdate} setShowupdate={setShowupdate} resetForm={formikProps.resetForm} handleSubmit={formikProps.handleSubmit} openPopup={openPopup} setOpenPopup={setOpenPopup} title={titlle} viewMode={viewMode} setViewMode={setViewMode}>
                <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} viewMode={viewMode} />
                
                {/*{currentForm === 'patientInfo' && (
                    <PatientInfoForm  PatientInfoForm
                      values={values}
                      touched={touched}
                      errors={errors}
                      handleBlur={handleBlur}
                      handleChange={handleChange}
                      setFieldValue={setFieldValue}
                      handleSubmit={handleSubmit}
                      viewMode={viewMode}
                    />
                  )}
                  {currentForm === 'exerciseplan' && (
                    <ExerciseMinuteList
                      values={values}
                      touched={touched}
                      errors={errors}
                      handleBlur={handleBlur}
                      handleChange={handleChange}
                      setFieldValue={setFieldValue}
                      handleSubmit={handleSubmit}
                      viewMode={viewMode}
                    />
                  )}
                  {currentForm === 'measurementplan' && (
                    <BodyMeasurementList
                      values={values}
                      touched={touched}
                      errors={errors}
                      handleBlur={handleBlur}
                      handleChange={handleChange}
                      setFieldValue={setFieldValue}
                      handleSubmit={handleSubmit}
                      viewMode={viewMode}
                    />
                  )}*/}
            </Popup>
        </>
    );
};

export default PatientList;