content: import React from 'react';
  import FlyOut from 'components/uiElements/FlyOut/FlyOut';
  import Select from 'react-select';
  import _ from 'lodash';
  import 'react-day-picker/lib/style.css';
  import './big-calendar-service-picker.less';
  
  class BigCalendarServicePicker extends React.Component {
    constructor(...args) {
      super(...args);
      this.state = {};
    }
  
    render() {
      let options = [];
      const services = _.get(this.props.services, 'items', []);
      const selected = _.get(this.props, 'selectedService[0]', null);
    
      if (services.length) {
        options = _.map(services, (s) => {
          const obj = {
            value: _.get(s, 'service.id', ''),
            label: `${_.get(s, 'service.name', '')}`
          };
          return obj;
        });
      }
  
      return (
        <section className="big-calendar-service-picker" onMouseUp={(e) => {e.stopPropagation()}}>
          <div className="agent small dark">
            <Select
              placeholder="All services"
              name="select-client"
              value={selected}
              options={[{value: null, label: 'All Services'}, ...options]}
              onChange={this.onChangeService.bind(this)}/>
              <div className="shield" onMouseUp={(e) => {e.stopPropagation()}}></div>
          </div>
        </section>
  
      );
    }
  
    toggleFlyout() {
      this.setState({flyout: !this.state.flyout});
    }
  
    onChangeService(agent) {
      this.props.onSelectService(agent.value);
      this.timeout = setTimeout(() => {
        this.toggleFlyout();
      }, 200);
    }
  
    componentWillUnmount() {
      clearTimeout(this.timeout);
    }
  }
  
  BigCalendarServicePicker.propTypes = {};
  export default BigCalendarServicePicker;
  
  
  
  
  
          //  <div className="agent-display" onClick={this.toggleFlyout.bind(this)}>
          //     {this.props.selectedAgent || 'All Staff'}
          //     <span className="ion-ios-arrow-down"></span>
          //   </div>
  
          // <FlyOut className="agent-flyout" active={this.state.flyout}>
            
          // </FlyOut>
  