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 { ParameterUnitMasterValidationForm } 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 ParameterUnitMasterForm from './ParameterUnitMasterForm';
import PropTypes from "prop-types";
import * as Yup from 'yup';




  const ParameterUnitMasterValidationForm = Yup.object().shape({
    unit: Yup.array().of(
      Yup.object().shape({
        unitName: Yup.string().required('Unit Name is required'),
      })
    ),
  });


const ParameterUnitMasterList = () => {


    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 initialValues = {
    //     unitName: "",
    //   };


      const {
        values,
        touched,
        errors,
        handleBlur,
        handleChange,
        setFieldValue,
        handleSubmit,
        resetForm,
        getFieldProps,
      } = useFormik({
        initialValues: {
          unit : [
            {
              unitName: "",
            }
          ]
        },
        validationSchema: ParameterUnitMasterValidationForm,
        onSubmit: async (values, {resetForm}) => {
            try {
                const response = await axiosClientPrivate.post('/checkup-parameter-units', values.unit);
                toast.success("Saved Successfully!",{
                    position:"top-center",
                    autoClose : 500
                 }); 
                       
                setFetchTrigger(prev => prev+1);

                console.log('Response:', response.data);
                resetForm();
              } catch (error) {
                console.log(values);
                console.error('Error:', error);
              }
            },
          });
    
    
    
          const handleEdit = async (id) => {
            // alert(id);
            try {
              const response = await axiosClientPrivate.get(`/checkup-parameter-units/${id}`);
                console.log(response.data);
                setFieldValue("id",response.data.id);
                setFieldValue(`unit[${0}].unitName`, response.data.unitName);
              setId(id);
              setShowupdate(true);
              setOpenPopup(true);
            } catch (error) {
              console.error('Error fetching item for edit:', error);
            }
          };
    
          const handleUpdate = async (id)=> {
            // alert(id);
            const update = values;
            try{
                 console.log(values);
                 await axiosClientPrivate.put(`/checkup-parameter-units/${id}`,update.unit[0]);
                 toast.success("Updated Successfully!",{
                    position:"top-center",
                    autoClose: 500,
                 });
                 resetForm();
                 //setRowData(rowData => [...rowData,values]);
                 setFetchTrigger(prev => prev+1);

            }
            catch(err){
                console.log(values);
                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(`/checkup-parameter-units/${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 () => {
              try {
                  const response = await axiosClientPrivate.get('/checkup-parameter-units', { signal: controller.signal });
                  const items = response.data.content;

                      console.log("parameter unit master",items);
                  
                  if (items.length > 0) {
  
                      const headerMappings = {
                        deviceName: "Device Name",
                        isActive: "Is Active",
                        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,
                      }));
  
                      columns.unshift({
                          field: "Actions", cellRenderer:  (params) =>{
                              const id = params.data.id;
                              return <CustomActionComponent id={id} />
                          }
                      });
  
                      setColDefs(columns);
                  }
  
                  setRowData(items);
  
              } catch (err) {
                  console.error("Failed to fetch data: ", err);
                  setRowData([]);
              }
          };
  
          getAllOhc();
  
          return () => {
              controller.abort();
          };
  
      }, [fetchTrigger]);
    
         
    
        const exportpdf = async () => {
            const doc = new jsPDF();
            const header = [["Id","Unit Name"]];
            const tableData = rowData.map(item => [
              item.id,
              item.unitName,
              
            ]);
            doc.autoTable({
              head: header,
              body: tableData,
              startY: 20, // Start Y position for the table
              theme: 'grid', // Optional theme for the table
              margin: { top: 30 }, // Optional margin from top
              styles: { fontSize: 5 },
              columnStyles: { 0: { cellWidth: 'auto' }, 1: { cellWidth: 'auto' } }
          });
            doc.save("ParameterUnitMasterList.pdf");
        };
    
    
        const exportExcelfile = async () => {
            const workbook = new ExcelJS.Workbook();
            const sheet = workbook.addWorksheet('My Sheet');
      
            const headerStyle = {
              // font: { bold: true, size: 12 },
              alignment: { horizontal: 'center' }
              
          };
      
          sheet.getRow(1).font = { bold: true };
            
            const columnWidths = {
                id: 10,
                unitName: 25,
          };
      
            sheet.columns = [
              { header: "Id", key: 'id', width: columnWidths.id, style: headerStyle },
              { header: "Unit Name", key: 'unitName', width: columnWidths.unitName, style: headerStyle },
              
          ];
      
            rowData.map(product =>{
                sheet.addRow({
                    id: product.id,
                    unitName: product.unitName,
                })
            });
      
            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 = 'ParameterUnitMasterList.xlsx';
                anchor.click();
                // anchor.URL.revokeObjectURL(url);
            })
        }
       
    
        

    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="Parameter Unit Master ">

                <ParameterUnitMasterForm showupdate={showupdate}  getFieldProps={getFieldProps} values={values} touched={touched} errors={errors} handleBlur={handleBlur} handleChange={handleChange} setFieldValue={setFieldValue} handleSubmit={handleSubmit} />
                
            </Popup>
        </>
    );
};

export default ParameterUnitMasterList;