import React, { Component } from 'react';

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import moment from 'moment';

import '../App.css';

import './SessionList.css';

import Navbar from './Navbar';

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

import uuidV1 from 'uuid/v1';

import { getActiveSessions } from '../selectors/coreSelectors';

import { getCurrentUser, getGroups, getCurrentGroup } from '../selectors/authSelectors';

class SessionList extends Component {

  }

  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);

  }

  onClickDelete(session, e) {

    e.preventDefault();

    e.stopPropagation();

    this.setState({

      sessionToDelete: session

    })

  }

  deleteSession = () => {

    const { sessionToDelete } = this.state;

    this.props.sessionsActions.deleteSession(sessionToDelete);

    this.setState({

      sessionToDelete: null

    })

  }

  render() {

    return (

      <div>

        <Navbar history={this.props.history} />

        <div className="container-fluid">

          <div className="row">

            <div className="col-md-6 col-md-offset-3">

              <ul className="list-group">

                {this.props.sessions.map((session) =>

                  <li className="list-group-item" key={session.get('_id')}>

                    <span onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>{session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}</span>

                    <a href="#delete" className="pull-right" onClick={ this.onClickDelete.bind(this, session) }>

                      <span className="material-icons">delete</span>

                    </a>

                  </li>

                )}

              </ul>

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

            </div>

          </div>

        </div>

        </Modal>

      </div>

    );

  }

}

function mapStateToProps(state, props) {

  return {

    sessions: getActiveSessions(state),

    currentUser: getCurrentUser(state),

    groups: getGroups(state),

    currentGroup: getCurrentGroup(state)

  };

}

function mapDispatchToProps(dispatch) {

  return {

    sessionsActions: bindActionCreators(sessionsActions, dispatch),

  }

}

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