
import React, { Component } from 'react';
import Slider from 'react-slick'
import {IoTyComponentImage} from 'components'

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

		this.generateChildrenForSlider = this.generateChildrenForSlider.bind(this)
	}

	/*componentDidMount() {
		if (this.props.componentsList !== undefined && this.props.currentStepSelectedOptions.componentId === -1) {
			this.props.IoTyActions.selectComponent(this.props.componentsList[0].componentId)
		}
	}

	componentWillReceiveProps(nextProps) {
		// console.log('cwr nextProps', nextProps);
		if (nextProps.componentsList !== undefined && this.props.currentStepSelectedOptions.componentId === -1 && nextProps.currentStepSelectedOptions.componentId !== -1) {
			console.log('selectComponent triggered @IoTyVLabComponentSlider @componentWillReceiveProps #if ');
			this.props.IoTyActions.selectComponent(nextProps.componentsList[0].componentId)
		}
	}*/
	
	generateChildrenForSlider () {
		let sliderChildren = []
		let componentsList = this.props.componentsList
		if (componentsList !== undefined && componentsList !== null) {
			sliderChildren = componentsList.map(function (component, index) {
				return (
					<IoTyComponentImage 
						key={index} 
						component={component} 
						disable={this.props.disable}
						IoTyActions={this.props.IoTyActions}
						newCircuitData={this.props.newCircuitData}
						currentStepSelectedOptions={this.props.currentStepSelectedOptions}/>
				)
			}, this)
		}
		return sliderChildren
	}
	render() {
		let sliderSettings = {
			dots : false,
			speed: 500,
			infinite:false,
			slidesToShow: 1,
			slidesToScroll: 1
		},
		renderIoTyComponentImages = []
		renderIoTyComponentImages = this.generateChildrenForSlider()
		// console.log('renderIoTyComponentImages', renderIoTyComponentImages);
		return (
			<div className='row IoTyVLabComponentSlider' style={{paddingTop : '30px'}}>
				<Slider {...sliderSettings}>
					{renderIoTyComponentImages}
				</Slider>
			</div>
		);
	}
}
