import React, { Component } from 'react';

import { connect } from 'react-redux';

import { bindActionCreators } from 'redux';

import { Grid, Row, Col, ListGroup, ListGroupItem, Button, Modal } from 'react-bootstrap';

import moment from 'moment';

import '../App.css';

import Navbar from './Navbar';

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

import uuidV1 from 'uuid/v1';

class SessionList extends Component {

  state = {

    showModal: false,

    sessionToDelete: null

  }

  createSession = () => {

    const sessionId = uuidV1();

    this.props.sessionsActions.createSession(sessionId);

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

  }

  onClickDelete(session, e) {

    e.preventDefault();

    e.stopPropagation();

    this.setState({

      showModal: true,

      sessionToDelete: session

    })

  }

  closeModal = () => {

    this.setState({ showModal: false })

  }

  deleteSession = () => {

    const { sessionToDelete } = this.state;

    this.props.sessionsActions.deleteSession(sessionToDelete);

    this.setState({

      showModal: false,

      sessionToDelete: null

    })

  }

  render() {

    return (

      <div>

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

        <Grid fluid>

          <Row>

            <Col md={6} mdOffset={3}>

              <ListGroup>

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

                  <ListGroupItem

                    key={session.get('_id')}

                    onClick={() => this.props.history.push('/sessions/' + session.get('_id'))}>

                    {session.title || 'No title'} {session.get('_id')} {moment(session.get('date')).format('DD/MM/YYYY')}

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

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

                    </a>

                  </ListGroupItem>

                )}

              </ListGroup>

              <Button bsStyle="success" onClick={this.createSession}>Create new session</Button>

            </Col>

          </Row>

        </Grid>

        <Modal show={ this.state.showModal } onHide={ this.closeModal }>

          <Modal.Body>

            Are you sure?

          </Modal.Body>

          <Modal.Footer>

            <Button bsStyle="primary" onClick={ this.deleteSession }>Confirm</Button>

            <Button onClick={ this.closeModal }>Close</Button>

          </Modal.Footer>

        </Modal>

      </div>

    );

  }

}

function mapStateToProps(state, props) {

  return {

    sessions: state['sessions']

  };

}

function mapDispatchToProps(dispatch) {

  return {

    sessionsActions: bindActionCreators(sessionsActions, dispatch)

  }

}

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