import React from 'react';
import { useFormik } from 'formik'
import store from './Store'
const { uuid } = require('uuidv4')
const AddTodoForm = () => {
    const handleSubmit = () => {
        store.dispatch({
            type: "ADD_TODO", payload: {
                todo: {
                    ...formik.values,
                    started: false,
                    status: 'Todo',
                    id: uuid(),
                    minutes: formik.values.minutes ? formik.values.minutes : 0,
                    seconds: formik.values.seconds ? formik.values.seconds : 0
                }
            }
        })
        formik.resetForm()
    }
    const formik = useFormik({
        initialValues: {
            minutes: '',
            seconds: '',
            description: '',

        },
        onSubmit: handleSubmit
    })
    return (
        <form className="addTodoForm" onSubmit={formik.handleSubmit}>
            <h2>Add a Task</h2>
            <div className='inputContainer'>
                <label htmlFor="minutes">minutes:</label>
                <input type="number" max='59' min='0'
                    value={formik.values.minutes}
                    name='minutes'
                    id='minutes'
                    onChange={formik.handleChange} />
            </div>
            <div className='inputContainer'>
                <label htmlFor="seconds">seconds:</label>
                <input type="number" max='59' min='0'
                    onChange={formik.handleChange}
                    value={formik.values.seconds}
                    name='seconds'
                    id='seconds' />
            </div>
            <div className='inputContainer'>
                <label htmlFor="description">description:</label>
                <input type="text"
                    onChange={formik.handleChange}
                    value={formik.values.description}
                    name='description'
                    id='description' />
            </div>
            <button type="submit" className='btn submitForm'> submit</button>


        </form>
    );
}

export default AddTodoForm;