import * as React from 'react';
import { Input } from 'src/FormUtilities/Input';
import { IUserProps } from '../userEntitities';

interface IProps{
    user:IUserProps
    onChange:(name:string, value:string)=>void
}

export const RegistrationForm =(props:IProps) =>{

        return(
            <div>
                <Input name={props.user.FirstName.Name}
                 label= {props.user.FirstName.Name}
                 placeholder= ''
                 value=''
                 onChange={props.onChange}
                 error= {props.user.FirstName.ErrorMessage} />

                  <Input name={props.user.Email.Name}
                 label= {props.user.Email.Name}
                 placeholder= ''
                 value=''
                 onChange={props.onChange}
                 error= {props.user.Email.ErrorMessage} />
            </div>
        )

    }

import * as actionsEnums  from './actionEnums';

    interface IUpdateField{
        type: actionsEnums.FIELD_CHANGED,
        value: string,
        name:string
    }
    export const updateField = (name:string, value:string):IUpdateField => ({
        'name' : name,
        type: actionsEnums.FIELD_CHANGED,
        'value': value
    });

export type UserAction = IUpdateField

import * as constants from './actionEnums';
import {UserAction} from './actions'
import { IField } from './userEntitities';

export interface IUserState {
    user:{
        Email:IField,
        FirstName: IField
    }
}
export const setDefaultUserState:() => IUserState = () => ({
    user: {
      Email: {
        ErrorMessage: '',
        Label:'Email',
        Name:'Email',
        Text: ''
      },
      FirstName: {
        ErrorMessage: '',
        Label:'Name',
        Name:'Name',
        Text: ''
      },
    }}
  )

export const userRegistrationReducer = (state= setDefaultUserState(), action:UserAction):IUserState =>{
    switch (action.type)
    {
        case constants.FIELD_CHANGED:
            return validateField(state, action.name, action.value)

        default: return state
    }
}

const validateField = (state: IUserState, name:string, value:string) => {

   if(name==='Name')
   {
       if(value===''){
        return {

                ...state, FirstName: { ...state.user.FirstName, ErrorMessage: "Invalid name" } }

        }
    }
   if(name==='Email'){
        if (!value.includes("@"))
        {
                return{
                    ...state,ErrorMessage:'Invalid Email', Label:'Email *'
                }

        }
    }
    return {
        ...state
    }

  };

import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { IState } from 'src/Redux lessons';
import {updateField, UserAction} from './actions'
import {RegistrationForm} from './Components/RegistrationForm'


const mapStateToProps = (state:IState)=>
({
        user: state.userRegistrationReducer.user
})

const mapDispatchToProps = (dispatch: Dispatch<UserAction>)=>{
    return {
        onChange:(name:string, value:string)=>dispatch(updateField(name, value))
    }
}

export const RegistrationFormContainer = connect(mapStateToProps, mapDispatchToProps)(RegistrationForm)

import { combineReducers} from 'redux';
import {IUserState, userRegistrationReducer} from '../Registration/reducers'
import { IUserColorState, userReducer} from './Lesson4/redux/userColorReducer'

export interface IState{
    userRegistrationReducer : IUserState,
    userReducer:IUserColorState
}

export const reducers = combineReducers<IState>({
    userReducer,
    userRegistrationReducer,
})