import * as React from 'react'
import {formValidationConfigList} from './constants.FormValidations'

const ACTION_TYPES = {
  SET_FORM_VALUE: 'SET_FORM_VALUE',
}

const reducer = (state, action) => {
  switch(action.type) {
    case ACTION_TYPES.SET_FORM_VALUE:
      return {
        ...state,
        modalData: action.modalData,
      }
    default:
       return state
  }
}

const initialState = {
  modalData: {}
}

const FormValidation = (props) => {
  const [state, dispatch] = React.useReducer(reducer, initialState)

  const {modalData} = state

  const handleChange = (value, apiName) => {
    modalData[apiName] = value
    dispatch({
      type: ACTION_TYPES.SET_FORM_VALUE,
      modalData,
    })
  }

  return (
    <div className="form-validation">
      {
        formValidationConfigList.map((eachConfig, index) => {
          return (
            <React.Fragment key={index}>
              <label for={eachConfig.apiName}>{eachConfig.label}</label>
              <input
                type={eachConfig.dataType}
                id={eachConfig.id}
                required={eachConfig.required}
                value={modalData[eachConfig.apiName]}
                onChange={(e) => handleChange(e.target.value, eachConfig.apiName)}
              />
              {
                eachConfig.hasError && (
                  <div className="error-message>
                    {
                      eachConfig.errorMessage
                    }
                  </div>
                )
              }
              <br/>
            </React.Fragment>
          )
        })
      }
    </div>
  )
}

export default FormValidation