import React from 'react';
import { Button, Grid, Row } from 'react-bootstrap';
import Utility from '../../../../shared/util/Utility';
import * as Lessons from '../../../../shared/stores/Lessons';
import * as Security from '../../../../shared/stores/Security';

export const Reducers = [Lessons, Security];

export class translateScreen extends React.Component {
  constructor(props) {
    super(props);

    this.checkAnswer = this.checkAnswer.bind(this);
    this.handleChange = this.handleChange.bind(this);
    this.displayQuestion = this.displayQuestion.bind(this);
  }
  componentWillMount() {
    this.setState({ answer: '' });
  }

  getOutput() {
    if (this.props.currentProcessedQuestionAnswered) {
      return (<Row>
        { (this.props.currentProcessedQuestionAnsweredCorrectly ?
          <h3>Rätt!</h3> : <h3>Fel, rätt svar: {this.props.processedQuestion.correctAlternative[0]}</h3>) }
      </Row>);
    }
    return '';
  }

  checkAnswer() {
    this.props.addUserAnswer(this.state.answer);

    if (this.props.currentQuestionIndex < this.props.lessonLength - 1) {
      setTimeout(() => {
        this.setState({ answer: '' });
        this.props.incrementQuestionIndex();
        this.props.processCurrentQuestion();
      }, 1500);
    } else {
      setTimeout(
        () => {
          this.props.setPageByName(`finish/${this.props.params.type}`);
        }, 1500);
    }
  }

  handleChange(event) {
    this.setState({ answer: event.target.value });
  }

  displayQuestion() {
    const questionText = {
      translate: (
        <div>
          <h2>Läsform: {this.props.processedQuestion.actualQuestionShapes[0]}</h2>
          {(this.props.processedQuestion.length > 1) ? <h2>Skrivform: {this.props.processedQuestion.actualQuestionShapes[1]} </h2> : ' '}
        </div>
      )
    };
    let resource;
    if (this.props.resourceRef && this.props.resourceRef.type === 'kanjidrawing') {
      resource = <object height="50em" type="image/svg+xml" data={this.props.resourceRef.location}>SVG error</object>;
    }
    return resource ? <div>{resource}<br />{questionText.translate}</div> : questionText.translate;
  }

  render() {
    return (
      <div>
        <Grid className="text-center">
          <Row>
            {this.displayQuestion()}
          </Row>
          <br />
          <Row>
            <input value={this.state.answer} onChange={this.handleChange} placeholder="Skriv in ditt svar här" />
          </Row>
          <Row>
            <Button type="submit" onClick={this.checkAnswer} disabled={this.state.checkDisable}>
              Kontrollera svar
            </Button>
          </Row>
          <Row>
            <div className="text-center">
              Fråga: {this.props.currentQuestionIndex + 1} / {this.props.lessonLength}
              <br />
              {this.props.correctAttempts} rätt {this.props.lessonSuccessRateMessage}
            </div>
          </Row>
          { this.getOutput() }
        </Grid>
      </div>
    );
  }
}

translateScreen.defaultProps = Utility.reduxEnabledDefaultProps({

}, Reducers);

translateScreen.propTypes = Utility.reduxEnabledPropTypes({

}, Reducers);


export default Utility.superConnect(this, Reducers)(translateScreen);

@@ -46,16 +46,40 @@
 rid, Row
+, FormControl, FormGroup
  %7D from 
@@ -279,16 +279,77 @@
 rity';%0A%0A
+import DisplayQuestion from '../../shared/DisplayQuestion';%0A%0A
 export c
@@ -1088,24 +1088,193 @@
 e.answer);%0A%0A
+    this.setState(%7B%0A      answerStyle: (this.props.processedQuestion.correctAlternative.some(ca =%3E ca === this.state.answer)%0A       ? 'success' :%0A         'error') %7D);%0A%0A
     if (this
@@ -1374,32 +1374,42 @@
  this.setState(%7B
+%0A         
  answer: '' %7D);%0A
@@ -1399,24 +1399,53 @@
   answer: ''
+,%0A          answerStyle: null
  %7D);%0A       
@@ -2545,76 +2545,794 @@
     
-%7Bthis.displayQuestion()%7D%0A          %3C/Row%3E%0A          %3Cbr /%3E%0A         
+%3CDisplayQuestion%0A              primaryText=%7Bthis.props.processedQuestion.actualQuestionShapes%5B0%5D%7D%0A              secondaryText=%7Bthis.props.processedQuestion.actualQuestionShapes%5B1%5D %7C%7C null%7D%0A              resourceRef=%7Bthis.props.processedQuestion.resourceRef%7D%0A              japaneseCharacters=%7Bthis.props.questionType === 'reading'%7D%0A            /%3E%0A          %3C/Row%3E%0A          %3CFormGroup%0A            validationState=%7Bthis.state.answerStyle%7D%0A            controlId=%22translateTextArea%22%0A          %3E%0A            %3CFormControl%0A              type=%22text%22%0A              name=%22translateText%22%0A              placeholder=%22Ditt svar%22%0A              value=%7Bthis.state.answer%7D%0A              onChange=%7Bthis.handleChange%7D%0A            /%3E%0A            %3CFormControl.Feedback /%3E%0A          %3C/FormGroup%3E%0A          %7B/*
  %3CRo
@@ -3347,17 +3347,17 @@
        %3C
-i
+I
 nput val
@@ -3456,32 +3456,35 @@
           %3C/Row%3E
+*/%7D
 %0A          %3CRow%3E
@@ -3666,55 +3666,85 @@
    %3C
-Row%3E%0A            %3Cdiv className=%22text-center%22%3E%0A
+br /%3E%0A          %3Cbr /%3E%0A          %3CRow%3E%0A            %3Cdiv%3E%0A              %3Cp%3E%0A  
     
@@ -3833,38 +3833,56 @@
 %0A              %3C
-br /%3E%0A
+/p%3E%0A              %3Cp%3E%0A  
               %7Bt
@@ -3947,24 +3947,43 @@
 ateMessage%7D%0A
+              %3C/p%3E%0A
             

Make translateScreen use DisplayQuestion