form.jsx

import React, {Component} from 'react'
import ReactDOM from 'react-dom'
import {Form, Decorator as FormsyElement} from 'formsy-react'
import Embeddable from '../components/embeddable.jsx'

export class PageContainer extends Component {

	constructor(props) {
		super(props)
	}

	render() {
		return (
			<div>
				{this.renderTitle()}
				<PetitionForm
					actionType={this.props.routeParams.petitionId == 'new' ? 'create' : 'update'}
					containerType="page"
					petition={this.props.routeParams.petitionId == 'new' ? {} : {title: 'title', text: 'text'}}
					ref="form"/>

				<button onClick={() => {this.onExternalErrors({title: 'title is invalid'})}}>
					Set external errors
				</button>
			</div>

		)
	}

	renderTitle() {
		if (this.props.routeParams.petitionId == 'new') {
			return <h1>Add New Petition</h1>
		}
		return <h1>Edit Petition</h1>
	}


	onExternalErrors(errors) {
		this.refs.form.setValidationErrors(errors)
	}


}

export class PetitionForm extends Component {

	constructor(props) {
		super(props)
		this.state = {
			currentlyEditing: {},
			validationErrors: {}
		}
	}

	render() {
		return (
			<Form onValidSubmit={(formModel) => {this.onSubmit(formModel)}}
						onChange={(formModel, hasChanged) => {
                  this.onChange(formModel, hasChanged)}}
						validationErrors={this.state.validationErrors}>
				{this.props.containerType == 'page' ? (
				<FormPage pristinePetition={this.props.petition}
									currentlyEditingPetition={this.state.currentlyEditing}/>) : <div></div>}
			</Form>
		)
	}

	onChange(formModel, hasChanged) {
		this.setState({
			currentlyEditing: formModel
		})

	}

	onSubmit(formModel) {
		console.log(`trigger a ${this.props.actionType} petition: ${JSON.stringify(formModel)}`)
	}

	setValidationErrors(validationErrors) {
		this.setState({validationErrors})
	}


}

export class FormPage extends Component {

	render() {

		return (
			<div>
				<PetitionFormFields
					petition={this.props.pristinePetition}/>
				<PetitionFormActionButtons
					name="state"
					petition={this.props.pristinePetition}/>
				<Embeddable
					petition={this.props.currentlyEditingPetition}/>
			</div>
		)
	}
}

export class PetitionFormFields extends Component {
	render() {
		return (
			<div>
				<FormFieldInput name="title"
												required
												value={this.props.petition.title}
				/>
				<FormFieldInput name="text"
												required
												value={this.props.petition.text}
				/>
				<FormFieldInput name="goal"
												value={this.props.petition.goal}
				/>
			</div>
		)
	}
}

@FormsyElement()
export class FormFieldInput extends Component {
	render() {
		return (
			<div>
				<label htmlFor={this.props.name}>{this.props.name}</label>
				<input id={this.props.name}
							 onChange={(e) => {this.onChange(e)}}
							 value={this.props.getValue()}
							 type="text"/>
				<span>{this.props.getErrorMessage()}</span>
			</div>
		)
	}

	onChange(e) {
		e.stopPropagation()
		this.props.setValue(e.currentTarget.value)
	}
}

@FormsyElement()
export class PetitionFormActionButtons extends Component {
	render() {
		return (
			<div>
				<button
					onClick={this.onClick('create')}>
					Create
				</button>
				<button
					onClick={this.onClick('draft')}>
					Draft
				</button>
			</div>
		)
	}

	onClick(action) {
		return () => {
			this.props.setValue(action)
		}
	}
}