import React from 'react';

import LinkManager from 'modularity-front';
import Modularity from 'modularity-front';

import {Col,Row} from 'react-materialize';
import './ClientForm.css';

let Module = Modularity.Module;

class ClientForm extends Modularity.Module {
	constructor(props) {
		super(props);
		this.state = {
		}
		this.FormInputs.onUpdate((e)=> this.updateState());
	}

	componentDidMount() {
		super.componentDidMount(); // must call 
		this.updateState();
	}

	updateState() {
		Object.keys(this.FormInputs.value).map((key,index)=> {
			this.setState({
				[key]: this.FormInputs.value[key].value
			})
		}
		);
		this.forceUpdate();
	}

	submitData(e) {
		e.preventDefault();
		this.formData.set(this.state)
	}

	render() {

		const data = Object.keys(this.FormInputs.value).map((key,index) => {
			let input = this.FormInputs.value[key]
			return (
				<Row>
					<Col s={1}></Col>
					<Col className ="client_info" s={2}>{input.required ? <span className="required">*</span> : ''} {key}</Col>
					<Col s={9}>
						<input onChange = {(e) => this.setState({[key]: e.target.value})} key={index} />
					</Col>
				</Row>
			)
		})

		return(
			<div>
				<form className="client_form">
				{data}
				</form>
			{super.render()}
			</div>

			);
				    
	}
}





ClientForm.EditPosition = "top-right";
ClientForm.Inputs = {
	FormInputs: {
		type: Module.Types.Object,
		defaultValue: {
	}
}
}

ClientForm.Outputs ={
	//
	formData:{

	}
}

ClientForm.Category = "sxoinas";
export default ClientForm;