import React from 'react'

const FormNewItem = ({ onDescriptionChange, onCreateNewItem, description}) => {
    let placeholder = "New item..."

    return <form onSubmit={(event) => {
                // TODO: Lift state to Checklist
                event.preventDefault()
                if (description === '') return false
                onCreateNewItem()
            }}>
                <input type="text"
                    value={description}
                    onChange={(event) => {
                        event.preventDefault()
                        // TODO: Lift state to Checklist
                        onDescriptionChange(event.target.value);
                    }}
                    placeholder={placeholder}
                    onFocus={(e) => e.target.placeholder = ""}
                    onBlur={(e) => e.target.placeholder = this.placeholder}
                />
        < input type="Submit" value={'+'} readOnly />
    </form >
}



export default FormNewItem