import React, {Component} from 'react'
import PropTypes from 'prop-types';
import {stringValueMandatoryValidator} from './validators.js'
import './ValidatingForm.css'

class ValidatingForm extends Component {
    static propTypes = {
        onValidSubmit: PropTypes.func.isRequired
    }
    state = {
        name: {
            value: '',
            messages: [],
        },
        role: {
            value: '',
            messages: [],
        }
    }
    validators = {
        name: [
            stringValueMandatoryValidator
        ]
    }


    addMessageTo = (field, message) => {
        const newField = {...this.state[field], messages: [...this.state[field].messages, message]}
        this.setState(prevState => ({...prevState, newField}))
    }

    validate = (field) => {
        const results = this.validators[field].map(validator => validator(this.state[field].value, field))
        results.forEach(result => this.addMessageTo(field, result.message))
        return results.reduce((acc, result) => acc && result.valid, true)
    }

    handleNameChange = event => {
        const {value} = event.target
        this.setState(prevState => ({...prevState, name: {...prevState.name, value}}))
    }

    handleSelectChange = event => {
        const {value} = event.target
        this.setState(prevState => ({...prevState, role: {...prevState.role, value}}))
    }

    onSubmit = () => this.validate('name') && this.props.onValidSubmit(this.state)


    render() {
        return (
            <form className="ValidatingForm" onSubmit={this.onSubmit}>
                <legend>Form Validation</legend>
                <div>
                    <label className="name">Name</label>
                    <input className="name" type="text" onChange={this.handleNameChange}/>
                </div>
                <div>
                    <label className="role">Role</label>
                    <select className="role" onChange={this.handleSelectChange}>
                        <option/>
                        <option>Member</option>
                        <option>Guest</option>
                    </select>
                </div>
            </form>
        )
    }
}

export default ValidatingForm