import React, { Component } from 'react';
import {
	IoTyVLabCodePanel,
	IoTyVLabInstructionContainer,
	SVGPanel,
	StepBar,
	IoTyComponentSlider,
	WiFiConfigurationForm
} from 'components'

import {getComponentsListFromCircuitData} from 'utils/ioty'

export default class IoTyVLabContainer extends Component {
	constructor (props) {
		super(props);

		this.getComponentByStepType = this.getComponentByStepType.bind(this)
	}

	getComponentByStepType (stepType) {
		// console.log('called getComponentByStepType');
		let {IoTyvLab, IoTyActions, aceEditorInfo, AceEditorActions} = this.props
		let {steps, existedCircuitData, codeData, currentStep, userSelectedStepOptions} = IoTyvLab
		let currentStepDetails = '',
			currentStepSelectedOptions = ''
		if (steps !== undefined && steps !== null && steps.length > 0) {
				currentStepDetails = steps[currentStep - 1]			//currentStep value starts from 1
				currentStepSelectedOptions = userSelectedStepOptions[currentStep - 1]
		}
		let IoTyVLabCodePanelProps = {}
		IoTyVLabCodePanelProps.currentStep = currentStep
		IoTyVLabCodePanelProps.codeData = codeData
		IoTyVLabCodePanelProps.steps = steps
		IoTyVLabCodePanelProps.currentStepDetails = currentStepDetails
		IoTyVLabCodePanelProps.userSelectedStepOptions = userSelectedStepOptions
		IoTyVLabCodePanelProps.currentStepSelectedOptions = currentStepSelectedOptions
		IoTyVLabCodePanelProps.aceEditorInfo = aceEditorInfo
		IoTyVLabCodePanelProps.IoTyActions = IoTyActions
		IoTyVLabCodePanelProps.aceEditorActions = AceEditorActions
		

		let componentsList = []
		if (currentStepDetails !== undefined && currentStepDetails !== null && currentStepDetails.hasOwnProperty('components') && currentStepDetails.components !== "") {
			componentsList = getComponentsListFromCircuitData(currentStepDetails.components)
		}
		let IoTyComponentSliderProps = {}
		IoTyComponentSliderProps.currentStep = currentStep
		IoTyVLabCodePanelProps.codeData = codeData
		IoTyComponentSliderProps.componentsList = componentsList
		IoTyComponentSliderProps.newCircuitData = currentStepDetails.components
		IoTyComponentSliderProps.currentStepSelectedOptions = currentStepSelectedOptions
		IoTyComponentSliderProps.IoTyActions = IoTyActions
		IoTyComponentSliderProps.disable = Number(currentStepSelectedOptions.componentOptionId) !== -1

		let WiFiConfigurationFormProps = {}
		WiFiConfigurationFormProps.configWiFi = IoTyActions.configWiFi
		let component = null,
			componentTitle = null
		switch (stepType) {
			case 'TYPE_CODE':
				component = <IoTyVLabCodePanel {...IoTyVLabCodePanelProps}/>
				componentTitle = 'Code Editor'
				break
			case 'TYPE_CIRCUIT':
				component = <IoTyComponentSlider {...IoTyComponentSliderProps} />
				componentTitle = 'Choose component'
				break
			case 'TYPE_ROUTER_CONFIG':
				component = <WiFiConfigurationForm {...WiFiConfigurationFormProps} />
				componentTitle = 'WiFi Settings'
				break
			default:
				component = null
				componentTitle = 'Loading'
		}
		return {component, componentTitle}
	}
	render() {
		let {IoTyvLab, IoTyActions} = this.props
		let {steps, existedCircuitData, codeData, currentStep, userSelectedStepOptions} = IoTyvLab
		let IoTyVLabInstructionContainerProps = {},
			SVGPanelProps = {},
			currentStepDetails = '',
			currentStepSelectedOptions = ''

		if (IoTyvLab !== undefined && IoTyvLab !== null) {

			if (steps !== undefined && steps !== null && steps.length > 0) {
				currentStepDetails = steps[currentStep - 1]			//currentStep value starts from 1
				currentStepSelectedOptions = userSelectedStepOptions[currentStep - 1]
			}
			let componentsList = []
			if (currentStepDetails !== undefined && currentStepDetails !== null && currentStepDetails.hasOwnProperty('components') && currentStepDetails.components !== "") {
				componentsList = getComponentsListFromCircuitData(currentStepDetails.components)
			}

			SVGPanelProps.existedCircuitData = existedCircuitData
			SVGPanelProps.steps = steps
			SVGPanelProps.IoTyActions = IoTyActions
			SVGPanelProps.currentStepSelectedOptions = currentStepSelectedOptions
			SVGPanelProps.newCircuitData = currentStepDetails.components
			SVGPanelProps.currentStepDetails = currentStepDetails
			SVGPanelProps.userSelectedStepOptions = userSelectedStepOptions
			SVGPanelProps.currentStep = currentStep
			SVGPanelProps.arduinoLoaded = IoTyvLab.arduinoLoaded

			IoTyVLabInstructionContainerProps.IoTyvLab = IoTyvLab
			IoTyVLabInstructionContainerProps.IoTyActions = IoTyActions
			IoTyVLabInstructionContainerProps.components = componentsList
			IoTyVLabInstructionContainerProps.newCircuitData = currentStepDetails.components
			IoTyVLabInstructionContainerProps.currentStepDetails = currentStepDetails
			IoTyVLabInstructionContainerProps.stepType = currentStepDetails.stepType
			IoTyVLabInstructionContainerProps.currentStepSelectedOptions = currentStepSelectedOptions
			IoTyVLabInstructionContainerProps.disabled = Number(currentStepSelectedOptions.componentOptionId) !== -1
			// console.log('currentStepSelectedOptions.componentOptionId', currentStepSelectedOptions.componentOptionId);

		} else {
			alert ('Error : Something went wrong!')
			return
		}

		let componentDetails = this.getComponentByStepType(currentStepDetails.stepType)

		let StepBarProps = {}
		StepBarProps.currentStep = currentStep
		StepBarProps.steps = steps
		StepBarProps.IoTyActions = IoTyActions
		StepBarProps.currentStepSelectedOptions = currentStepSelectedOptions

		return (
			<div>
				<div className='row'>
					<StepBar {...StepBarProps} />
					<div className="col-xs-12 heading text-center">
						{ currentStepDetails.stepTitle ?  <span>STEP {IoTyvLab.currentStep} : {currentStepDetails.stepTitle}</span> : <span className='loading-dots'>Loading</span>}
					</div>
					<div className='col-md-12 IoTyLabCircuitView'>
						<SVGPanel {...SVGPanelProps} />
					</div>
				</div>
				<div className="row"></div>
				<div className='row'>
					<div className='col-md-4'>
						<IoTyVLabInstructionContainer {...IoTyVLabInstructionContainerProps} />
					</div>

					<div className='col-md-8'>
						<div className="boxshadow" id='IoTyLabCodeCircuitView'>
							<label  className="boxheading">{componentDetails.componentTitle}</label>
							{componentDetails.component}
						</div>
					</div>
				</div>
			</div>
		);
	}
}
