import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { Panel, FormGroup, ControlLabel, FormControl, Button, InputGroup, HelpBlock, Glyphicon } from 'react-bootstrap';
import '../App.css';
import * as sessionsActions from '../actions/sessionsActions';
import * as authActions from '../actions/authActions';
import _ from 'lodash';

class SessionForm extends Component {

  state = {
    createGroup: false
  }

  toggleCreateGroup = (e) => {
    e.preventDefault();
    const { createGroup } = this.state;
    this.setState({ createGroup: !createGroup });
  }

  onClickCreateGroup = (e) => {
    e.preventDefault();
    const groupName = this.groupName.value;
    this.props.sessionsActions.createGroupAndUpdateSession(this.props.currentSession, groupName);
  }

  onChange = (e) => {
    const { name, value } = e.target;
    const changes = { [name]: value }
    this.onChangeThrottle(changes);
  }

  onChangeThrottle = _.debounce((changes) => {
    this.props.sessionsActions.updateSession(this.props.currentSession, changes);
  }, 750)

  onGroupChange = (e) => {
    const groupId = parseInt(this.group.value, 10);
    const group = this.props.groups.find(group => group.id === groupId);

    this.props.sessionsActions.updateSession(this.props.currentSession, { group });
  }

  componentWillUpdate = (nextProps, nextState) => {
    if (nextState.createGroup && nextProps.createGroup.get('success')) {
      this.setState({ createGroup: false })
    }
  }

  renderCreateGroup = () => {
    const { createGroup } = this.props;
    const hasErrors = true === createGroup.get('error') && createGroup.get('errorMessages').has('name');

    let errors = [];
    if (hasErrors) {
      const errorMessages = createGroup.get('errorMessages').toArray();
      errors = errorMessages.map((message, key) => {
        return (
          <HelpBlock key={ key }>{ message }</HelpBlock>
        )
      })
    }

    if (this.state.createGroup) {
      return (
        <FormGroup validationState={ hasErrors ? 'error' : null }>
          <InputGroup>
            <FormControl
              type="text"
              placeholder="Enter a name for your group"
              inputRef={ ref => { this.groupName = ref; } } />
            <InputGroup.Button>
              <Button bsStyle="primary" onClick={ this.onClickCreateGroup }>Create</Button>
            </InputGroup.Button>
          </InputGroup>
          { errors }
          <hr />
          <Button onClick={ this.toggleCreateGroup }>Cancel</Button>
        </FormGroup>
      )
    }

    return (
      <FormGroup>
        <Button className="pull-right" bsSize="small" onClick={ this.toggleCreateGroup }>
          <Glyphicon glyph="plus" />  Create a new group
        </Button>
      </FormGroup>
    )
  }

  render() {

    if (!this.props.currentSession) {
      return (
        <form></form>
      )
    }

    return (
      <Panel>
        <form onSubmit={ e => { e.preventDefault() } }>
          <FormGroup>
            <ControlLabel>Title</ControlLabel>
            <FormControl
              name="title"
              defaultValue={ this.props.currentSession.title }
              onChange={ this.onChange }
              type="text"
              placeholder="Enter a title"
              inputRef={ ref => { this.title = ref; } }
            />
          </FormGroup>
          <FormGroup>
            <ControlLabel>Description</ControlLabel>
            <FormControl
              name="description"
              componentClass="textarea"
              defaultValue={ this.props.currentSession.description }
              onChange={ this.onChange }
              placeholder="Enter a description"
              inputRef={ ref => { this.description = ref; } }
            />
          </FormGroup>
          <FormGroup>
            <ControlLabel>Group</ControlLabel>
            <FormControl
              name="group"
              componentClass="select"
              value={ this.props.group ? this.props.group.id : '' }
              onChange={ this.onGroupChange }
              inputRef={ ref => { this.group = ref; } }>
              <option />
              { this.props.groups.map((group, key) =>
                <option key={ key } value={ group.id }>{ group.name }</option>
              ) }
            </FormControl>
          </FormGroup>
          <FormGroup>
            { this.renderCreateGroup() }
          </FormGroup>
        </form>
      </Panel>
    );
  }
}

function mapStateToProps(state, props) {

  let group;
  if (props.session && props.session.group) {
    group = state.groups.find(group => props.session.group.get('id') === group.id)
  }

  return {
    currentSession: props.session,
    createGroup: state.createGroup,
    groups: state.groups,
    group
  };
}

function mapDispatchToProps(dispatch) {
  return {
    sessionsActions: bindActionCreators(sessionsActions, dispatch),
    authActions: bindActionCreators(authActions, dispatch),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(SessionForm);