const deleteHandle = (image) => {
    const currentIndex = Images.indexOf(image);
    // console.log(currentIndex);
    let newImages = [...Images];
    newImages.splice(currentIndex, 1);

    setImages(newImages); 
    // 내가 클릭한 이미지의 index 번호~1까지 지워주겠다는뜻,
    // Ex) index 번호 0을 클릭했다면 0부터1까지 지우는거니, 하나만 지움
    // Ex2) index 번호 2를 클릭했다면 2부터3까지 지우는거니, 하남나 지움
  };

import React, { useState } from 'react';
import Dropzone from 'react-dropzone';
import { Icon } from 'antd';
import axios from 'axios';

const FileUpload = () => {
  // 업로드할 이미지들을 담는 용도
  const [Images, setImages] = useState([]);

  const dropHandle = async (files) => {
    let formData = new FormData();

    const config = {
      header: { 'content-type': 'multipart/form-data' },
    };
    formData.append('file', files[0]);

    axios.post('/api/product/image', formData, config).then((response) => {
      if (response.data.success) {
        // console.log(response.data);
        setImages([...Images, response.data.filePath]);
      } else {
        alert('파일을 저장하는데 실패했습니다.');
        console.log(response.data.err);
      }
    });
  };

  const deleteHandle = (image) => {
    const currentIndex = Images.indexOf(image);
    // console.log(currentIndex);
    let newImages = [...Images];
    newImages.splice(currentIndex, 1);

    setImages(newImages); 
    // 내가 클릭한 이미지의 index 번호~1까지 지워주겠다는뜻,
    // Ex) index 번호 0을 클릭했다면 0부터1까지 지우는거니, 하나만 지움
    // Ex2) index 번호 2를 클릭했다면 2부터3까지 지우는거니, 하남나 지움
  };

  return (
    <div style=>
      <Dropzone onDrop={dropHandle}>
        {({ getRootProps, getInputProps }) => (
          <div
            style=
            {...getRootProps()}
          >
            <input {...getInputProps()} />
            <Icon type='plus' style= />
          </div>
        )}
      </Dropzone>

      {/* 이미지를 뿌려주는 UI */}
      <div
        style=
      >
        {Images.map((image, index) => (
          <div onClick={() => deleteHandle(image)} key={index}>
            <img
              style=
              src={`http://localhost:5000/${image}`}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default FileUpload;