Untitled

#new comment
import React, { useState, useEffect, useContext } from 'react';
import {
  MenuItem,
  Select,
  FormControl,
  InputLabel,
  Box,
  TextField,
  Modal,
  Typography,
  Button,
  ListItemIcon,
} from '@mui/material';
import { useForm, Controller } from 'react-hook-form'; // Import useForm and Controller
import Autocomplete from '@mui/material/Autocomplete';
import { newRowModalStyles } from '../styles/NewRowModalStyle';
import { Context } from '../context/ContextProvider';


const NewCommentComponent = ({ open, onClose, addNewRow, theadData, task_id}) => {
  const { handleSubmit, control } = useForm(); // Initialize useForm
  const {state: {authData}} = useContext(Context);
  const currentDate = new Date();
  const [currentRow, setCurrentRow] = useState({
    TASK_ID: '',
    COMMENT_ID: '',
    COMMENTS: '',
    COMMENTOR_USERNAME: '',
    COMMENT_DATE: '',
  });

  useEffect(() => {
    if (currentRow.COMMENT_ID) {
      // If you have an initial value for TASK_ID, set it here
      setCurrentRow(currentRow);
    }
  }, [currentRow]);

  const onSubmit = (data) => {
    // Handle form submission here
    addNewRow(data);
    onClose();
  };

  const getContent = () => (
    <Box sx={newRowModalStyles.inputFields}>
      {theadData.map((item) => (
        <div key={item.field} className={newRowModalStyles.inputContainer}>
          
          {item.field === 'COMMENTS' && (
            <FormControl fullWidth>
            <InputLabel>{item.headerName}</InputLabel>
            <Controller
              name={item.field}
              control={control}
              defaultValue={currentRow[item.field]}
              render={({ field }) => (
                <TextField
                  {...field}
                  fullWidth
                  placeholder={item.headerName}
                  label={item.headerName}
                />
              )}
            />
            </FormControl>
          )}
          
          
        </div>
      ))}
    </Box>
  );

  

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={newRowModalStyles.wrapper}>
        <Typography variant="h3" component="h2">
        Yorum Ekle:
        </Typography>
        
        <form onSubmit={handleSubmit(onSubmit)}>
          {getContent()}
          <Box sx={newRowModalStyles.buttons}>
            <Button type="submit" variant="contained">
              Yorum Yap
            </Button>
            <Button onClick={onClose}>Vazgeç</Button>
          </Box>
        </form>
      </Box>
    </Modal>
  );
};

export default NewCommentComponent;