import React, { useEffect, useMemo, useState } from 'react';
import {useDropzone} from 'react-dropzone';

const imgUpload = async () => {
    await fetch('shop-roles.node.ed.asmer.org.ua/upload')
}

const baseStyle = {
    flex: 1,
    display: 'flex',
    flexDirection: 'column',
    alignItems: 'center',
    padding: '20px',
    borderWidth: 2,
    borderRadius: 2,
    borderColor: '#eeeeee',
    borderStyle: 'dashed',
    backgroundColor: '#fafafa',
    color: '#bdbdbd',
    outline: 'none',
    transition: 'border .24s ease-in-out'
  };
  
  const focusedStyle = {
    borderColor: '#2196f3'
  };
  
  const acceptStyle = {
    borderColor: '#00e676'
  };
  
  const rejectStyle = {
    borderColor: '#ff1744'
  };

  const thumbsContainer = {
    display: 'flex',
    flexDirection: 'row',
    flexWrap: 'wrap',
    marginTop: 16
  };
  
  const thumb = {
    display: 'inline-flex',
    borderRadius: 2,
    border: '1px solid #eaeaea',
    marginBottom: 8,
    marginRight: 8,
    width: 100,
    height: 100,
    padding: 4,
    boxSizing: 'border-box'
  };
  
  const thumbInner = {
    //  display: 'flex',
    //  minWidth: 0,
    //  overflow: 'hidden'
  };
  
  const img = {
    // display: 'block',
    width: "90px",
    height: "90px",
    objectFit: 'contain'
  };

export default function ReactDropzone(props) {
    const [files, setFiles] = useState([]);

    const {
    getRootProps,
    getInputProps,
    isFocused,
    isDragAccept,
    isDragReject,
    acceptedFiles,
    fileRejections,
  } = useDropzone({
    accept: {
      'image/*': ['.jpeg', '.png']
    },
    maxFiles:0,
    onDrop: acceptedFiles => {
        setFiles(acceptedFiles.map(file => Object.assign(file, {
          preview: URL.createObjectURL(file)
        })));
      }
  });
  
  useEffect(() => {
    // Make sure to revoke the data uris to avoid memory leaks, will run on unmount
    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
  }, []);


  console.log("acceptedFiles", acceptedFiles, "files", files)

  const thumbs = files.map(file => (
    <div style={thumb} key={file.name}>
      <div style={thumbInner}>
        <img
          src={file.preview}
          style={img}
          // Revoke data uri after image is loaded
          onLoad={() => { URL.revokeObjectURL(file.preview) }}
        />
      </div>
    </div>
  ));



  const filesArr = acceptedFiles.map(file => <li key={file.path}>{file.path}</li>);
  const fileRejectionItems = fileRejections.map(({ file, errors }) => (
    <li key={file.path}>
      {file.path} - {file.size} bytes
      <ul>
        {errors.map(e => (
          <li key={e.code}>{e.message}</li>
        ))}
      </ul>
    </li>
  ));
 
  const style = useMemo(() => ({
    ...baseStyle,
    ...(isFocused ? focusedStyle : {}),
    ...(isDragAccept ? acceptStyle : {}),
    ...(isDragReject ? rejectStyle : {})
  }), [
    isFocused,
    isDragAccept,
    isDragReject
  ]);

  return (
    <div className="container">
      <div {...getRootProps({style})}>
        <input {...getInputProps()} />
        <p>Перетащите картинку аватар сюда или нажмите, чтобы выбрать файл</p>
        <p>Вы можете загрузить только один файл!</p>
      </div>
      <aside style={thumbsContainer}>
        {thumbs}
      </aside>
      <aside>
        <h4>Files</h4>
        <ul>{filesArr}</ul>
        <h4>rejected Files</h4>
        <ul>{fileRejectionItems}</ul>
      </aside>
      
    </div>
  );
}

