import React, { Component } from 'react';

import { connect } from 'react-redux';

import Note from './Note';

import Navbar from './Navbar';

import SessionForm from './SessionForm';

import { getSession, getSessionNotes } from '../selectors/coreSelectors';

import './ReadOnlySession.css';

class ReadOnlySession extends Component {

  onClickSession = (e) => {

    e.preventDefault();

    this.props.history.push('/sessions/' +  this.props.match.params.id)

  }

  render() {

    return (

          <div>

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

            <div className="ml-4">

              <SessionForm session={this.props.currentSession} />

              <a className="text-primary font-weight-bold float-left" onClick={this.onClickSession} href="/sessions">Atteindre la session</a>

              <div>

                {this.props.notes.map((note) =>

                  <Note

                    note={ note }

                    key={ note._id}

                    annotationCategories={this.props.annotationCategories} />

                )}

              </div>

            </div>

          </div>

    );

  }

};

function mapStateToProps(state, props) {

  const sessionId = props.match.params.id;

  const currentSession = getSession(sessionId, state);

  const currentNotes = getSessionNotes(sessionId, state);

  return {

    currentSession,

    notes: currentNotes,

  };

}

export default connect(mapStateToProps)(ReadOnlySession);