import React, { Component } from 'react';

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import Modal from 'react-modal';

import uuidV1 from 'uuid/v1';

import '../App.css';

import * as sessionsActions from '../actions/sessionsActions';

import * as authActions from '../actions/authActions';

// import _ from 'lodash';

import './CreateSession.css';

class CreateSession extends Component {

    state = {

      createGroup: false,

      protocolOpen: false,

      // protocol:null

    }

  componentWillMount() {

    Modal.setAppElement('body');

  }

  openSessionModal = () => {

    this.setState({modalIsOpen: true});

    let groupName = null;

    // let protocol = null;

    if(this.props.currentGroup) {

      groupName = this.props.currentGroup.get('name');

      // protocol = this.props.currentGroup.get('protocol');

    }

    if(groupName === null) {

      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;

      if(groupName != null) {

        const group = this.props.groups.find((g) => g.name === groupName);

        if(group) {

          return(

          this.setState({

          protocol: group.get('protocol')

          }))

        }

      }

    }

  }

  createSession = () => {

    const sessionId = uuidV1();

    let groupName = null;

    let protocol = null;

    if(this.props.currentGroup) {

      groupName = this.props.currentGroup.get('name');

      protocol = this.props.currentGroup.get('protocol');

    }

    if(groupName === null) {

      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;

      if(groupName != null) {

        const group = this.props.groups.find((g) => g.name === groupName);

        if(group) {

          protocol = group.get('protocol');

        }

      }

    }

    this.props.sessionsActions.createSession(sessionId, groupName, protocol);

    this.props.history.push('/sessions/' + sessionId);

  }

  getGroupProtocol = () => {

    let groupName = null;

    let protocol = null;

    if(this.props.currentGroup) {

      groupName = this.props.currentGroup.get('name');

      protocol = this.props.currentGroup.get('protocol');

    }

    if(groupName === null) {

      groupName = (this.props.currentUser)?this.props.currentUser.get('default_group'):null;

      if(groupName != null) {

        const group = this.props.groups.find((g) => g.name === groupName);

        if(group) {

          protocol = group.get('protocol');

          return(

            protocol

          );

        }

      }

    }

  }

  // 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 groupName = e.target.value;

    const group = this.props.groups.find((g) => g.get('name') === groupName);

    this.props.sessionsActions.updateSession(this.props.currentSession, { group: groupName, protocol: group?group.get('protocol'):'' });

  }

  componentWillUpdate = (nextProps, nextState) => {

    if (nextState.createGroup && nextProps.createGroup.get('success')) {

      this.setState({ createGroup: false })

    }

  }

  toggleProtocol = () => {

    this.setState({

      protocolOpen: !this.state.protocolOpen,

      show: false

    });

  }

  closeModal = () => {

    this.setState({modalIsOpen: false});

  }

  handleModalCloseRequest = (e) => {

    // opportunity to validate something and keep the modal open even if it

    // requested to be closed

    e.preventDefault();

    this.setState({modalIsOpen: false});

  }

  render() {

    // if (!this.props.currentSession) {

    //   return (

    //     <form></form>

    //   )

    // }

    return (

      <div>

      {/* <button id="session-button" type="button" className="btn btn-primary btn-lg" onClick={ this.openModal}>Créer une nouvelle session</button> */}

      <a id="session-button" onClick={this.openSessionModal}>Créer une nouvelle session</a>

      <Modal

      className="Modal__Bootstrap modal-dialog bg-primary"

      // closeTimeoutMS={150}

      isOpen={this.state.modalIsOpen}

      onRequestClose={this.handleModalCloseRequest}

      >

        <div className="panel-default">

          <div className="card-body rouded-bottom">

            <form onSubmit={ e => { e.preventDefault() } }>

            <div className="form-group">

                <label className="col-form-label text-secondary">Group</label>

                {/* <p>{this.props.currentSession.group}</p> */}

              </div>

              <div className="form-group">

                <label className="col-form-label text-secondary">Titre</label>

                <input className="form-control text-primary"

                  name="title"

                  // defaultValue={ this.props.currentSession.title }

                  onChange={ this.onChange }

                  type="text"

                  placeholder="Entrez un titre"

                />

              </div>

              <div className="form-group">

                <label className="col-form-label text-secondary">Description</label>

                <input className="form-control text-primary"

                  type="textarea"

                  name="description"

                  // defaultValue={ this.props.currentSession.description }

                  onChange={ this.onChange }

                  placeholder="Entrez une description"

                />

              </div>

              <div className="form-group">

                <label className="col-form-label text-secondary" onClick={this.toggleProtocol}>Protocole de la prise de note {this.state.protocolOpen?<span className="material-icons protocol-toggle">&#xE313;</span>:<span className="material-icons protocol-toggle">&#xE315;</span>}</label>

                <div className={ `collapse ${this.state.protocolOpen?'in':''}`} >

                  {/* <pre>{JSON.stringify(this.props.currentSession.protocol, null, 2)}</pre> */}

                  <pre>{JSON.stringify(this.getGroupProtocol(), null, 2)}</pre>

                </div>

              </div>

              <div className="text-center">

              <button id="create-button" type="submit" className="btn btn-secondary btn-lg text-primary" onClick={this.createSession}>Commencer</button>

              </div>

            </form>

          </div>

        </div>

      </Modal>

      </div>

    );

  }

}

function mapStateToProps(state, props) {

  let group;

  if (props.session && props.session.get('group')) {

    group = state.get('groups').find(group => props.session.get('group') === group.get('name'))

  }

  return {

    currentSession: props.session,

    createGroup: state.get('createGroup'),

    groups: state.get('groups'),

    group

  };

}

function mapDispatchToProps(dispatch) {

  return {

    sessionsActions: bindActionCreators(sessionsActions, dispatch),

    authActions: bindActionCreators(authActions, dispatch),

  }

}

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