import React from 'react';
import {TOOLBAR_HEIGHT, PALETTE_WIDTH, SIDEBAR_WIDTH} from '../constants/ViewConstants';
import '../../style/sass/cells.scss';
import cx from 'classnames';

class NetworkStatus extends React.Component {
	
	render() {
		
		let status = null;
		
		const style ={
			position: 'absolute',
			top: 0,
			left: PALETTE_WIDTH, 
			width: `calc(100vw - ${PALETTE_WIDTH}px)`,
			height: `calc(100vh - ${TOOLBAR_HEIGHT}px)`,
			background: 'rgba(255,255,255,0.8)',
			color: 'black',
		}
		
		const noborder = {
			border: 'none',
		}
		
		const messagestyle = {
			fontSize: '1.5em',
			paddingTop: 10,
		}
	
		
		
		if (this.props.status.status){
			const icon = cx({
				fa: true,
				'fa-4x': true,
				'fa-fw': true,
				'fa-cog': this.props.status.status === 'access',
				'fa-spin' : this.props.status.status === 'access',
				'fa-times'	: this.props.status.status === 'error',
				'fa-check'	: this.props.status.status === 'success',
			})
		
			status = <div style={style}>
						<div className="flexcolumn">
							<div>
								<div className="centered">
										<div style={noborder}>
											<i className={icon}></i>
											<div style={messagestyle}>{this.props.status.message}</div>
										</div>
								</div>
							</div>
						</div>
			    	 </div>
		}

		return status;	
	}
}

export default NetworkStatus;