import React, { Component } from 'react';
import {AceEditorComponent} from 'components'

export default class IoTyVLabCodePanel extends Component {
	constructor (props) {
		super (props)
		this.selectOptionHandler = this.selectOptionHandler.bind(this)
		this.setAnswerHandler = this.setAnswerHandler.bind(this)
		this.answerChangeHandler = this.answerChangeHandler.bind(this)
	}

	componentWillReceiveProps(nextProps) {
		if (this.props.currentStep !== nextProps.currentStep && nextProps.currentStepDetails.codeBlank.blankType === 'TYPE_TEXT') {
			let answerBox = document.getElementById('CodeBlankTextAnswer')
			if (answerBox !== null) {
				answerBox.value = ""
			}
		}
	}

	setAnswerHandler () {

	}

	answerChangeHandler () {
		let answer = this.refs.codeBlankTextAnswer.value
		this.props.IoTyActions.setCodeAnswer(answer)
	}

	selectOptionHandler (e) {
		this.props.IoTyActions.selectCodeOption(Number(e.target.value))
	}
	render() {
		// console.log('this.props.IoTyActions', this.props.IoTyActions);
		let {codeData, currentStep, steps, currentStepDetails, currentStepSelectedOptions, aceEditorInfo, aceEditorActions, userSelectedStepOptions} = this.props
		let {codeId, codeString, blankCharacter, options, languageId} = codeData
		let renderOptions = [],
			renderComponent = null,
			codeBlank = null
		if (currentStepDetails !== undefined && currentStepDetails !== null && currentStepDetails.stepType === 'TYPE_CODE') {
			codeBlank = currentStepDetails.codeBlank
			if (codeBlank.blankType === 'TYPE_OPTIONS') {
				renderOptions = currentStepDetails.codeBlank.blankOptions.map(function (option, index) {
					return (
						<option key={option.optionId} value={option.optionId}>{option.optionValue}</option>
					)
				})
				renderComponent =  <select onChange={this.selectOptionHandler} key={currentStep}>
									<option key={'blankOption0'} value={-1}>Choose option</option>
									{renderOptions}
								</select>
			} else if (codeBlank.blankType === 'TYPE_TEXT') {
				renderComponent = <input 
									type='text' 
									className='form-control' 
									ref='codeBlankTextAnswer' 
									name='CodeBlankTextAnswer' 
									id='CodeBlankTextAnswer' 
									onChange={this.answerChangeHandler}
									defaultValue=""
									placeholder='Answer'/>
			}
		}
		let AceEditorComponentProps = {}
		AceEditorComponentProps.currentStep= currentStep
		AceEditorComponentProps.aceEditorInfo = aceEditorInfo
		AceEditorComponentProps.codeData = codeData
		AceEditorComponentProps.steps = steps
		AceEditorComponentProps.currentStepDetails = currentStepDetails
		AceEditorComponentProps.userSelectedStepOptions = userSelectedStepOptions
		AceEditorComponentProps.aceEditorActions = aceEditorActions
		return (
			<div className='row IoTyVLabCodeEditor'>
				<div className='col-md-10'>
					<AceEditorComponent {...AceEditorComponentProps}/>
				</div>
				<div className='col-md-2 codeOptions'>
					{renderComponent}
				</div>
			</div>
		);
	}
}
