import React, { Component } from 'react';

import {
	getImagePathByColorCode,
	removeOtherComponentOptions
} from 'utils/ioty'
export default class IoTyComponentImage extends Component {
	constructor (props) {
		super (props)

		this.clickHandler = this.clickHandler.bind(this)
	}

	/*componentDidMount () {
		console.log('cdm ', this.props.id);
		if (this.props.id === 0) {
			this.props.IoTyActions.selectComponent(this.props.component.componentId)
		}
	}*/

	clickHandler (divId, e) {
		let element = $('#'+divId)
		// console.log('clicked on ', element);
		if (element.hasClass('selectedIoTyVLabComponent')) {
			element.removeClass('selectedIoTyVLabComponent')
			// console.log('selectComponent triggered @IoTyComponentImage #clickHandler #if');
			this.props.IoTyActions.selectComponent(-1)
			return
		}
		// console.log('clickHandler >>');
		$('.selectedIoTyVLabComponent').removeClass('selectedIoTyVLabComponent')
		$('#'+divId).addClass('selectedIoTyVLabComponent')
		// console.log('selectComponent triggered @IoTyComponentImage #clickHandler');
		this.props.IoTyActions.selectComponent(this.props.component.componentId)
		// this.props.IoTyActions.selectCircuitOption(-1)
		// removeOtherComponentOptions(this.props.component.componentId, this.props.newCircuitData)
		
	}
	render() {
		// console.log('called IoTyComponentImage', this.props.id);
		let {componentId, componentName, componentMultimediaURL} = this.props.component
		if (componentMultimediaURL.startsWith('#')) {
			componentMultimediaURL = getImagePathByColorCode(componentMultimediaURL)
		}
		let className = ''
		if (componentId === this.props.currentStepSelectedOptions.componentId) {
			className=' selectedIoTyVLabComponent'
		}
		return (
			<div 
				id={'IoTyVLabComponent__'+componentId} 
				onClick={this.clickHandler.bind(this, 'IoTyVLabComponent__'+componentId)} 
				className={'slick-slide well IoTyVLabComponentImage'+className}>
					<img src={componentMultimediaURL} alt={componentName} className='center-block'/>
					<p className='text-center IoTyVLabComponentName'>{componentName}</p>
			</div>
		);
	}
}
