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 { RulegenerationValidationForm } 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 RulegenerationForm from './RulegenerationForm';
import PropTypes from "prop-types";
//import MultipleSelect from '../common/MultipleSelect';
//import TextField from '@mui/material';
import * as Yup from 'yup';
import TextArea from '../common/TextArea';

const RulegenerationValidationForm = Yup.object({
    bracket: Yup.string().required("Please enter Bracket"),
    age: Yup.string().required("Please enter Age"),
    risk: Yup.string().required("Please enter Risk  "),
    ageend: Yup.string().required("Please enter Age End"),
    advice: Yup.string().required("Please enter  Advice"),
    condition: Yup.string().required("Please enter Condition"),
    value: Yup.string().required("Please enter  Value"),
    gender: Yup.string().required("Please enter  Gender"),
    abnormality: Yup.string().required("Please enter  Abnormality"),
    result: Yup.string().required("Please enter Result"),
    close: Yup.string().required("Please enter Close Bracket"),
    range:Yup.string().required("Please enter Range Type "),
    checkup:Yup.string().required("Please enter Checkup Parameter  "),
    rule:Yup.string().required("Please enter Text Comparsion Rule"),
    res:Yup.string().required("Please enter Result Field "),
  
  });
const RulegenerationList = () => {


    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 = {
        
        bracket: "",
        age:"",
        risk:"",
        ageend:"",
        advice:"",
        value:"",
        result:"",
        close:"",
        checkup:"",
        condition:"",
        gender:"",
        abnormality:"",
        range:"",
        res:"",
        rule:""
      };


      const {
        values,
        touched,
        errors,
        handleBlur,
        handleChange,
        setFieldValue,
        handleSubmit,
        resetForm
      } = useFormik({
        initialValues: initialValues,
        validationSchema: RulegenerationValidationForm,
        onSubmit: async (values, {resetForm}) => {
        try {
            const response = await axiosClientPrivate.post('/medicallist', values);
            toast.success("Saved Successfully!",{
                position:"top-center"
             }); 
                   // getting id(key,value) of last index
               // const id = rowData[rowData.length-1].buId;
              //  const obj = {
                  //  buId : id+1,
                   // ...values
             //   }
             //console.log(obj);
             //setRowData(rowData => [...rowData, obj]);
            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(`/business-units/${id}`);
            console.log(response.data);
            setFieldValue("id",response.data.id);
            setFieldValue("bracket",response.data.bracket);
            setFieldValue(" age",response.data. age);
            setFieldValue("risk",response.data.risk);
            setFieldValue("ageend",response.data.ageend);
            setFieldValue("advice", response.data.advice);
            setFieldValue("value", response.data.value);

            setFieldValue("result",response.data.result);
            setFieldValue("close",response.data.close);
            setFieldValue("checkup",response.data.checkup);
            setFieldValue("condition",response.data.condition);
            setFieldValue("gender", response.data.gender);
            setFieldValue("abnormality", response.data.abnormality);

            setFieldValue("range",response.data.range);
            setFieldValue("res",response.data.res);
            setFieldValue("rule",response.data.rule);
            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(`/medicalitem/${id}`,update);
             toast.success("Updated Successfully!",{
                position:"top-center",
                autoClose: 3000,
             });
             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(`/business-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('business-units', { signal: controller.signal });
                const items = response.data.content;
                    // console.log(items);
                setRowData(items);
                if (items.length > 0) {
                    const headerMappings = {
                        bracket: "Bracket",
                        age: "Age",
                        risk : "Risk",
                        ageend : "Age end",
                        advice : "Advice",
                        value : "Value",
                        result : "Result",
                        close : "Close",
                        checkup : "Checkup",
                        condition : "Condition",
                        gender : "Gender",
                        range : "Range",
                        res : "Res",
                        rule : "Rule",
                    };

                   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.buId;
                            return <CustomActionComponent id={id} />
                        }
                    });

                    setColDefs(columns);
                }

                

            } 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','bracket', 'age',"risk","ageend","advice","value","result","close","checkup","condition"
        ,"gender","abnormality","range","res","rule"]];
        const tableData = rowData.map(item => [
            item.bracket,
            item.age,
            item.risk,
            item.ageend,
            item.advice,
            item.value,
            item.result,
            item.close,
            item.checkup,
            item.condition,
            item.gender,
            item.abnormality,
            item.range,
            item.res,
            item.rule,
          
          
        ]);
        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("RulegenerationList.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,
            bracket: 20,
            age: 20,
            risk: 20,
            ageend: 20,
            advice: 20,
            value: 20,
            result: 20,
            close: 20,
            checkup: 20,
            condition: 20,
            gender: 20,
            abnormality: 20,
            range: 20,
            res: 20,
            rule: 20,
         
           
            
      };
  
        sheet.columns = [
          { header: "Id", key: 'buId', width: columnWidths.buId, style: headerStyle },
          { header: "bracket", key: 'bracket', width: columnWidths.bracket, style: headerStyle },
          { header: "age", key: 'age', width: columnWidths.age, style: headerStyle },
          { header: "risk", key: 'risk', width: columnWidths.risk, style: headerStyle },

          { header: "ageend", key: 'ageend', width: columnWidths.ageend, style: headerStyle },
          { header: "advice", key: 'advice', width: columnWidths.advice, style: headerStyle },
          { header: "value", key: 'value', width: columnWidths.value, style: headerStyle },
          { header: "result", key: 'result', width: columnWidths.result, style: headerStyle },

          { header: "close", key: 'close', width: columnWidths.close, style: headerStyle },
          { header: "checkup", key: 'checkup', width: columnWidths.checkup, style: headerStyle },
          { header: "condition", key: 'condition', width: columnWidths.condition, style: headerStyle },
          { header: "gender", key: 'gender', width: columnWidths.gender, style: headerStyle },

          { header: "abnormality", key: 'abnormality', width: columnWidths.abnormality, style: headerStyle },
          { header: "range", key: 'range', width: columnWidths.range, style: headerStyle },
          { header: "res", key: 'res', width: columnWidths.res, style: headerStyle },
          { header: "rule", key: 'rule', width: columnWidths.rule, style: headerStyle },
          

         
      ];
  
        rowData.map(product =>{
            sheet.addRow({
                buId: product.buId,
                bracket: product.bracket,
                age: product. age,
                risk: product. risk,
                ageend: product.ageend,
                advice: product. advice,
                value: product. value,
                result: product. result,
                close: product. close,
                checkup: product. checkup,
                condition: product.condition,
                gender: product. gender,
                abnormality: product. abnormality,
                range: product.range,
                res: product. res,
                rule: product.rule,
               
                

              



            })
        });
  
        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 = 'download.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="Rule Generation Form">

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

export default  RulegenerationList;