import React, { Component } from 'react';

import './styles/ChallengeView.css';

import ChallengeNotFound from './ChallengeNotFound';

class ChallengeView extends Component {

constructor(props) {

super(props);

// this component will always be rendered with a challenge path

// get challengeTitle from url String

const challengeTitle = props.match.params.challengeTitle;

// get challenges Array[]

const { challenges } = props;

// declare challengeIndex Number

const challengeIndex = this.getIndex(challenges, challengeTitle);

this.state = {

challengeIndex,

currentChallenge: challengeIndex === -1 ? null : challenges[challengeIndex]

}

}

getIndex = ( challenges, challengeTitle ) => (

challenges.findIndex(c => (

c.title.toLowerCase().replace(" ", "-") === challengeTitle

))

)

// each time a new path is pushed to history

// this component receives new props

componentWillReceiveProps(nextProps) {

const nextChallengeTitle = nextProps.match.params.challengeTitle;

const { challenges } = nextProps;

const nextChallengeIndex = this.getIndex(challenges, nextChallengeTitle);

const nextChallenge = challenges[nextChallengeIndex];

// update the currently loaded challenge and set it to state

this.setState({

challengeIndex: nextChallengeIndex,

currentChallenge: nextChallenge

});

}

render() {

const {

toggleMap,

handleAdvanceToPrevChallenge,

handleAdvanceToNextChallenge } = this.props;

const { challengeIndex, currentChallenge } = this.state;

// if the user trys to navigate to a non-existant challenge

// we render the ChallengeNotFound component

return challengeIndex === -1 ? (

<ChallengeNotFound />

) : (

<div className="container">

<div className="top">

<div className="challenge-title">Challenge: {currentChallenge.title}</div>

<iframe

id="repl" frameBorder="0" width="100%" height="100%"

src={currentChallenge.repl}></iframe>

</div>

<div className="bottom">

<button

id="prev-button"

onClick={

challengeIndex === 0 ? null : (

() => handleAdvanceToPrevChallenge(challengeIndex)

)

}

className={

challengeIndex === 0 ? "btn disabled" : "btn"

}

>

<i className="fa fa-arrow-left"></i>

Previous Challenge

</button>

<button

id="next-button"

className="btn"

onClick={() => handleAdvanceToNextChallenge(challengeIndex)}

>

Next Challenge

<i className="fa fa-arrow-right"></i>

</button>

<button id="map-button" className="btn" onClick={() => toggleMap()}>

Map

<i className="fa fa-list"></i>

</button>

</div>

</div>

)

}

}

export default ChallengeView;