import styles from "./App.css";
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import axios from 'axios'
import {View} from 'react-native';
import { useFormStatus } from "react-dom";
import React, { useOptimistic, useState, useEffect, useRef, Component } from 'react';
import {useDropzone} from "react-dropzone";

function App({ onSubmit, onChange }){
  const [files, setFiles] = useState([]);
  const {getRootProps, getInputProps} = useDropzone({
    accept: {"image/*": []},
    onDrop: acceptedFiles => {
      setFiles(
        acceptedFiles.map(file =>
          Object.assign(file, {
            preview: URL.createObjectURL(file)
          })
        )
      );
    },
  });

  const thumbs = files.map(file => (
    <div key={file.name}>
      <img style={{ maxWidth: "100%", maxHeight: "100%" }} src={file.preview} onLoad={() => URL.revokeObjectURL(file.preview)} alt={file.name} />
    </div>
  ));
 
  useEffect(() => {
    // Revoke the data uris to avoid memory leaks on unmount
    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
  }, [files]);
  
  return (
    <>
    <div className={styles.title_main_page}>
    <h1>Spin the Black Circle!</h1>
    <h2>Managing Your Vinyl Record Collection</h2>
    
    </div>
    <div className="container disable">
    
    <h2>Easy Image Editor</h2>
    <div className="wrapper">
      <form method="post" onSubmit={onSubmit}>
     <label>
       Text input: <input  onChange={onChange} />
     </label>
     
     <button type="reset">Reset form</button>
     <button type="submit">Submit form</button>
   </form>
    <section className="containerDragAndDrop">
        <div {...getRootProps({className: "dropzone"})}>
          <input {...getInputProps()} />
          <p>Drag 'n' drop some files here, or click to select files</p>
        </div>
        <aside>{thumbs}</aside>
      </section>
    </div>
    <LoadButtons/>
    </div>
    
    </>
  );
}

function MyForm() {
 /*const handleChange = (event) => {
   setname(event.target.value);
 }*/
   const [editableValue, setEditableValue] = useState('');
   const handleChange = (e) => setEditableValue(e.target.value);
 
 function handleSubmit(e) {
   // Prevent the browser from reloading the page
   e.preventDefault();

   // Read the form data
   const form = e.target;
   const formData = new FormData(form);

   // You can pass formData as a fetch body directly:
   fetch('https://jsonplaceholder.typicode.com', { method: form.method, body: formData });

   // Or you can work with it as a plain object:
   const formJson = Object.fromEntries(formData.entries());
   console.log(formJson);
 }

 return (
   <App onSumbit={handleSubmit} onChange={handleChange}/>
 );
}


export default App;