import { useFormik } from 'formik';
import React from 'react';
import store from './Store'
const TodoFilterManager = () => {
    const handleSubmit = () => {
        store.dispatch({ type: 'SET_FILTER_BY_DESC', payload: { filterDesc: formik.values.filterDesc.toLowerCase() } })
        store.dispatch({ type: 'SET_FILTER_BY_STATUS', payload: { filterStatus: formik.values.filterStatus } })
    }
    const formik = useFormik({
        initialValues: {
            filterDesc: '',
            filterStatus: ''
        },
        onSubmit: handleSubmit
    })

    return (
        <form onSubmit={formik.handleSubmit} className='todoFilter'>
            <label htmlFor="search">search:</label>
            <input type="text"
                name='filterDesc'
                value={formik.values.filterDesc}
                id='search'
                onChange={formik.handleChange} />
            <select name="filterStatus" id="filterStatus"
                value={formik.values.filterStatus}
                onChange={formik.handleChange}>
                <option value="">all</option>
                <option value="Done">Done</option>
                <option value="Expired">Expired</option>
                <option value="Todo">Pending</option>
            </select>
            <button className='btn submitSearch' type='submit'> search</button>
        </form>
    );
}

export default TodoFilterManager;