import React, { Component } from 'react';
export default class BreadBoardConnectionPoint extends Component {
	constructor (props) {
		super(props);
		this.onMouseEnterHandler = this.onMouseEnterHandler.bind(this);
		this.onMouseLeaveHandler =this.onMouseLeaveHandler.bind(this);
		this.styleConnectionPoint = this.styleConnectionPoint.bind(this);

		this.onMouseUpHandler = this.onMouseUpHandler.bind(this);
		this.onMouseDownHandler = this.onMouseDownHandler.bind(this);
		this.getMouseXY = this.getMouseXY.bind(this);

	}
	componentDidMount() {

	}
	/*
		to change the css of BreadBoardConnectionPoint onMouseEnter/onMouseLeave
	*/
	styleConnectionPoint (hover, hoverId, i, e) {
		$(e).css('stroke', hover ? 'green' : 'none');
		$('#'+hoverId).css('fill', hover ? 'red' : 'black');
		$('#'+hoverId).css('stroke', hover ? 'black' : 'none');
	}

	getMouseXY (svgId, evt) {
		var svg = document.getElementById(svgId);
		var pt = svg.createSVGPoint();
		pt.x = evt.clientX;
		pt.y = evt.clientY;
		let point = pt.matrixTransform(svg.getScreenCTM().inverse())
		// this.props.setMouseXY(point);
		return point;
	}

	onMouseEnterHandler () {
		// let id = this.props.ID;
		// if (id.startsWith('GND_U')) {
		// 	$("g[id^='GND_U']").each(this.styleConnectionPoint.bind(this, true, id));
		// } else if (id.startsWith('GND_D')) {
		// 	$("g[id^='GND_D']").each(this.styleConnectionPoint.bind(this, true, id));
		// } else if (id.startsWith('SUP_U')) {
		// 	$("g[id^='SUP_U']").each(this.styleConnectionPoint.bind(this, true , id));
		// } else if (id.startsWith('SUP_D')) {
		// 	$("g[id^='SUP_D']").each(this.styleConnectionPoint.bind(this, true , id));
		// } else if (id.endsWith('U')) {
		// 	for (let ascii=65;ascii<70;ascii++) {
		// 		let colId = '_'+id.replace(/\D/g,'')+"U";
		// 		let selector = "g[id$="+colId+"]";
		// 		$(selector).each(this.styleConnectionPoint.bind(this, true, id));
		// 	}
		// } else if (id.endsWith('D')) {
		// 	for (let ascii=70;ascii<75;ascii++) {
		// 		let colId = '_'+id.replace(/\D/g,'')+"D";
		// 		let selector = "g[id$="+colId+"]";
		// 		$(selector).each(this.styleConnectionPoint.bind(this, true, id));
		// 	}
		// }
	}

	onMouseLeaveHandler () {
		let id = this.props.ID;
		// let options = this.props.options;
		// options.map(function (option, index) {
		// 	let breadBoardConnectionPointIds = makeBreadBoardConnectionPointIds(option.slots);
		// 	breadBoardConnectionPointIds.map(function (breadBoardConnectionPointId) {

		// 	});
		// });
		// if (id.startsWith('GND_U')) {
		// 	$("g[id^='GND_U']").each(this.styleConnectionPoint.bind(this, false, id));
		// } else if (id.startsWith('GND_D')) {
		// 	$("g[id^='GND_D']").each(this.styleConnectionPoint.bind(this, false, id));
		// } else if (id.startsWith('SUP_U')) {
		// 	$("g[id^='SUP_U']").each(this.styleConnectionPoint.bind(this, false, id))
		// } else if (id.startsWith('SUP_D')) {
		// 	$("g[id^='SUP_D']").each(this.styleConnectionPoint.bind(this, false , id))
		// } else if (id.endsWith('U')){
		// 	for (let ascii=65;ascii<70;ascii++) {
		// 		let colId = '_'+id.replace(/\D/g,'')+"U";
		// 		let selector = "g[id$="+colId+"]";
		// 		$(selector).each(this.styleConnectionPoint.bind(this, false, id));
		// 	}
		// } else if (id.endsWith('D')) {
		// 	for (let ascii=70;ascii<75;ascii++) {
		// 		let colId = '_'+id.replace(/\D/g,'')+"D";
		// 		let selector = "g[id$="+colId+"]";
		// 		$(selector).each(this.styleConnectionPoint.bind(this, false, id));
		// 	}
		// }
	}

	onMouseUpHandler (evt) {
		// let x2y2 = this.getMouseXY('svgPanel', evt);
		// console.log('x2y2', x2y2);
	}

	onMouseDownHandler (evt) {
		// console.log('mouse clicked', e.pageX, e.pageY, e.target.getBoundingClientRect);
		let x1y1 = this.getMouseXY('svgPanel', evt);
		// console.log('x1y1',x1y1);	
	}

	render() {
		return (
			<g 
				transform={"translate("+ this.props.translateX+","+this.props.translateY+") rotate("+this.props.rotationAngle+")"} 
				id={this.props.ID}
				className='breadBoardConnectionPoint'
				onMouseEnter={this.onMouseEnterHandler}
				onMouseLeave={this.onMouseLeaveHandler}
				onMouseUp={this.onMouseUpHandler}
				onMouseDown={this.onMouseDownHandler}>
				<path fill='#e6e6e6' d="M0,1.5c-0.828,0-1.5-0.672-1.5-1.5H-3c0,1.657,1.343,3,3,3c1.657,0,3-1.343,3-3H1.5C1.5,0.828,0.829,1.5,0,1.5z"></path>
				<path fill="#bfbfbf" d="M0-1.5c0.828,0,1.5,0.672,1.5,1.5H3c0-1.657-1.343-3-3-3c-1.657,0-3,1.343-3,3h1.5C-1.5-0.828-0.828-1.5,0-1.5z"></path>
				<circle cx="0" cy="0" r="1.5"></circle>
			</g>
		);
	}
}
