import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import PropTypes from 'prop-types';
import GroupList from './GroupList';
import $ from 'jquery';
import { getUserGroups, submitNewGroup } from '../../../actions/userGroupsAction';
import { setSelectedGroup } from '../../../actions/setSelectedGroupAction';
import { getGroupMessages } from '../../../actions/groupMessagesAction';
import { getGroupMembers } from '../../../actions/groupMembersAction';
import { addFlashMessage } from '../../../actions/flashMessageAction';
import ModalFrame from '../../modal/ModalFrame';
import { ModalHeader, ModalBody, ModalFooter, CancelButton, SubmitButton } from '../../modal/SubModals';

const Brand = (props) => {
  return (
    <div id="brand-name">
      {props.brand_name}
    </div>
  );
};

const MobileToggleBtn = () => {
  return (
    <button type="button" className="mobile-nav-btn  navbar-toggle collapsed" data-toggle="collapse" data-target="#menu-content" aria-expanded="false" aria-controls="menu-content">
      <span className="sr-only">Toggle navigation</span>
      <span className="icon-bar"></span>
      <span className="icon-bar"></span>
      <span className="icon-bar"></span>
    </button>
  );
};

class Sidebar extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: false,
      newGroup: '',
      isLoading: false,
      error: ''
    };

    this.onGroupSelect = this.onGroupSelect.bind(this);
    this.openModal = this.openModal.bind(this);
    this.closeModal = this.closeModal.bind(this);
    this.onChange = this.onChange.bind(this);
    this.newGroupSubmit = this.newGroupSubmit.bind(this);
  }

  openModal(e) {
    e.stopPropagation();
    this.setState({
      isOpen: true
    });
  }

  closeModal() {
    // e.preventDefault();
    this.setState({
      isOpen: false,
      newGroup: '',
      error: ''
    });
  }

  onChange(e) {
    this.setState({
      error: '',
      [e.target.name]: e.target.value
    });
  }

  newGroupSubmit(e) {
    this.setState({ error: '', isLoading: true });
    e.preventDefault();
    this.props.submitNewGroup({
      group_name: this.state.newGroup,
      userId: this.props.signedInUser.user.id
    }).then(
      () => {
        this.props.addFlashMessage({
          type: 'success',
          text: 'Your group has been successfully created'
        });
        $('[data-dismiss=modal]').trigger({ type: 'click' });
      },
      ({ response }) => { this.setState({ error: response.data, isLoading: false }); }
    );
  }

  componentWillMount() {
    const userId = this.props.signedInUser.user.id;  // signedInUser.user.data{id, firstname,....}
    this.props.getUserGroups(userId).then(
      () => {
        if (this.props.userGroups.hasGroup === false) {
          this.props.setSelectedGroup({});
        } else {
          this.props.setSelectedGroup(this.props.userGroups.groups[0]);
          this.props.getGroupMessages(this.props.userGroups.groups[0].id);
          this.props.getGroupMembers(this.props.userGroups.groups[0].id);
        }
      }
    );
  }

  onGroupSelect(group) {
    this.props.setSelectedGroup(group);
    this.props.getGroupMessages(group.id);
    this.props.getGroupMembers(group.id);
  }

  render() {
    const { userGroups, selectedGroup } = this.props;
    return (
      <div>
        <aside className="navbar-default mobile-navbar">
          <div id="sidebar">
            <Brand brand_name='Post It'/>
            <MobileToggleBtn />

            <GroupList
              userGroups={userGroups}
              selectedGroup={selectedGroup}
              onGroupSelect={this.onGroupSelect}
              openModal={this.openModal}
            />
          </div>
        </aside>

        {/*Create Group Modal*/}
        <ModalFrame id='createGroup' show={this.state.isOpen}>
          <ModalHeader header='Group Name' onClose={this.closeModal}/>

          <ModalBody
            label='Group Name'
            field='newGroup'
            onChange={this.onChange}
            value={this.state.newGroup}
            errors={this.state.error}
          />

          <ModalFooter>
            <CancelButton onClick={this.closeModal} />
            <SubmitButton onSubmit={this.newGroupSubmit} isLoading={this.state.isLoading}/>
          </ModalFooter>
        </ModalFrame>
      </div>
    );
  }
}

function mapStateToProps(state) {
  // Whatever is returned will show up as props in Sidebar
  return {
    signedInUser: state.signedInUser,
    userGroups: state.userGroups,
    selectedGroup: state.selectedGroup
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators({
    getUserGroups,
    setSelectedGroup,
    getGroupMessages,
    getGroupMembers,
    submitNewGroup,
    addFlashMessage
  }, dispatch);
}

Sidebar.propTypes = {
  signedInUser: PropTypes.object.isRequired,
  getUserGroups: PropTypes.func.isRequired,
  userGroups: PropTypes.object.isRequired,
  setSelectedGroup: PropTypes.func.isRequired,
  selectedGroup: PropTypes.object
};

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

@@ -2484,24 +2484,69 @@
 'click' %7D);%0A
+        this.setState(%7B isLoading: false %7D);%0A
       %7D,%0A   

Fix bug that makes New Group submit button inactive (isLoading: true) when a user opens modal to add a second group after successfully creating the first one