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 ImportExportRoundedIcon from '@mui/icons-material/ImportExportRounded';
import AddCircleOutlineRoundedIcon from '@mui/icons-material/AddCircleOutlineRounded';
// import Popup from './Popup';
// import AmbulanceForm from './AmbulanceForm';
//import { ambulanceForm } from './Validationform';
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 * as Yup from 'yup';
import { controllers } from 'chart.js';
// import { Label } from '@mui/icons-material';

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 Typography from "@mui/material";
import Typography from '@mui/material/Typography';
import CancelRoundedIcon from "@mui/icons-material/CancelRounded";
import Input from "../common/Input";
import SingleSelect from '../common/SingleSelect';
import DeleteIcon from '@mui/icons-material/Delete';


// const ambulanceForm = Yup.object({
//     ambulancenumber: Yup.string().required("Please enter ambulance Number"),
//     ambulanceform: Yup.string().required("Please enter ambulance Form "),
//     ambulances:Yup.string().required("Please enter ambulances "),
//     cardiacs: Yup.string().required("Please enter cardiacs "),  
//   });

const AmbulanceList = () => {


    const [rowData, setRowData] = useState([]);

    const [colDefs, setColDefs] = useState([]);

    const [openPopup, setOpenPopup] = useState(false);

    const axiosClientPrivate = useAxiosPrivate();

    const [id,setId] = useState(1);

    const [showupdate,setShowupdate] = useState(false);

    const [fetchTrigger, setFetchTrigger] = useState(0);

    const [categoryData,setCategoryDate] = useState([]);
    const [categoryNameId,setCategoryNameId] = useState();
    const [categoryIdName,setCategoryIdName] = useState();

    const [ohcs,setOhcs] = useState([]);
    const [ohcNameId,setOhcNameId] = useState();
    const [ohcIdName,setOhcIdName] = useState();

    const initialValues = {
        category : [
            {
            ambulanceName: "",
            ambulanceNumber: "",
            ohcTypeId:"",
            ambulanceCategoryId: ""
            }
        ]
      
      };

    //   const ohcs  = [
    //     { label: "ohc1", id: 1 },
    //     { label: "ohc2", id: 2 }
    //   ]


      const {
        values,
        touched,
        errors,
        handleBlur,
        handleChange,
        setFieldValue,
        handleSubmit,
        getFieldProps,
        resetForm,
      } = useFormik({
        initialValues: initialValues,
        // validationSchema: ambulanceForm,
        // onSubmit: (values, action) => {
        //     // values.category[]

        //     const changeData = values.category.map((item)=>({
        //         ...item,
        //         ohcTypeId :  item.ohcTypeId.id,
        //         ambulanceCategoryId : item.ambulanceCategoryId.id
        //     }))

        //     console.log("changes data",changeData);
        //     action.resetForm();
        //   },
        onSubmit: async (values, {resetForm}) => {
            // console.log("values",values);
        try {
            const changeData = values.category.map((item)=>({
                ...item,
                ohcTypeId :  ohcNameId[item.ohcTypeId],
                ambulanceCategoryId : categoryNameId[item.ambulanceCategoryId]
            }))
            
            // console.log("changes data",changeData);
            const response = await axiosClientPrivate.post('/ambulance-details', changeData);
            toast.success("Saved Successfully!",{
                position:"top-center",
                autoClose : 500
             }); 
                   // getting id(key,value) of last index
        setFetchTrigger(prev => prev+1);
            console.log('Response:', response.data);
            resetForm();
          } catch (error) {
            // console.log(values.category);
            console.error('Error:', error);
          }
        },
      });



      const handleEdit = async (id) => {
        // alert(id);
        try {

        //     const response1 = await axiosClientPrivate.get('/ambulance-categories');
        //     const items1 = response1.data.content;
        //     // console.log("item1",items1);
        //     const ambulancePair = {};
        //     const ambuNameIdPair = {}
        //     const ambulanceData = items1.map((item)=>{
        //          ambuNameIdPair[item.ambulanceCategory] = item.id
        //          ambulancePair[item.id] = item.ambulanceCategory
        //     })
        //     setCategoryPair(ambuNameIdPair)
            
        //     const response2 = await axiosClientPrivate.get('/ohcs');
        //     const items2 = response2.data.content;
        //         const ohcsPair = {}
        //         const ohcNameIdPair = {}
        //     const ohcData = items2.map((item)=>{
        //         ohcNameIdPair[item.ohcName] = item.id,
        //         ohcsPair[item.id] = item.ohcName
        //    })

        //    setOhcPair(ohcNameIdPair)
                


          const response = await axiosClientPrivate.get(`/ambulance-details/${id}`);
           const items  = response.data;
            //  console.log("edit ambulance",items);
             
            //  const changeData = {
            //     ...items,
            //     ambulanceCategoryId: ambulancePair[items.ambulanceCategoryId],
            //     // ambulanceCategoryId: {lable : ambuNameIdPair[items.ambulanceCategoryId],id : items.id},
            //     ohcTypeId: ohcsPair[items.ohcTypeId]
            //     // ohcTypeId: {lable : ohcNameIdPair[items.ohcTypeId],id : items.id},
            //   };
              

        //   console.log("edit change data",changeData);

            setFieldValue(`category[${0}].id`,items.id);
            // setFieldValue("id",changeData.id);
            setFieldValue(`category[${0}].ambulanceName`,items.ambulanceName);
            setFieldValue(`category[${0}].ambulanceNumber`,items.ambulanceNumber);
            setFieldValue(`category[${0}].ohcTypeId`, ohcIdName[items.ohcTypeId]);
            setFieldValue(`category[${0}].ambulanceCategoryId`, categoryIdName[items.ambulanceCategoryId]);
            // console.log("values",values);
            
          setId(id);
          setShowupdate(true);
          setOpenPopup(true);
        } catch (error) {
          console.error('Error fetching item for edit:', error);
        }
      };

      const handleUpdate = async (id)=> {
        // alert(id);
        // console.log("update value",values);
    
        // const changeData = {values.category.map((item)=>({
        //     ...item,
        //     ohcTypeId :  item.ohcTypeId.id,
        //     ambulanceCategoryId : item.ambulanceCategoryId.id
        // }))

        const updataData = {
            id: values.category[0].id,
            ambulanceName: values.category[0].ambulanceName,
            ambulanceNumber: values.category[0].ambulanceNumber,
            ohcTypeId: ohcNameId[values.category[0].ohcTypeId],
            ambulanceCategoryId : categoryNameId[values.category[0].ambulanceCategoryId],
        }
        console.log("update object",updataData);
        
        // const update = values;
        try{
            //  console.log(values);
             await axiosClientPrivate.put(`/ambulance-details/${id}`,updataData);
             toast.success("Updated Successfully!",{
                position:"top-center",
                autoClose: 500,
             });
             resetForm();
            //  setRowData(rowData => [...rowData,values]);
            setFetchTrigger(prev => prev+1);
        }
        catch(err){
            // console.log(updataData);
            console.log(err);
        }
      }


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

   const CustomActionComponent = ({id}) => {
    CustomActionComponent.propTypes = {
        id: PropTypes.number.isRequired,
      };
    return <div> <Button onClick={() =>  handleEdit(id)} > <EditNoteRoundedIcon /></Button>
       <Button color="error" onClick={() => handleDeleteRow(id)}> <DeleteSweepRoundedIcon /> </Button> </div>

};

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

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

        const getAllOhc = async () => {
            // const response1 = await axiosClientPrivate.get('ambulance-categories', { signal: controller.signal });
            // const items1 = response1.data.content;
            // // console.log("item1",items1);
            // if(items1.length > 0){
            //     const ambulanceNameIdPair = {};
            //     const ambulanceIdNamePair = {};
            // const ambulanceData = items1.map((item)=>{
            //     ambulanceNameIdPair[item.ambulanceCategory] = item.id
            //     ambulanceIdNamePair[item.id] = item.ambulanceCategory
            // })
            // setCategoryNameId(ambulanceNameIdPair)
            // setCategoryIdName(ambulanceIdNamePair)
            // console.log("ambulanceData NameId ",ambulanceNameIdPair);
            // console.log("ambulanceData IdName",ambulanceIdNamePair);
            // }
            
            
        //     const response2 = await axiosClientPrivate.get('/ohcs', { signal: controller.signal });
        //     const items2 = response2.data.content;
        //     if(items2.length > 0){
        //         const ohcNameIdPair = {}
        //         const ohcIdNamePair = {}
        //     const ohcData = items2.map((item)=>{
        //         ohcNameIdPair[item.ohcName] = item.id
        //         ohcIdNamePair[item.id] = item.ohcName
        //    })
        //    setOhcNameId(ohcNameIdPair)
        //    setOhcIdName(ohcIdNamePair)
        //    console.log("ohc NameId ",ohcNameIdPair);
        //     console.log("ohc IdName",ohcIdNamePair);

        //     }
                
                // setOhcPair(ohcsPair);
            //   console.log("ohcPair",ohcPair);

            try {
                const response = await axiosClientPrivate.get('/ambulance-details', { signal: controller.signal });
                const items = response.data.content;
                    console.log("actual data",items);
                    
                    // setRowData(items);
                const changeData = items.map((item)=>{
                    item.ambulanceCategoryId = categoryIdName[item.ambulanceCategoryId];
                    item.ohcTypeId = ohcIdName[item.ohcTypeId];
                    return { ...item }
                })
                setRowData(items);
                console.log("ambulance changes",changeData);

                
                if (items.length > 0) {
                   const  columns = Object.keys(items[0]).map(key => ({
                        field: key,
                        headerName: key.charAt(0).toUpperCase() + key.slice(1),
                        filter: true,
                        floatingFilter: true,
                        sortable: true
                    }));

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

                    setColDefs(columns);
                }

                

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

        getAllOhc();

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

    }, [fetchTrigger,axiosClientPrivate]);

    // category
    useEffect(()=>{

        const controller = new AbortController();

        const Category =async ()=>{
            try {
                const response = await axiosClientPrivate.get('/ambulance-categories',{signal : controllers.signal})
                const items = response.data.content;
                // console.log("category0",items);
                if(items.length > 0){
                    const ambulanceNameIdPair = {};
                    const ambulanceIdNamePair = {};
                    const changeData  = items.map((item)=>{
                        ambulanceNameIdPair[item.ambulanceCategory] = item.id
                        ambulanceIdNamePair[item.id] = item.ambulanceCategory
                       return {label  : item.ambulanceCategory,id : item.id}

                })
                setCategoryNameId(ambulanceNameIdPair)
                setCategoryIdName(ambulanceIdNamePair)
                    console.log("ambulance category",changeData);
                    
                    setCategoryDate(changeData)
                }
                
            } catch (error) {
                // console.log(error);
                console.log("Failed to fetch category data",error);
                // setCategoryDate([]);
            }
        }

        Category();

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

    },[axiosClientPrivate])

    useEffect(()=>{
        const controller  = new AbortController();
    const getAllOhcs = async ()=>{
        try {
            const response = await axiosClientPrivate.get("/ohcs",{signal : controller.signal})
            const items = response.data.content;

            if(items.length > 0){
                const ohcNameIdPair = {}
                const ohcIdNamePair = {}
                const changeData  = items.map((item)=>{
                    ohcNameIdPair[item.ohcName] = item.id
                    ohcIdNamePair[item.id] = item.ohcName
                  return  {label  : item.ohcName,id : item.id}
            })
            setOhcNameId(ohcNameIdPair)
            setOhcIdName(ohcIdNamePair)
            setOhcs(changeData)   
            }
            

            // console.log("setOhcs",items);

            
            
        } catch (error) {
            console.log("Failed to fetch ohc data",error);
            
        }
    }

    getAllOhcs();

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

    },[axiosClientPrivate])
     

    const exportpdf = async () => {
        const doc = new jsPDF();
        const header = [['Id', 'Ambulance Name',"Ambulance Number","Ohc Type","Ambulance CAtegory"]];
        const tableData = rowData.map(item => [
          item.id,
          item.ambulanceName,
          item.ambulanceNumber,
          item.ohcTypeId,
          item.ambulanceCategoryId,
          
        ]);
        doc.autoTable({
          head: header,
          body: tableData,
          startY: 20, 
          theme: 'grid', 
          margin: { top: 30 },
          styles: { fontSize: 5 },
          columnStyles: { 0: { cellWidth: 'auto' }, 1: { cellWidth: 'auto' } }
      });
        doc.save("AmbulanceList.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,
            ambulanceName: 20,
            ambulanceNumber: 15,
            ohcTypeId: 25,
            ambulanceCategoryId: 25,
      };
  
        sheet.columns = [
          { header: "Id", key: 'Id', width: columnWidths.Id, style: headerStyle },
          { header: "Ambulance Name", key: 'ambulanceName', width: columnWidths.ambulanceName, style: headerStyle },
          { header: "Ambulance Number", key: 'ambulanceNumber', width: columnWidths.ambulanceNumber, style: headerStyle },
          { header: "Ohc Type", key: 'ohcTypeId', width: columnWidths.ohcTypeId, style: headerStyle },
          { header: "Ambulance CAtegory", key: 'ambulanceCategoryId', width: columnWidths.ambulanceCategoryId, style: headerStyle },
          
      ];
  
        rowData.map(product =>{
            sheet.addRow({
                id: product.id,
                ambulanceName: product.ambulanceName,
                ambulanceNumber: product.ambulanceNumber,
                ohcTypeId: product.ohcTypeId,
                ambulanceCategoryId: product.ambulanceCategoryId,
            })
        });
  
        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 = 'AmbulanceList.xlsx';
            anchor.click();
        })
    }


    const handleAddFrequency = () => {
        const newData = { ambulanceName: "", ambulanceNumber: "", ohcTypeId: "", ambulanceCategoryId: "" };
        setFieldValue('category', [...values.category, newData]);
      };
    
      const handleRemoveFrequency = (index) => {
        const updatedFrequency = values.category.filter((_, i) => i !== index);
        setFieldValue('category', updatedFrequency);
      };
   

    return (
        <>
        <ToastContainer />
            <Box
                className="ag-theme-quartz" 
                style={{ height: 500 }}
            >

                <Stack sx={{ display: 'flex', flexDirection: 'row' }} marginY={1} paddingX={1}>
                    <ButtonGroup variant="contained" aria-label="Basic button group">
                        <Button variant="contained" endIcon={<AddCircleOutlineRoundedIcon />} onClick={() => { setOpenPopup(true) }}>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>
                <AgGridReact
                    rowData={rowData}
                    columnDefs={colDefs}
                    animateRows={true} 
                    pagination={pagination}
                    paginationPageSize={paginationPageSize}
                    paginationPageSizeSelector={paginationPageSizeSelector}
                />
            </Box>

            {/*<Popup showupdate={showupdate} id= {id} handleUpdate={handleUpdate} setShowupdate={setShowupdate} resetForm={resetForm} handleSubmit={handleSubmit}  openPopup={openPopup} setOpenPopup={setOpenPopup} title="Ambulanceform ">

             <AmbulanceForm categoryData={categoryData} values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} setFieldValue={setFieldValue} handleSubmit={handleSubmit} />
                
            </Popup>*/}

            <Dialog
        open={openPopup}
        // sx={{ width: "1200px",height : '600px' }}
        fullWidth={true}
        maxWidth={"lg"}
      >
        <DialogTitle>
          <Box
            sx={{
              display: "flex",
              flexDirection: "row",
              justifyContent: "space-between",
            }}
          >
            <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>
              Task Frequency List
            </Typography>
            <Button
              color="error"
              endIcon={<CancelRoundedIcon />}
              onClick={() => {
                setOpenPopup(false)
                setShowupdate(false)
                // setFetchTrigger(prev => prev+1);
                resetForm()
                // setRowIndex(null);
              }}
            >
              Close
            </Button>
          </Box>
        </DialogTitle>

        <DialogContent dividers>
        
                <Box>
                  {values.category.map((item,index)=>(
                    <Stack key={index}
                     direction={'row'}
                     spacing={1}
                     marginTop={1}
                     alignItems={'center'}
                    >
                    <Input
                    label="Enter Ambulance Name"
                    // name="frequencyName"
                    name={`category[${index}].ambulanceName`}
                    type="text"
                    sx={{width : "290px"}}
                    size="small"
                    {...getFieldProps(`category[${index}].ambulanceName`)}
                    helperText={
                        errors.category?.[index]?.ambulanceName && touched.category?.[index]?.ambulanceName ? (
                        <span style={{ color: "red" }}>
                          {errors.category?.[index]?.ambulanceName}
                        </span>
                      ) : null
                    }
                  />
                  <Input
                      label="Frequency Code"
                    //   name="frequencyCode"
                      name={`category[${index}].ambulanceNumber`}
                      type="text"
                    //   size="large"
                    size="small"
                      sx={{width : "290px"}}
                      {...getFieldProps(`category[${index}].ambulanceNumber`)}

                      helperText={
                        errors.category?.[index]?.ambulanceNumber && touched.category?.[index]?.ambulanceNumber ? (
                        <span style={{ color: "red" }}>
                          {errors.category?.[index]?.ambulanceNumber}
                        </span>
                      ) : null
                    }
                    />
                    
                    <SingleSelect
                  // sx={{ width: "150px" }}

                  arr={ohcs}
                  label="Select Ohc"
                  name={`category[${index}].ohcTypeId`}
                  size="small"
                //   {...getFieldProps(`category[${index}].ohcTypeId`)}
                  value={values.category[index].ohcTypeId}
                  // onChange={handleChange}
                //   onChange={(event, newValue) => {
                //     const syntheticEvent = {
                //       target: {
                //         name: `category[${index}].ohcTypeId`, // Dynamically assign the correct name
                //         value: newValue,  // Set the selected value
                //       },
                //     };
                //     handleChange(syntheticEvent);  // Pass it to Formik's handleChange
                //   }}

                onChange={(event, newValue) => {
                    setFieldValue(`category[${index}].ohcTypeId`, newValue ? newValue.label : '');
                  }}

                  onBlur={handleBlur}
                />

                <SingleSelect
                 
                  arr={categoryData}
                  size="small"
                  label="Select ambulance category"
                //   name="ambulanceCategoryId"
                  name={`category[${index}].ambulanceCategoryId`}

                  value={values.category[index].ambulanceCategoryId}
                  // onChange={handleChange}
                //   onChange={(event, newValue) => {
                //     const syntheticEvent = {
                //       target: {
                //         name: `category[${index}].ambulanceCategoryId`, // Dynamically assign the correct name
                //         value: newValue,  // Set the selected value
                //       },
                //     };
                //     handleChange(syntheticEvent);  // Pass it to Formik's handleChange
                //   }}
                onChange={(event, newValue) => {
                    setFieldValue(`category[${index}].ambulanceCategoryId`, newValue ? newValue.label : '');
                  }}

                  onBlur={handleBlur}
                />

                    {index > 0 && (
                        <DeleteIcon
                          color="error"
                          style={{ cursor: 'pointer', marginLeft: '1rem' }}
                          onClick={() => handleRemoveFrequency(index)}
                        />
                      )}
                    
                      
                    

                    </Stack>
                  ))}
                  <Button 
                      sx={{mt : 1}}
                      style={{display : showupdate ? "none" : "null" }}
                       fullWidth
                       variant="contained"
                      type="button"
                      onClick={() => handleAddFrequency()}
                      >Add Row</Button>
                </Box>

        </DialogContent>

        <DialogActions>
          <Button type="submit" onClick={()=> handleUpdate(id)}  variant="outlined" style={{display : showupdate ? "null" : "none" }}>Update</Button>
                <Button type="submit" onClick={() => handleSubmit()}  variant="outlined" style={{display : showupdate ? "none" : "null" }}>Save</Button>
                <Button onClick={() => resetForm()}  type="reset" color='warning'  variant="outlined">Reset</Button>
        </DialogActions>
      </Dialog>

        </>
    );
};

export default AmbulanceList;