import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import { Col } from 'react-bootstrap';
import { createSelector } from 'reselect';

import Lecture from './Lecture.jsx';
import Questions from './Questions.jsx';
import { resetHike } from '../redux/actions';
import { updateTitle } from '../../../redux/actions';
import { getCurrentHike } from '../redux/selectors';

const mapStateToProps = createSelector(
  getCurrentHike,
  state => state.hikesApp.shouldShowQuestions,
  (currentHike, shouldShowQuestions) => ({
    title: currentHike ? currentHike.title : '',
    shouldShowQuestions
  })
);

// export plain component for testing
export class Hike extends React.Component {
  static displayName = 'Hike';

  static propTypes = {
    // actions
    resetHike: PropTypes.func,
    // ui
    title: PropTypes.string,
    params: PropTypes.object,
    shouldShowQuestions: PropTypes.bool,
    updateTitle: PropTypes.func
  };

  componentWillMount() {
    const { updateTitle } = this.props;
    updateTitle(this.props.title);
  }

  componentWillUnmount() {
    this.props.resetHike();
  }

  componentWillReceiveProps({ params: { dashedName } }) {
    if (this.props.params.dashedName !== dashedName) {
      this.props.resetHike();
    }
  }

  renderBody(showQuestions) {
    if (showQuestions) {
      return <Questions />;
    }
    return <Lecture />;
  }

  render() {
    const {
      title,
      shouldShowQuestions
    } = this.props;

    return (
      <Col xs={ 12 }>
        <header className='text-center'>
          <h4>{ title }</h4>
        </header>
        <hr />
        <div className='spacer' />
        <section
          className={ 'text-center' }
          title={ title }>
          { this.renderBody(shouldShowQuestions) }
        </section>
      </Col>
    );
  }
}

// export redux aware component
export default connect(mapStateToProps, { resetHike, updateTitle })(Hike);
