import React, { Component } from 'react';
import {
	IoTyVLabInstruction,
	IoTyVLabOutputView
} from 'components'

import {
	objectLength
} from 'utils/ioty'

export default class IoTyVLabInstructionContainer extends Component {
	constructor (props) {
		super(props)
	}
	
	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 renderComponentList = null,
			component = null,
			label = null
		let {componentOptionId, blankOptionId, blankValue} = currentStepSelectedOptions
		if (this.props.IoTyvLab.hasOwnProperty('output') && objectLength(this.props.IoTyvLab.output) !== 0 &&
			IoTyvLab.currentStep === IoTyvLab.steps.length && 
			(componentOptionId !== -1 || blankOptionId !== -1 || 
			(currentStepSelectedOptions.hasOwnProperty('blankValue') && blankValue !== "") )) {
			//RENDER OUTPUT COMPONENT HERE
			component = <div className="IoTyVLOutput">
							<IoTyVLabOutputView {...this.props} />
						</div> 
			label = 'Output'
		} else {
			//RENDER INSTRUCTION COMPONENT HERE
			component = <div className="IoTyVLInstructions">
						<IoTyVLabInstruction {...this.props} />
					</div>
			label = 'Instruction'
		}

		return (
			<div>
				<div className="boxshadow">
					<label  className="boxheading">{label}</label>
					{component}
				</div>
			</div>
		);
	}
}
