content: import React from 'react';
  import _ from 'lodash';
  // import Select from 'react-select';
  import {Creatable} from 'react-select';
  import './appointment-client.less';
  
  
  class AppointmentClient extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {};
    }
  
    render() {
      const clients = _.get(this.props, 'clients.items', []);
      const selected = _.get(this.props, 'selected', {});
      const options = _.map(clients, (client) => {
        return {
          value: client.user.id,
          label: `${client.user.first_name} ${client.user.last_name}`,
          email: client.user.email,
          phone: client.user.phone,
        };
      });
      return (
        <div className="appointment-client">
          <div className="form-wrapper">
            <div className="field-group">
              <Creatable
                allowCreate={true}
                name="select-client"
                value={selected}
                options={options}
                onChange={this.changeClient.bind(this)}/>
              </div>
              <div className="designed-form">
                <div className="input-group">
                  <div className="field-group no-margin">
                    <input className="email" onChange={this.onChangeValue.bind(this, 'email')} value={selected.email || ''} placeholder="Email address"/>
                  </div>
                  <div className="field-group no-margin">
                    <input className="phone" onChange={this.onChangeValue.bind(this, 'phone')} value={selected.phone || ''} placeholder="Phone number"/>
                  </div>
                </div>
            </div>
          </div>
        </div>
      );
    }
  
    onChangeValue(type, e) {
  
    }
  
    changeClient(val) {
      this.props.onClientUpdated(val);
    }
  
  }
  
  AppointmentClient.propTypes = {};
  
  export default AppointmentClient;
  