shoc-frontend/src/pages/workorder/attachments/ImageDrawer.js

import React, { useState, useEffect } from 'react';
import {
  Button,
  Drawer,
  Typography,
  Grid,
  Paper,
  IconButton,
  FormControl,
  Input,
  FormHelperText,
} from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import {getAttachments, AddEditAttachments} from './api';

const ImageDrawer = ({ item, open, setOpen }) => {
  const [imagePaths, setImagePaths] = useState([]);
  const [selectedFiles, setSelectedFiles] = useState([]);
  const [errors, setErrors] = useState({ file: null });

  const toggleDrawer = (open) => () => {
    setOpen(open);
  };

  // Handle file upload
  const handleFileChange = (event) => {
    const files = Array.from(event.target.files);
    const fileURLs = files.map(file => URL.createObjectURL(file));

    setImagePaths((prev) => [...prev, ...fileURLs]);
    setSelectedFiles((prev) => [...prev, ...files]);
    setErrors({ file: null }); // Clear errors
  };

  // Handle delete image
  const handleDeleteImage = (image, index) => {
    setImagePaths((prev) => prev.filter((img, idx) => img !== image));
    setSelectedFiles((prev) => prev.filter((_, idx) => idx !== index)); // Ensure file array is in sync
  };


  const getImageName = (file) => {
    if(!file) return "";
    const name = file.name; 
    if(name.indexOf('_') > 0) {
    const parts = name.split('_');
    return parts[parts.length - 1].split('.')[0];
    } else {
      return name;
    }
  };
  const handUpload = async () => {
  };
   const handleSubmit = async () => {
      if (selectedFiles) {
        await AddEditAttachments({id: item.id , attachments: selectedFiles[0], imagePaths:imagePaths});
        if(item.id) {
          const attachments = await getAttachments(item.id);
          if(attachments && attachments.length>0) {
            const _attachments = attachments.map(c=> c.attachments)
            setImagePaths(_attachments); 
          }
        }
      }
    };

    useEffect(async() => {
      if(item.id) {
        const attachments = await getAttachments(item.id);
        if(attachments && attachments.length>0) {
          const _attachments = attachments.map(c=> c.attachments)
          setImagePaths(_attachments); 
        }
      }
    }, [item])
  

  return (
    <div>
      <Drawer anchor="right" open={open} onClose={toggleDrawer(false)}>
        <div style={{ width: 400, padding: 16 }}>
          <Typography variant="h6" gutterBottom>
            Workorder Images
          </Typography>
          <FormControl fullWidth margin="normal" error={!!errors.file}>
            <Typography variant="subtitle1">Upload Images</Typography>
            <Input
              type="file"
              inputProps={{ accept: ".jpg, .jpeg, .png, .pdf, .doc, .docx" }} // Allow multiple files 
              onChange={handleFileChange}
              style={{ display: 'none' }}
              id="file-input"
            />
            <label htmlFor="file-input">
              <Button
                variant="contained"
                component="span"
                onClick={handUpload}
              >
                {selectedFiles.length > 0 ? `${selectedFiles.length} File(s) Selected` : 'Choose Files'}
              </Button>
            </label>
             <Button
                variant="contained"
                color="primary"
                onClick={handleSubmit}
                style={{ marginTop: 10 }}
              >
                Submit
              </Button>
            {errors.file && <FormHelperText>{errors.file}</FormHelperText>}
          </FormControl>
          <Grid container spacing={2}>
            {imagePaths.map((image, index) => (
              <Grid item xs={6} key={index}> {/* Set to 6 to allow 2 items per row */}
                <Paper elevation={2} style={{ padding: '8px' }}>
                  <img
                    src={image}
                    alt={`Image ${index}`}
                    style={{ width: '100%', height: 'auto', borderRadius: '4px' }}
                  />
                  <div style={{ display: 'flex', alignItems: 'center', marginTop: '8px' }}>
                    <Typography variant="body2" style={{ flexGrow: 1 }}>
                      {getImageName(selectedFiles[index])} {/* Display the extracted image name */}
                    </Typography>
                    <IconButton
                      size="small"
                      onClick={() => handleDeleteImage(image, index)}
                      aria-label="delete"
                    >
                      <DeleteIcon fontSize="small" />
                    </IconButton>
                  </div>
                </Paper>
              </Grid>
            ))}
          </Grid>
        </div>
      </Drawer>
    </div>
  );
};

export default ImageDrawer;