import React, { Component } from 'react';


require('./ActivityIndicator.scss');


class ActivityIndicator extends Component {


	renderOverlay(size) {
		const { background } = this.props;
		
		let ai = this.renderInline(size);

		return (
			<div className="activity-indicator-container">
				{ background ? <div className={ `activity-indicator-bg ${size}` }>{ ai }</div> : ai }
			</div>
		)
	}

	renderInline(size) {
		return (
			<div className={ `ball-pulse ${size}` }>
				<div></div>
				<div></div>
				<div></div>
			</div>
		);
	}


	render() {
		const { show = true, type = "overlay", size = "normal" } = this.props;
		if (!show) {
			return null;
		}

		switch (type) {
			case 'overlay':
				return this.renderOverlay(size);
			case 'inline':
			default:
				return this.renderInline(size);
		}
	}

}


export default ActivityIndicator;