import React, { Component } from 'react';
import { Chip, CircularProgress } from 'material-ui';

export default class LogView extends Component {
	style = {
		position: "relative";
	}
	
	chipStyle = {
		fontWeight: "600",
		fontSize: "12px",
		display: "inline-block",
	}

    render() {
		let loadingStyle = {
			margin: "auto",
			textAlign: "center"
		};

		if (!this.props.isLoading) {
			loadingStyle.display = "none";
		}

		return (
			<div style={this.style}>
				{this.props.logs.map((value, key) => 
					<div key={key} className="line">
						<Chip style={this.ChipStyle}>{value.timestamp}</Chip> {value.message}
					</div>
				)}
				<CircularProgress size={80} thickness={5} style={loadingStyle} />
			</div>
		);
    }
}