import * as React from 'react';
import classnames from 'classnames';
import styles from './ProgressBar.sass';
import IReactComponentProps from '../../../common/structures/IReactComponentProps';

interface IProps {

	progress?: number;
	showNumber?: number;
	stripes?: boolean;

}

export default class ProgressBar extends React.Component<IProps & IReactComponentProps> {

	renderStripes () {
		return (
			<div
				role="progressbar"
				className={classnames(styles.ProgressBarStripes)}
				aria-valuetext="In progress, please wait …"
				aria-label="Working …"
				aria-busy="true"
			/>
		);
	}

	renderRegularBar () {
		return (
			<div
				role="progressbar"
				aria-label="Working …"
				aria-valuenow={this.props.progress}
				className={classnames(
					styles.ProgressBarIndicator,
					{
						[styles.ProgressBar__ShowNumber]: this.props.showNumber,
					},
				)}
				style={{ width: `${this.props.progress}%` }}
			/>
		);
	}

	render () {
		return (
			<div
				className={classnames(
					styles.ProgressBar,
					'ProgressBar', // this also needs to be globally accessible so other component styles can reference it
					this.props.className
				)}
				id={this.props.id}
				style={this.props.style}
			>
				{!this.props.stripes ? this.renderRegularBar() : this.renderStripes()}
			</div>
		);
	}

}