import React, { Component } from 'react';

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

		this.renderLocked = this.renderLocked.bind(this)
		this.renderCompleted = this.renderCompleted.bind(this)
		this.renderCurrentStep = this.renderCurrentStep.bind(this)
		this.handleClick = this.handleClick.bind(this)
	}


	handleClick (e) {
		console.log('called on click step');
		// console.log('clicked on step', this.props.currentStep, this.props.step.stepNumber);
		this.props.goToStep(this.props.currentStep, this.props.step.stepNumber)
	}

	renderLocked () {
		let id = 'IoTyVLabStep__'
		const {step, currentStep} = this.props;
		let isCurrentStep = currentStep === step.stepNumber;
		return (
			<span className='step-btn' id={id+step.stepNumber} style={isCurrentStep ? {borderBottom: '3px solid #FF6F00',fontSize:'20px'} : null}>
			<img className="step-lock" src='/images/lock.png'/>
			<span>{step.stepNumber}</span>
			</span>
		);
	}

	renderCompleted () {
		let id = 'IoTyVLabStep__'
		const {step, currentStep} = this.props;
		let isCurrentStep = currentStep === step.stepNumber;
		return (
			<span className='step-btn' id={id+step.stepNumber} onClick={this.handleClick} style={isCurrentStep ? {borderBottom: '3px solid #FF6F00',marginLeft:'10px',fontSize:'20px',marginBottom:'-15px',marginTop:'-15px'} : null}>
			<span>{step.stepNumber}</span>
			</span>
		);
	}

	renderCurrentStep () {
		let id = 'IoTyVLabStep__'
		const {step, currentStep} = this.props;
		let isCurrentStep = currentStep === step.stepNumber;
		return (
			<span className='step-btn' id={id+step.stepNumber} style={isCurrentStep ? {borderBottom: '3px solid #FF6F00',marginLeft:'10px',fontSize:'20px',marginBottom:'-15px',marginTop:'-15px'} : null}>
			<span>{step.stepNumber}</span>
			</span>
		);
	}

	render() {
		let {step, currentStep} = this.props
		let isCurrentStep = currentStep === step.stepNumber
		let renderStep = null
		if (step.isLocked) {
			renderStep = this.renderLocked()
		} else if (isCurrentStep) {
			renderStep = this.renderCurrentStep()
		} else {
			renderStep = this.renderCompleted()
		}
		return (
			<div className='active'>
				{renderStep}
			</div>
		);
	}
}
