import React, { Component } from 'react'
import {
	ComponentsList,
	SourceIntensityController
} from 'components'

// import {getObjectById} from 'utils/ioty'

export default class IoTyVLabInstruction extends Component {
	constructor (props) {
		super(props)

		this.goToPrevStep = this.goToPrevStep.bind(this)
		this.goToNextStep = this.goToNextStep.bind(this)
	}

	
	goToNextStep () {
		this.props.IoTyActions.goToNextStep()
	}

	goToPrevStep () {
		this.props.IoTyActions.goToPrevStep()
	}
	
	render() {
		let {IoTyvLab, IoTyActions, newCircuitData, components, stepType, currentStepSelectedOptions, disabled, currentStepDetails} = this.props
		let ComponentsListProps = {}
		ComponentsListProps.disabled = disabled
		ComponentsListProps.components = components
		ComponentsListProps.newCircuitData = newCircuitData
		ComponentsListProps.currentStepSelectedOptions = currentStepSelectedOptions
		ComponentsListProps.IoTyActions = IoTyActions

		let renderNextStepButton = null,
			renderComponentList = null,
			showNextButton = false,
			renderPrevArrow = null,
			renderNextArrow = null
		switch (stepType) {
			case 'TYPE_CIRCUIT':
				showNextButton = currentStepSelectedOptions.componentOptionId !== -1
				renderComponentList = disabled ? 
												<div>
													<span>{currentStepDetails.stepInstruction}</span> 
													<div className='text-center componentList'>
														<ComponentsList {...ComponentsListProps} />
													</div>
												</div> : 
												<div>
													<span>{currentStepDetails.stepInstruction} &emsp;</span><br/>
													<div className='text-center componentList'>
														<ComponentsList {...ComponentsListProps} />
													</div>
												</div>
				break
			case 'TYPE_CODE':
				showNextButton = currentStepSelectedOptions.blankOptionId !== -1
				renderComponentList = <div className='componentList'>
										<span>{currentStepDetails.stepInstruction}</span>
									</div>
				break
			default:
				break
		}
		if (showNextButton) {
			if (IoTyvLab.currentStep !== IoTyvLab.steps.length) {
				renderNextStepButton = <div className="button text-center">
										<button type="button" className="btn" onClick={this.goToNextStep}>NEXT STEP &rarr;</button>
									</div>
				renderNextArrow = <div className='stepArrow pull-right' onClick={this.goToNextStep}>
						              <i className="fa fa-chevron-right" aria-hidden="true"></i>
						            </div>
				
			} else {
				renderComponentList = <div className='componentList'>
										<span>Check or Submit your circuit</span>
									</div>
				renderNextStepButton =  <div className="button text-center">
											<button type="button" className="btn" id='checkCircuitOutput' onClick={this.checkCircuit}>CHECK</button>&emsp;
											<button type="button" className="btn" onClick={this.submitCircuit}>SUBMIT</button>
										</div>
			}
		}
		if (IoTyvLab.currentStep !== 1) {
			renderPrevArrow = <div className='stepArrow pull-left' onClick={this.goToPrevStep}>
					              <i className="fa fa-chevron-left" aria-hidden="true"></i>
				            </div>
		}
		return (
			<div>
				<div className="well">
					<div className="currentLevel-Instructions">
						<span>{currentStepDetails.stepInstruction}</span>
					</div>
				</div>
			</div>
		);
	}
}
