import React, { Component } from 'react';
import {Step} from 'components'
import {
	linearSearch,
	isStepCompleted
} from 'utils/ioty'
const NUMBER_OF_ITEMS_TO_DISPLAY = 9
const WINDOW_ARRAY_LENGTH = 5
//ITEM : can be a number or an arrow (left, right arrow to change steps)
export default class StepBar extends Component {
	constructor (props) {
		super(props)
		this.windowArray = []
		this.windowArrayStartIndex = 1
		
		this.generateWindowArray = this.generateWindowArray.bind(this)
		this.goToPrevStep = this.goToPrevStep.bind(this)	
		this.goToNextStep = this.goToNextStep.bind(this)
		this.goToStep = this.goToStep.bind(this)
		this.renderStepsWithArrowControls = this.renderStepsWithArrowControls.bind(this)
		this.renderStepsWithoutArrowControls = this.renderStepsWithoutArrowControls.bind(this)

	}

	generateWindowArray () {
		let steps = this.props.steps
		let start = this.windowArrayStartIndex
		let windowArray = []
		for (let i=start, count = 0;count<WINDOW_ARRAY_LENGTH;count++,i++) {
			windowArray.push(
				steps[i]
			)
		}
		return windowArray
	}

	goToPrevStep () {
		this.props.IoTyActions.goToPrevStep()
		let currentStep = this.props.currentStep
		let windowArray = this.windowArray
		if (currentStep !== 1) {
			currentStep = currentStep - 1
		}
		let targetIndex = linearSearch(windowArray, currentStep)
		if (this.windowArrayStartIndex > 1 && targetIndex < Math.floor(WINDOW_ARRAY_LENGTH/2)) {
			this.windowArray = []
			this.windowArrayStartIndex = this.windowArrayStartIndex - 1
			this.windowArray = this.generateWindowArray()
		}
		
	}
	goToNextStep () {
		this.props.IoTyActions.goToNextStep()
		let {currentStep, steps} = this.props
		let windowArray = this.windowArray
		if (currentStep !== steps.length) {
			currentStep = currentStep + 1
		}
		let targetIndex = linearSearch(windowArray, currentStep)
		if (this.windowArrayStartIndex <= steps.length-WINDOW_ARRAY_LENGTH-2 && targetIndex >= Math.ceil(WINDOW_ARRAY_LENGTH/2)) {
			this.windowArray = []
			this.windowArrayStartIndex = this.windowArrayStartIndex + 1
			this.windowArray = this.generateWindowArray()
		}                                                                                                                                                 
		
	}

	goToStep (prevStep, currentStep) {
		this.props.IoTyActions.goToStep(currentStep)
		let steps = this.props.steps
		let windowArray = this.windowArray
		let targetIndex = linearSearch(windowArray, currentStep),
			stepDifference = currentStep - prevStep
		stepDifference = stepDifference > 0 ? stepDifference : -1*stepDifference 
		if (currentStep === 1) {
			this.windowArrayStartIndex = 1
		} else if (currentStep === steps.length) {
			this.windowArrayStartIndex = steps.length -1 - WINDOW_ARRAY_LENGTH
		} else {
			let stepNumber = this.windowArray[targetIndex].stepNumber
			let index = linearSearch(steps, stepNumber)
			if (index <= 3) {	//current step is in first 4 elements of steps array
				this.windowArrayStartIndex = 1
			} else if (index >= steps.length - 4) { //current step is in last 4 elements of steps array
				this.windowArrayStartIndex = steps.length - 4 - 2
			} else {
				this.windowArrayStartIndex = index - 2
			}
		}
		this.windowArray = []
		this.windowArray = this.generateWindowArray()
	}

	renderStepsWithoutArrowControls () { //called when number of steps are <= NUMBER_OF_ITEMS_TO_DISPLAY
		let renderSteps = []
		renderSteps = this.props.steps.map(function (stepDetails, stepIndex) {
			return (
				stepDetails
			)
			// return stepDetails
		},this)
		return renderSteps
	}

	renderStepsWithArrowControls () {	//called when number of steps are > NUMBER_OF_ITEMS_TO_DISPLAY
		let renderSteps = []
		let {steps, currentStep} = this.props 
		let start = this.windowArrayStartIndex	//steps array index
		let windowArray = []
		let windowArrayLength = WINDOW_ARRAY_LENGTH

		renderSteps.push(steps[0])			//first step
		if (currentStep !== 1) {
			renderSteps.push(
				<div className='active step-arrow-btn'  onClick={this.goToPrevStep} key={'StepBarPrevArrow'}>
		              <i className="fa fa-chevron-left" aria-hidden="true"></i>
	            </div>
			)
		}
		
		for (let i=start,count=0;count<windowArrayLength;i++, count++) {		//[1,2,3,4,5,6,7,8,9,10]
			windowArray.push(steps[i])
		}
		this.windowArray = windowArray
		renderSteps = renderSteps.concat(windowArray)
		let className = ''
		if (currentStep !== steps.length) {
			let nextStepDetails = steps[currentStep]
			// console.log('nextStepDetails isLocked', nextStepDetails);
			if (nextStepDetails.isLocked) {
				// $('#StepBarNextArrow').addClass('disableArrow')
				className = ' disableArrow'
				// console.log('class added', $('#StepBarNextArrow').attr('class'));
			} else {
				$('#StepBarNextArrow').removeClass('disableArrow')
			}
			renderSteps.push(
				<div 
					className={'active step-arrow-btn'+className}
					onClick={this.goToNextStep} key={'StepBarNextArrow'} id='StepBarNextArrow'>
	              <i className="fa fa-chevron-right" aria-hidden="true"></i>
	            </div>
			)
			// renderSteps.push('>')
		}
		renderSteps.push(steps[steps.length-1])		
		return renderSteps
	}

	render() {
		// console.log('IoTyActions StepBar', this.props.IoTyActions);
		let renderSteps = [];
		let {currentStep, steps} = this.props
		if (steps.length <= NUMBER_OF_ITEMS_TO_DISPLAY ) {
			renderSteps = this.renderStepsWithoutArrowControls()
		} else {
			renderSteps = this.renderStepsWithArrowControls()
		}
		renderSteps = renderSteps.map(function (item, index) {
			return (
				item.hasOwnProperty('stepId') ? <Step
													key={item.stepId}
													step={item}
													stepNumber={item.stepNumber}
													goToStep={this.goToStep}
													{...this.props}/> : item
			)
		}.bind(this))
		return (
			<div>
				<div className='step-bar-container'>
      				<div className='step-bar text-center'>
       					<div className="step-row">
        					<div className="active level-heading ">
        						{renderSteps.length > 0 ? 'STEP'  : <span className='loading-dots'>Loading steps</span>}
    						</div>
        					{renderSteps}
              			</div>
     				</div>
     				<br/>
     			</div>
      		</div>
		);
	}
}
