import PropTypes from 'prop-types';
import React, { useState } from 'react';

function TodoForm(props) {
  const [input, setInput] = useState('');

  const onChange = (e) => {
    setInput(e.target.value);
  };

  const Submit = (e) => {
    e.preventDefault();
    props.onSubmit({
      id: Math.floor(Math.random() * 10000),
      text: input,
      isEdit: false,
      isComplete: false
    });
    setInput('');
  };

  return (
    <form onSubmit={Submit}>
      <div className='add-form'>
        <div className='form-control'>
          <input
            placeholder='Enter Item'
            value={input}
            onChange={onChange}
          />
        </div>
        <button className='btn' onClick={Submit}>
          Submit
        </button>
      </div>
    </form>
  );
}

export default TodoForm;

TodoForm.propTypes = {
  onSubmit: PropTypes.func,
};