import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
	Dimmer as SemanticDimmer,
	Loader as SemanticLoader,
	Segment as SemanticSegment
} from 'semantic-ui-react';

import Logo from './pinpoint.gif';

import * as styles from './Style.less';

export default class Loader extends Component {
	static propTypes = {
		active: PropTypes.bool,
		children: PropTypes.node,
		minimal: PropTypes.bool
	};

	static defaultProps = {
		active: true,
		children: null,
		minimal: false
	};

	constructor(props) {
		super(props);

		this.state = {
			active: this.props.active,
			children: this.props.children
		};
	}

	componentWillReceiveProps(nextProps) {
		this.setState({
			active: nextProps.active,
			children: nextProps.children
		});
	}

	render() {
		return (
			<SemanticDimmer.Dimmable
				className={`${styles.Segment} ${this.props.minimal ? 'minimal' : ''}`}
				dimmed={this.state.active}
				as={SemanticSegment}
			>
				{
					!this.state.active && (
						this.state.children
					)
				}
				<SemanticDimmer
					className={`${styles.Dimmer} ${this.props.minimal ? 'minimal' : ''}`}
					active={this.state.active}
				>
					{
						this.props.minimal ? (
							<SemanticLoader active />
						) : (
							<img
								src={Logo}
								className={styles.Logo}
								alt="Loading..."
							/>
						)
					}
				</SemanticDimmer>
			</SemanticDimmer.Dimmable>
		);
	}
}
