Untitled

#new form
import React, { useState, useEffect } 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 BugReportIcon from '@mui/icons-material/BugReport';
import AssignmentIcon from '@mui/icons-material/Assignment';
import AccountTreeIcon from '@mui/icons-material/AccountTree';
import PendingIcon from '@mui/icons-material/Pending';
import CodeIcon from '@mui/icons-material/Code';
import DoneIcon from '@mui/icons-material/Done';
import HourglassTopIcon from '@mui/icons-material/HourglassTop';

const iconMap = {
  Bug: <BugReportIcon />,
  Task: <AssignmentIcon />,
  Project: <AccountTreeIcon />,
};

const statusIconMap = {
  Beklemede: <PendingIcon />,
  'Devam Ediyor': <CodeIcon />,
  Tamamlandı: <DoneIcon />,
  Ertelendi: <HourglassTopIcon />,
};

const NewFormComponent = ({ open, onClose, addNewRow, theadData }) => {
  const { handleSubmit, control } = useForm(); // Initialize useForm
  const [currentRow, setCurrentRow] = useState({
    TASK_ID: '',
    TYPE: '',
    SUBJECT: '',
    PRIORITY: '',
    ASSIGNEE: '',
    ASSIGNED_BY: '',
    DEADLINE: null,
    STATUS: '',
    TEAM: 'CNO',
  });

  useEffect(() => {
    if (currentRow.TASK_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 === 'TYPE' && (
            <FormControl fullWidth>
              <InputLabel>{item.headerName}</InputLabel>
              <Controller
                name={item.field}
                control={control}
                defaultValue={currentRow[item.field]}
                render={({ field }) => (
                  <Select {...field} label={item.headerName}>
                    {Object.keys(iconMap).map((option) => (
                      <MenuItem key={option} value={option}>
                        <ListItemIcon>{iconMap[option]}</ListItemIcon>
                        {option}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />
            </FormControl>
          )}
          {item.field === 'SUBJECT' && (
            <Controller
              name={item.field}
              control={control}
              defaultValue={currentRow[item.field]}
              render={({ field }) => (
                <TextField
                  {...field}
                  fullWidth
                  placeholder={item.headerName}
                  label={item.headerName}
                />
              )}
            />
          )}
          {item.field === 'PRIORITY' && (
            <FormControl fullWidth>
              <InputLabel>{item.headerName}</InputLabel>
              <Controller
                name={item.field}
                control={control}
                defaultValue={currentRow[item.field]}
                render={({ field }) => (
                  <Select {...field} label={item.headerName}>
                    {['Düşük', 'Orta', 'Yüksek', 'Acil'].map((option) => (
                      <MenuItem key={option} value={option}>
                        {option}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />
            </FormControl>
          )}
          {item.field === 'ASSIGNEE' && (
            <Controller
              name={item.field}
              control={control}
              defaultValue={currentRow[item.field]}
              render={({ field }) => (
                <Autocomplete
                  options={['User1', 'User2']}
                  value={field.value}
                  onChange={(_, newValue) => field.onChange(newValue)}
                  renderInput={(params) => (
                    <TextField {...params} label={item.headerName} fullWidth />
                  )}
                />
              )}
            />
          )}
          {item.field === 'ASSIGNED_BY' && (
            <Controller
              name={item.field}
              control={control}
              defaultValue={currentRow[item.field]}
              render={({ field }) => (
                <Autocomplete
                  options={['User3', 'User4']}
                  value={field.value}
                  onChange={(_, newValue) => field.onChange(newValue)}
                  renderInput={(params) => (
                    <TextField {...params} label={item.headerName} fullWidth />
                  )}
                />
              )}
            />
          )}
          {item.field === 'DEADLINE' && (
            <Controller
              name={item.field}
              control={control}
              defaultValue={currentRow[item.field]}
              render={({ field }) => (
                <TextField
                  {...field}
                  type="date"
                  label={item.headerName}
                  InputLabelProps={{
                    shrink: true,
                  }}
                  fullWidth
                />
              )}
            />
          )}
          {item.field === 'STATUS' && (
            <FormControl fullWidth>
              <InputLabel>{item.headerName}</InputLabel>
              <Controller
                name={item.field}
                control={control}
                defaultValue={currentRow[item.field]}
                render={({ field }) => (
                  <Select {...field} label={item.headerName}>
                    {Object.keys(statusIconMap).map((option) => (
                      <MenuItem key={option} value={option}>
                        <ListItemIcon>{statusIconMap[option]}</ListItemIcon>
                        {option}
                      </MenuItem>
                    ))}
                  </Select>
                )}
              />
            </FormControl>
          )}
        </div>
      ))}
    </Box>
  );

  return (
    <Modal open={open} onClose={onClose}>
      <Box sx={newRowModalStyles.wrapper}>
        <Typography variant="h6" component="h2">
          Kayıt Ekle
        </Typography>
        <Typography sx={{ mt: 2 }}>
          Alanları doldurduktan sonra Onayla butonuna basınız
        </Typography>
        <form onSubmit={handleSubmit(onSubmit)}>
          {getContent()}
          <Box sx={newRowModalStyles.buttons}>
            <Button type="submit" variant="contained">
              Onayla
            </Button>
            <Button onClick={onClose}>Vazgeç</Button>
          </Box>
        </form>
      </Box>
    </Modal>
  );
};

export default NewFormComponent;