import React from 'react';
import lbry from '../lbry.js';
import { BusyMessage, Icon } from './common.js';
import Link from 'component/link';

class LoadScreen extends React.Component {
	static propTypes = {
		message: React.PropTypes.string.isRequired,
		details: React.PropTypes.string,
		isWarning: React.PropTypes.bool
	};

	constructor(props) {
		super(props);

		this.state = {
			message: null,
			details: null,
			isLagging: false
		};
	}

	static defaultProps = {
		isWarning: false
	};

	render() {
		const imgSrc = lbry.imagePath('lbry-white-485x160.png');
		return (
			<div className="load-screen">
				<img src={imgSrc} alt="LBRY" />
				<div className="load-screen__message">
					<h3>
						{!this.props.isWarning
							? <BusyMessage message={this.props.message} />
							: <span>
									<Icon icon="icon-warning" />{' ' + this.props.message}
								</span>}
					</h3>
					<span
						className={
							'load-screen__details ' +
							(this.props.isWarning ? 'load-screen__details--warning' : '')
						}
					>
						{this.props.details}
					</span>
				</div>
			</div>
		);
	}
}

export default LoadScreen;