import React from 'react';
import LegalNameModel from './legal-name.js';
import TextInput from '../../atoms/text-input/text-input.jsx';
import { ModelListener } from 'front';
import '../../less/grid.less';

/**\

    title: LegalName
    category: component
    description: A form for editing first and last name
    props:
        label[String|null]:
            The label for component. default is "Legal Name". Set to null
            to not show any label.

\**/
class LegalName extends ModelListener {
    static defaultProps = {
        model: LegalNameModel
    };

    constructor(props) {
        super(props);
    }

    render() {
        let label;

        if (this.props.label === undefined) {
            label = 'Legal Name';
        } else {
            label = this.props.label;
        }

        return (
            <div className="legal-name">
                <div className="row t50-50">
                    <TextInput placeholder="First Name"
                        label={ label }
                        value={ this.model.first }
                        update={ this.update.bind(this, 'first') } />
                    <TextInput placeholder="Last Name"
                        value={ this.model.last }
                        update={ this.update.bind(this, 'last') } />
                </div>
            </div>
        );
    }
}

export default LegalName;
