import React from 'react';

export default class EditUserForm extends React.Component {
    constructor() {
        super();

        this.state = {
            firstName: '',
            lastName: '',
            userName: '',
            role: '',
            department: '',
            email: '',
            password:''
        };

        // this.handleChange = this.handleChange.bind(this);
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            firstName: nextProps.user.firstname,
            lastName: nextProps.user.lastname,
            userName: nextProps.user.username,
            role: nextProps.user.roles_name,
            // department: nextProps.user.department_id,
            email: nextProps.user.email,
            // password: nextProps.user.password
        });
    }

    handleChange(e) {
        // let firstName = e.target.firstname;
        // let lastName = e.target.lastName;
        // let userName = e.target.userName;
        // let role = e.target.role;
        // let email = e.target.email;

        this.state({
            [e.target.name]:  'test',
            // [e.target.name]:  e.target.value,
            // [lastName]: e.target.value
            // [userName]: e.target.value
            // [role]: e.target.value
            // [email]: e.target.value
        })
    }


    sendUser() {
        this.props.onClick(this.state);
    }

    render() {

        return(
            <div>
                <form className="form-horizontal" role="form" method="POST">
                    {/*{{ csrf_field() }}*/}
                    <div className="col-md-12">
                        <div className="form-group{{ $errors->has('firstname') ? ' has-error' : '' }}">
                            <label htmlFor="firstname" className="col-md-4">First Name</label>

                            <div className="col-md-8">
                                <input id="firstname" type="text" className="form-control" name="firstName"
                                       onChange={this.handleChange} value={this.state.firstName} required />

                                {/*@if ($errors->has('firstname'))*/}
                                {/*<span className="help-block">*/}
                                {/*<strong>{{ $errors->first('firstname') }}</strong>*/}
                                {/*</span>*/}
                                {/*@endif*/}
                            </div>
                        </div>
                    </div>
                    <div className="col-md-12">
                        <div className="form-group{{ $errors->has('lasttname') ? ' has-error' : '' }}">
                            <label htmlFor="firstname" className="col-md-4">Last Name</label>

                            <div className="col-md-8">
                                <input id="firstname" type="text" className="form-control" name="lastName"
                                       onChange={this.handleChange} value={this.state.lastName} required />

                                {/*@if ($errors->has('firstname'))*/}
                                {/*<span className="help-block">*/}
                                {/*<strong>{{ $errors->first('firstname') }}</strong>*/}
                                {/*</span>*/}
                                {/*@endif*/}
                            </div>
                        </div>
                    </div>
                    <div className="col-md-12">
                        <div className="form-group{{ $errors->has('firstname') ? ' has-error' : '' }}">
                            <label htmlFor="firstname" className="col-md-4">User Name</label>

                            <div className="col-md-8">
                                <input id="firstname" type="text" className="form-control" name="userName"
                                       onChange={this.handleChange} value={this.state.userName} required />

                                    {/*@if ($errors->has('firstname'))*/}
                                    {/*<span className="help-block">*/}
                                        {/*<strong>{{ $errors->first('firstname') }}</strong>*/}
                                    {/*</span>*/}
                                    {/*@endif*/}
                            </div>
                        </div>
                    </div>
                    <div className="col-md-12">
                        <div className="form-group{{ $errors->has('role') ? ' has-error' : '' }}">
                            <label htmlFor="role" className="col-md-4">Role</label>

                            <div className="col-md-8">
                                <input id="role" type="text" className="form-control" name="role"
                                       onChange={this.handleChange} value={this.state.role} required />

                                {/*@if ($errors->has('firstname'))*/}
                                    {/*<span className="help-block">*/}
                                        {/*<strong>{{ $errors->first('firstname') }}</strong>*/}
                                    {/*</span>*/}
                                {/*@endif*/}
                            </div>
                        </div>
                    </div>
                    <div className="col-md-12">
                        <div className="form-group{{ $errors->has('email') ? ' has-error' : '' }}">
                            <label htmlFor="email" className="col-md-4">E-mail Address</label>

                            <div className="col-md-8">
                                <input id="email" type="text" className="form-control" name="email"
                                       onChange={this.handleChange} value={this.state.email} required />

                                {/*@if ($errors->has('firstname'))*/}
                                {/*<span className="help-block">*/}
                                {/*<strong>{{ $errors->first('firstname') }}</strong>*/}
                                {/*</span>*/}
                                {/*@endif*/}
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}