import React, { Component } from 'react';

export default class SVGImage extends Component {
	constructor (props) {
		super(props);
		this.onMouseUpHandler = this.onMouseUpHandler.bind(this)
		this.onMouseDownHandler = this.onMouseDownHandler.bind(this)
	}

	onMouseUpHandler () {
		if (this.props.componentMultimediaURL.toLowerCase().indexOf('push') !== -1) {
			this.props.setPushButtonState('OFF')
			let img = $('#IoTyVLabComponent_'+this.props.componentId)
			img.attr('src', '/images/IoTy/PUSH_BUTTON_RED.png')
		}
	}

	onMouseDownHandler () {
		console.log('clicked');
		if (this.props.componentMultimediaURL.toLowerCase().indexOf('push') !== -1) {
			this.props.setPushButtonState('ON')
			let img = $('#IoTyVLabComponent_'+this.props.componentId)
			img.attr('src', '/images/IoTy/PUSH_BUTTON_BLACK.png')
		}
	}

	render() {
		let {
			componentId,
			componentName,
			componentMultimediaURL,
			translateX,
			translateY
		} = this.props;
		// console.log(' x= , y=', translateX,translateY);
		return (
			<img 
				id={'IoTyVLabComponent_'+componentId}
				className='breadBoardComponent'
				src={componentMultimediaURL} 
				onMouseUp={this.onMouseUpHandler}
				onMouseDown={this.onMouseDownHandler}
				style={{left:translateX+'px', top: translateY+'px', pointerEvents : componentMultimediaURL.toLowerCase().indexOf('push') === -1 ? 'none' : 'all'}} />
		);
	}
}
/*
<g id={'component__'+componentName}>
				<image 
					id={'image__'+componentName}
					xlinkHref={componentMultimediaURL} 
					transform={"translate(" +translateX+ ","+translateY+")"} 
					width={width} 
					height={height} 
					onLoad={this.imageLoadingHandler}/>
			</g>*/
