import React, { Component } from 'react';
import Modal from 'react-modal';
import PropTypes from 'prop-types';
import uuidV1 from 'uuid/v1';
import '../App.css';
import './CreateSession.css';

export default class CreateSession extends Component {

  static propTypes = {
    history: PropTypes.object.isRequired,
    group: PropTypes.object.isRequired,
    createSession: PropTypes.func.isRequired,
  };

  state = {
    createGroup: false,
    protocolOpen: false,
    title: "",
    description: ""
    // protocol:null
  }

  componentWillMount() {
    Modal.setAppElement('body');
  }


  openSessionModal = () => {
    this.setState({modalIsOpen: true});
  }

  createSession = () => {
    const sessionId = uuidV1();
    const groupName = this.props.group ? this.props.group.get('name') : null;
    const protocol = this.props.group ? this.props.group.get('protocol') : null;
    const {title, description} = this.state;

    this.props.createSession(sessionId, groupName, protocol, title, description);
    this.props.history.push('/sessions/' + sessionId);
  }

  getGroupProtocol = () => {
    if (this.props.group) {
      return this.props.group.protocol;
    }
    return null;
  }

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

  toggleProtocol = () => {
    this.setState({
      protocolOpen: !this.state.protocolOpen,
      show: false
    });
  }

  closeModal = () => {
    this.setState({modalIsOpen: false});
  }

  handleModalCloseRequest = (e) => {
    e.preventDefault();
    this.setState({modalIsOpen: false});
  }

  render() {

    return (
      <div>
      <a id="session-button" className="text-center" onClick={this.openSessionModal}>Créer une nouvelle session</a>
      <Modal
      className="Modal__Bootstrap modal-dialog"
      isOpen={this.state.modalIsOpen}
      onRequestClose={this.handleModalCloseRequest}
      >
        <div className="modal-content bg-primary w-75 mt-5">
          <div className="modal-body mt-3">
            <form onSubmit={ e => { e.preventDefault() } }>
              <div className="form-group">
                <label className="col-form-label text-secondary font-weight-bold pt-3">Titre</label>
                <input className="form-control text-primary w-100"
                  name="title"
                  onChange={ this.onChange }
                  type="text"
                  placeholder="Entrez un titre"
                />
              </div>
              <div className="form-group">
                <label className="col-form-label text-secondary font-weight-bold pt-3 mt-3">Description</label>
                <textarea className="form-control text-primary w-100"
                  type="textarea"
                  name="description"
                  onChange={ this.onChange }
                  placeholder="Entrez une description"
                  ></textarea>
              </div>
              <div className="form-group">
                <label className="col-form-label text-secondary font-weight-bold mt-5 ml-5" 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 className="text-secondary">{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 font-weight-bold m-3" onClick={this.createSession}>Commencer</button>
              </div>
            </form>
          </div>
        </div>
      </Modal>
      </div>
    );
  }
}