import React, { Component } from 'react';

import {connect} from 'react-redux';

import {bindActionCreators} from 'redux';

import PropTypes from 'prop-types';

import Immutable from 'immutable';

import { Grid, Row, Col} from 'react-bootstrap';

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

import NotesList from './NotesList';

import NoteInput from './NoteInput';

class NotesContainer extends Component {

    render() {

        const { notes } = this.props;

        return (

          <Grid>

            <Row>

              <Col xs={12} md={12}>

                <NotesList notes={notes} />

              </Col>

            </Row>

            <Row>

              <Col xs={12} md={12}>

                <NoteInput addNote={this.props.actions.addNote} />

              </Col>

            </Row>

          </Grid>

        );

    }

}

NotesContainer.propTypes = {

    notes: PropTypes.instanceOf(Immutable.List).isRequired,

    actions: PropTypes.object.isRequired

}

function mapStateToProps(state, props) {

  return {

    notes: state.get('notes')

  };

}

function mapDispatchToProps(dispatch) {

  return {

    actions: bindActionCreators(notesActions, dispatch)

  }

}

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