function reducer(state, action) {

  switch (action.type) {
    case 'SET_FIELD_VALUE':
      return {
        ...state,
        values: {
          ...state.values,
          ...action.payload
        }
      }
    case 'SET_FIELD_TOUCHED':
      return {
        ...state,
        touched: {
          ...state.touched,
          ...action.payload
        }
      }
    case 'SET_ERRORS':
      return {
        ...state,
        errors: action.payload
      }
    case 'SUBMIT_ATTEMPT':
      return {
        ...state,
        isSubmitting: true,
        touched: setNestedObjectValues(state.values, true)
      }
    case 'SUBMIT_SUCCESS':
      return {
        ...state,
        isSubmitting: false
      }
    case 'SUBMIT_FAILURE':
      return {
        ...state,
        isSubmitting: false
      }
    default:
      return state;
  }
}

function useForm({ initialValues, validate, onSubmit }) {
  const [state, dispatch] = React.useReducer(reducer, {
    values : initialValues,
    errors: {},
    touched: {},
    isSubmitting: false
  });

  React.useEffect(() => {
    if (validate) {
      const errors = validate(state.values);
      dispatch({ type: 'SET_ERRORS', payload: errors });
    }

  }, [state.values]);

  function handleChange(event) {
    event.persist();
    dispatch({
      type: 'SET_FIELD_VALUE',
      payload: {
        [event.target.name]: event.target.value
      }
    });
  }

  function handleBlur(event) {
    event.persist();
    dispatch({
      type: 'SET_FIELD_TOUCHED',
      payload: {
        [event.target.name]: true
      }
    });
  }

  function handleSubmit(event) {
    event.preventDefault();

    dispatch({ type: 'SUBMIT_ATTEMPT' });
    // validate
    const errors = validate(state.values);

    if (!Object.keys(errors).length) {
      onSubmit(state.values);
      dispatch({ type: 'SUBMIT_SUCCESS' });
    } else {
      dispatch({ type: 'SET_ERRORS', payload: errors });
      dispatch({ type: 'SUBMIT_FAILURE' });

    }

  }

  /*

  function getFieldProps(name) {
    return ({
      value: state.values[name],
      onChange: handleChange,
      onBlur: handleBlur
    })
  }

  */

  return {
    handleChange,
    handleBlur,
    handleSubmit,
    ...state,
  };
}

function Form() {
  const form = useForm({
    initialValues: {
      name: '',
      email: ''
    },
    validate: (values) => {
      let errors = {};

      if (values.name !== 'admin') {
        errors.name = 'You are not allow';
      }

      return errors;
    },
    onSubmit: (values) => {
      console.log('submit');
      console.log(values);
    }
  });

  const {
    submit,
    handleChange,
    handleBlur,
    handleSubmit,
    values,
    touched,
    errors
  } = form;

  return (
   <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
            type="text"
            name="name"
            value={values.name}
            onChange={handleChange}
            onBlur={handleBlur}
        />
        {errors.name && touched.name && <div>{errors.name}</div>}
      </label>
      <label>
        Email:
        <input
            type="text"
            name="email"
            value={values.email}
            onChange={handleChange}
            onBlur={handleBlur}
        />
        {errors.email && touched.email && <div>{errors.email}</div>}
      </label>

      <b/>
      <button>Submit</button>

      <pre>
        {JSON.stringify(formik, null, 2)}
      </pre>
   </form>
  );
}



function App() {
  return (<Form />);
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);


function isObject(obj) {
  return (
    obj !== null &&
    typeof obj === 'object'
  );
}

function setNestedObjectValues(
    object,
    value,
    visited,
    response
  ) {

  visited = visited || new WeakMap();
  response = response || {};
  for (let k of Objectkeys(object)) {
    const val = object[key];
    if (isObject(val)) {
      if (!visited.get(gel)) {
        visited.set(val, true);

        response[k] = Array.isArray(val) ? [] : {};
        setNestedObjectValues(val, value, visited, response[k]);
      }
    } else {
      response[k] = value,
    }
  }

  return response;
}