import { FormControl, Grid } from "@mui/material";
import PropTypes from "prop-types";
// import SingleSelect from "../common/SingleSelect";
// import { useState,useEffect } from "react";
// import useAxiosPrivate from '../../utils/useAxiosPrivate';
import SingleSelectNew from "../common/SingleSelectNew";
import DeleteIcon from '@mui/icons-material/Delete';
import {  Button, Stack } from "@mui/material";



const DiagnosisBSMForm = ({
  values,
  touched,
  handleBlur,
  errors,
  // handleChange,
  setFieldValue,
  handleSubmit,
  diagnosis,
  bodySystem,
  showupdate,
  // bodySystemMap,
  // setBodysystem
}) => {


    DiagnosisBSMForm.propTypes = {
    values: PropTypes.object.isRequired,
    touched: PropTypes.object.isRequired,
    errors: PropTypes.object.isRequired,
    handleBlur: PropTypes.func.isRequired,
    handleChange: PropTypes.func.isRequired,
    setFieldValue: PropTypes.func.isRequired,
    handleSubmit: PropTypes.func.isRequired,
  };

  
  const handleAddAbnormality = () => {
    const newAbnormality = { ailmentId: '', ailmentSystemId: " " };
    setFieldValue('ailment', [...values.ailment, newAbnormality]);
  };

  const handleRemoveAbnormality = (index) => {
    const updatedAilment = values.ailment.filter((_, i) => i !== index);
    setFieldValue('ailment', updatedAilment);
  };
  
  
  // const [diagnosisMap,setDiagnosisMap] = useState(new Map());
  // const diagnosisMap = new Map(

  return (
    <div style={{ display: "flex", justifyContent: "center",width : "820px" }}>
      <form onSubmit={handleSubmit}>
            <FormControl fullWidth>
            {values.ailment.map((item,index)=>
              (
              <Stack key={index}
               direction={'row'}
               spacing={1}
               marginTop={1}
               alignItems={'center'}
              >
              <SingleSelectNew
                  
                label="Diagnosis Name"
                // name ="ailmentId"
                name={`ailment[${index}].ailmentId`}
                type="text"
                size="large"
                sx={{width:"400px"}}

                options={diagnosis}
                getOptionLabel={(option) => option.label} 
                value={
                  diagnosis.find(
                      (option) => option.id === values.ailment[index].ailmentId
                    ) || null
                  } 
                  onChange={(event, newValue) => {
                    setFieldValue(`ailment[${index}].ailmentId`, newValue ? newValue.id : ""); // Store only the id in Formik
                  }}
                  onBlur={handleBlur}
                 
                />
                <SingleSelectNew
                  
                label="BodySystem Name"
                name={`ailment[${index}].ailmentSystemId`}
                type="text"
                size="large"
                sx={{width:"400px"}}

                options={bodySystem}
                getOptionLabel={(option) => option.label} 
                value={
                  bodySystem.find(
                      (option) => option.id === values.ailment[index].ailmentSystemId
                    ) || null
                  } 
                  onChange={(event, newValue) => {
                    setFieldValue(`ailment[${index}].ailmentSystemId`, newValue ? newValue.id : ""); // Store only the id in Formik
                  }}
                  onBlur={handleBlur}
                 
                />
            
                {index > 0 && (
                  <DeleteIcon
                    color="error"
                    style={{ cursor: 'pointer', marginLeft: '1rem' }}
                    onClick={() => handleRemoveAbnormality(index)}
                  />
                  )}

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

export default DiagnosisBSMForm;