import { useDispatch, useSelector } from "react-redux";
import { useState, useEffect } from "react";
import axios from 'axios';
import {useDropzone} from "react-dropzone";
import { useForm } from "react-hook-form";


function MyField() {
   const { register, setValue, handleFormSubmit} = useForm();
  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>
  ));

  const firstNameStr = 'firstName';

  useEffect(() => {
    register({ name: firstNameStr.toString() }, { required: true });
  }, [register]);

  useEffect(() => {
    return () => files.forEach(file => URL.revokeObjectURL(file.preview));
  }, [files]);
   const [editableValue, setEditableValue] = useState('');
   const [formData, setFormData] = useState({
    name: '',
    email: '',
    password: '',
    shipping: '',
    prod_description: ''
  });
   const handleChange = (e) => setEditableValue(e.target.value);
   const dispatch = useDispatch()
 function handleSubmit(e) {

   e.preventDefault();
   const form = e.target;
   const formData = new FormData(form);

   const formErrors = e.formErrors;


   // 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);
 }

 const registerForm = (formData) => async (dispatch) => {
  try {
    dispatch({ type: 'REGISTER_FORM_REQUEST' });

    const config = {
      headers: {
        'Content-Type': 'application/json'
      }
    };
    const {data} = await axios.post('https://jsonplaceholder.typicode.com', formData, config);
    dispatch({ type: 'REGISTER_FORM_SUCCESS', payload: data });
  } catch (error) {
    console.log('Error submitting form:', error);
    //console.error('Error submitting form:', error);
    dispatch({ type: 'REGISTER_FORM_FAILURE', payload: error.message });
  }
};
dispatch(registerForm(formData));

  if(Object.keys(files).length === 0){
    console.log("file size 0");
    //this.setState({ hasError: true });
   } else {
    dispatch();
   }


 return (
    <>
<form >
     <label>
       <form>
      <input
        name="firstName"
        onChange={(e) => {
          setValue("firstName", e.target.value);
          handleFormSubmit((data) => console.log("data", data));
        }}
      />
    </form>
     </label>
     <hr />
     <p>
        Radio buttons:
        <label>
          <input type="radio" name="myRadio" value="option1" />
          Option 1
        </label>
        <label>
          <input
            type="radio"
            name="myRadio"
            value="option2"
            defaultChecked={true}
          />
          Option 2
        </label>
        <label>
          <input type="radio" name="myRadio" value="option3" />
          Option 3
        </label>
      </p>
     <label>
    <hr />
     <button type="reset">Reset form</button>
     <button type="submit">Submit form</button>
     </label>
   </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>
    </>
 );
}

export default MyField;