import React, { createContext, useState } from 'react'
import { validations } from 'utils/validations'

export const FormCtx = createContext({
 fields: {},
 errors: {},
 editFields: () => {
 },
})
const Form = ({ children, ...props }) => {
 const [fields, setFields] = useState({})
 const [errors, setErrors] = useState({
  ...props.customError,
 })
 const [isSubmit, setSubmit] = useState(false)
 const removeField = (id) => {
  delete fields[id]
  delete errors[id]
 }
 const addField = ({ field, value }) => {
  if (field && field.id) {
   setFields(prevState => ({
    ...prevState,
    [field.id]: { value, ...field },
   }))
   return
  }
  throw new Error(`please add field "id" for ${field}`)
 }
 const editFields = (event, { id, value }) => {
  if (event) {
   event.persist()
  }
  const field = fields[id]
  let val = event ? event.currentTarget.value : value
  setFields((prevState) => {
   return {
    ...prevState,
    [field.id]: {
     ...field,
     value: val,
    },
   }
  })
  return val
 }
 const validateField = (id, additionValidation) => {
  let error = ''
  let { value: fieldValue, validate, displayName, customrules = {} } = fields[id]
  if (additionValidation) {
   validate += '|' + additionValidation
  }
  const rules = validate ? validate.split('|') : ''
  if (rules.length) {
   for (const rule in rules) {
    if (rules.hasOwnProperty(rule)) {
     let ruleName = rules[rule]
     let length = ''
     if (rules[rule].includes('minLength') || rules[rule].includes('maxLength')) {
      length = ruleName.substr(9)
      ruleName = ruleName.substr(0, 9)
     }
     const validation = validations[ruleName] || {
      rule: customrules[ruleName].rule,
      formatted: customrules.formatted,
     }
     const isRuleSatisfied = ruleName !== 'required' && !fieldValue
      ? true
      : validation.rule(length).test(fieldValue.toString())
     if (!isRuleSatisfied) {
      error = validation.formatted.apply(null, [displayName || id, length])
     }
     if (error !== '') {
      break
     }
    }
   }
   setErrors(prevState => ({
    ...prevState,
    [id]: error,
   }))
  }
 }
 console.log(fields)
 return <form action='' className={props.classNames}>
  <FormCtx.Provider value={{
   fields, errors, setErrors, addField,
   editFields, validateField, isSubmit, setSubmit, removeField
  }}>
   {children}
  </FormCtx.Provider>
 </form>
}
export default Form

const dispatch = useDispatch()
     dispatch(yourActionCreator())