import PropTypes from 'prop-types';
import React from 'react';
import { first, pick, extend } from 'lodash';
import Exercise from '../helpers/exercise';

export default
class ExerciseIdentifierLink extends React.Component {

  static propTypes = {
    bookUUID: PropTypes.string,
    exerciseId: PropTypes.string.isRequired,
    project: PropTypes.oneOf(['concept-coach', 'tutor']),

    related_content: PropTypes.arrayOf(PropTypes.shape({
      chapter_section: PropTypes.arrayOf(PropTypes.number),
      title: PropTypes.string,
    })),

    chapter_section: PropTypes.arrayOf(PropTypes.number),
    title: PropTypes.string,
  }

  static contextTypes = {
    oxProject: PropTypes.string,
    bookUUID:  PropTypes.string,
  }

  getLocationInfo() {
    const info = this.props.related_content ?
      first(this.props.related_content) : this.props;

    return pick(info, 'chapter_section', 'title');
  }

  render() {
    const url = Exercise.troubleUrl(extend(
      this.getLocationInfo(),
      {
        exerciseId: this.props.exerciseId,
        project:    this.props.project || this.context.oxProject,
        bookUUID:   this.props.bookUUID || this.context.bookUUID,
      },
    ));

    return (
      <div className="exercise-identifier-link">
        ID# {this.props.exerciseId} | <a target="_blank" tabIndex={-1} href={url}>
          Suggest a correction
        </a>
      </div>
    );
  }

}

@@ -376,17 +376,16 @@
 tor'%5D),%0A
-%0A
     rela
@@ -470,33 +470,14 @@
 pes.
-arrayOf(PropTypes.number)
+object
 ,%0A  
@@ -514,17 +514,16 @@
    %7D)),%0A
-%0A
     chap
@@ -549,33 +549,14 @@
 pes.
-arrayOf(PropTypes.number)
+object
 ,%0A  
@@ -1061,24 +1061,35 @@
 xt.oxProject
+ %7C%7C 'tutor'
 ,%0A        bo

use chapter section