import * as React from 'react';
import ProgressBar, { ProgressBarProps } from '../../../containers/progress-bar/ProgressBar';
import { progressBarStyle, stepsWrapperStyle } from './progressBarCircleLine.style';
import StepWrapper from './components/StepWrapper';

class ProgressBarCircleLine extends React.PureComponent<ProgressBarProps> {
	render() {
		return (
			<ProgressBar
				{...this.props}
				withScrollMode={true}
				render={(currentStepId: number, scrollMode?: boolean) => {
					const currentStepIndex = this.props.stepsContainer.findIndex(
						step => step.id === currentStepId
					);

					return (
						<React.Fragment>
							<div
								data-automation={this.props.automationName}
								className={progressBarStyle(scrollMode, this.props.palette)}
							>
								<div className={stepsWrapperStyle()}>
									{this.props.stepsContainer.map((step, i) => {
										return (
											<StepWrapper
												numberOfSteps={this.props.stepsContainer.length}
												done={currentStepIndex > i}
												current={currentStepIndex === i}
												name={step.name}
												icon={step.icon}
												palette={this.props.palette}
												first={i === 0}
												last={i === this.props.stepsContainer.length - 1}
												key={i}
												scrollMode={scrollMode}
												translator={this.props.translator}
											/>
										);
									})}
								</div>
							</div>
						</React.Fragment>
					);
				}}
			/>
		);
	}
}

export default ProgressBarCircleLine;