import React, { Component } from 'react';
import {
	BreadBoardConnectionPoint,
	SVGImage
} from 'components';

import {
	makeBreadBoardConnectionPointIds,
	getSlotIdByName
} from 'utils/ioty';

/*
	Constant variables for BreadBoard component
*/
const initTranslateX = 450
const initTranslateY = 115
const IMAGES_PATH = '/images/IoTy/'
const COMPANY_NAME = 'IoTy LABS'

export default class BreadBoard extends Component {
	constructor (props) {
		super(props)
	}

	render() {
		let renderBreadBoardConnectionPoints = []
		let translateX = initTranslateX, translateY = initTranslateY;
		/*
			In BreadBoard, to identify horizontal connection points
			Negative --> GROUND (GND), Positive --> SUPPLY (SUP)
			Upper Negative :  GND_U
			Down Negative  :  GND_D
			Upper Positive :  SUP_U
			Down Positive  :  SUP_D

		*/
		let id = 'GND_U'; 
		/*
			The below loop will render upper and lower horizontal connections
		*/
		for (let i=1;i<=200;i++, translateX+=10) {
			
			if (i>=1 && i<=50) {	//to display ( - ) symbol for first 50 points
				id = 'GND_U'; 
				if (i == 1) {
					renderBreadBoardConnectionPoints.push(
						<g key={id}>
							<text x={translateX} y={translateY+5} style={{'fill':'green', 'stroke' : 'none', 'fontSize' : '20px'}} className='labComponentLabelText'>
								-
							</text>
						</g>
					);
					translateX += 20;
				}
			} else if (i>=51 && i<=100) {	//to display ( + ) symbol for next 50 points
				id ='SUP_U';
				if (i == 51) {
					renderBreadBoardConnectionPoints.push(
						<g key={id}>
							<text x={translateX} y={translateY+5} style={{'fill':'red', 'stroke' : 'none', 'fontSize' : '15px'}} className='labComponentLabelText'>
								+
							</text>
						</g>
					);
					translateX += 20;
				}
			} else if (i>=101 && i<=150) {	//to display ( - ) symbol for next 50 points
				id = 'GND_D';
				if (i == 101) {
					renderBreadBoardConnectionPoints.push(
						<g key={id}>
							<text x={translateX} y={translateY+5} style={{'fill':'green', 'stroke' : 'none', 'fontSize' : '20px'}} className='labComponentLabelText'>
								-
							</text>
						</g>
					);
					translateX += 20;
				}
			} else if (i>=151 && i<=200) {	//to display ( + ) symbol for next 50 points
				id = 'SUP_D';
				if (i == 151) {
					renderBreadBoardConnectionPoints.push(
						<g key={id}>
							<text x={translateX} y={translateY+5} style={{'fill':'red', 'stroke' : 'none', 'fontSize' : '15px'}} className='labComponentLabelText'>
								+
							</text>
						</g>
					);
					translateX += 20;
				}
			}

			/*
				The `id` for horizontal connection points will be like GND_U[1-50] or GND_D[1-50] or SUP_U[1-50] or SUP_D[1-50]
			*/
			let pointId = id+(i%50 === 0 ? 50 : i%50);	//creates id for horizontal connection point
			renderBreadBoardConnectionPoints.push(
				<BreadBoardConnectionPoint 
					setMouseXY={this.props.setMouseXY}
					key={'X-'+i}
					ID={pointId}
					translateX={translateX}
					translateY={translateY}
					rotationAngle={0}/>
			);
			if (i % 5 == 0) {	//gives space horizontally for every five points
				translateX += 10;
			}
			if (i % 50 == 0) {	//goes to next line for every 50 points
				translateX = initTranslateX - 10;
				translateY += 10;
			}
			if (i % 100 === 0) { //for lower horizontal connection points
				translateX = initTranslateX - 10;
				translateY = 315;
			}
		}

		/*
			The below loop will render vertical connection points
		*/
		translateX = initTranslateX;
		translateY = initTranslateY + 40;
		/*
			For vertical connection points, `id` will be like
			[A-E]_[1-60]U or [F-J]_[1-60]D
		*/
		id = 65;	//ascii of `A`

		renderBreadBoardConnectionPoints.push(
			<g key={'IoTyLabsBreadBoard'}>
				<text x={initTranslateX+250} y={translateY+70} style={{'fill':'rgba(192,192,192,0.6)', 'stroke' : 'none', 'strokeWidth' : '0.3px', 'fontSize' : '22px', 'fontFamily' : 'Verdana'}} className='labComponentLabelText'>
					{COMPANY_NAME}
				</text>
			</g>
		);

		for (let i=1;i<=600;i++, translateX += 10) {
			let pointId = String.fromCharCode(id)+'_'+(i%60 == 0 ? 60 : i%60)+(i<=300 ? 'U' : 'D');	//creates id for vertical connection point
			if (id == 65 && i % 5 == 0) {	//displays the number(upper) for vertical connection point for every 5 points
				renderBreadBoardConnectionPoints.push(
					<g key={'UVG'+i}>
							<text x={translateX-5} y={translateY-7} style={{'fill':'gray', 'stroke' : 'none', 'fontSize' : '8px'}} className='labComponentLabelText'>
								{i}
							</text>
						</g>
				);
			}
			if (i % 60 == 1) {	//displays the alphabet(A-J) for every line on left side of BreadBoard
				renderBreadBoardConnectionPoints.push(
					<g key={'F'+String.fromCharCode(id)}>
							<text x={translateX} y={translateY+2} style={{'fill':'gray', 'stroke' : 'none', 'fontSize' : '8px'}} className='labComponentLabelText'>
								{String.fromCharCode(id)}
							</text>
						</g>
				);
				translateX += 20;
			}
			renderBreadBoardConnectionPoints.push(
				<BreadBoardConnectionPoint
					setMouseXY={this.props.setMouseXY}
					key={'Y-'+i}
					ID={pointId}
					translateX={translateX}
					translateY={translateY}
					rotationAngle={0}/>
			);
			if ( id == 74  && i%5 == 0) {	//displays the number(lower) for vertical connection point for every 5 points
				renderBreadBoardConnectionPoints.push(
					<g key={'DVG'+i}>
							<text x={translateX-5} y={translateY+12} style={{'fill':'gray', 'stroke' : 'none', 'fontSize' : '8px'}} className='labComponentLabelText'>
								{i%60 == 0 ? 60 : i%60}
							</text>
						</g>
				);
			}
			if (i % 60 == 0) {	//displays the alphabet(A-J) for every line on right side of BreadBoard
				renderBreadBoardConnectionPoints.push(
					<g key={'L'+String.fromCharCode(id)}>
							<text x={translateX+10} y={translateY+2} style={{'fill':'gray', 'stroke' : 'none', 'fontSize' : '8px'}} className='labComponentLabelText'>
								{String.fromCharCode(id)}
							</text>
						</g>
				);
				translateX = initTranslateX - 10;
				translateY += 10;
				id++;
			}
			if ( i % 300 == 0) {	//gives vertical space for second set of vertical connection points
				translateX = initTranslateX - 10;
				translateY = 245;
			}
		}

		return (
			<g>
				<rect 
					id='IoTyVLabBreadBoard'
					style={{"fill":'rgb(220,229,232)',"stroke":'rgb(0,0,0)', "strokeWidth" : '0.5'}} 
					width="680" height="240" 
					x="430" y="100" rx="5" ry="5">
				</rect>
				{renderBreadBoardConnectionPoints}
			</g>
		);
	}
}