import React from 'react';
import styled from 'styled-components';
import CircularProgress from 'material-ui/CircularProgress';
import PropTypes from 'prop-types';
import storify from '../../../UtilitiesFunctions/storify';

const color1 = 'official';

const FullScreenLoaderWrapper = styled.div`
	display: flex;
	align-items: center;
	position:fixed;
	width:100%;
	height:100%;
	left: 0;
    top: 0;
    background: rgba(0,0,0,0.5);
    z-index:999;
	.relative{
		width:100%;
		height:100%;
		.abs{
			position:absolute;
			top:0;
			bottom:0;
			left:0;
			right:0;
			margin:auto;
			width: 100px;
    		height: 100px;
		}
	}
`

export class FullScreenLoader extends React.Component{

	render() {
		const {storifyState,visibility} = this.props
		const vis = storifyState && storifyState.open || visibility 
		if(vis){
			return (
				<FullScreenLoaderWrapper>
					<div className="relative">
						<div className="abs">
							<CircularProgress size={80} thickness={5} />
						</div>
					</div>
				</FullScreenLoaderWrapper>
			)
		}
		else{
			return null
		}
	}
}



FullScreenLoader.PropTypes = {
  visibility: PropTypes.bool.isRequired
};

const actions = (store,render) => ({
	openFullScreenLoader : () => {store.open=true; render()},
	closeFullScreenLoader : () => {store.open=false; render()}
})

var {Wrap, openFullScreenLoader, closeFullScreenLoader} = storify(FullScreenLoader, actions, {open:false})
const FullScreenLoaderComp = Wrap
export { FullScreenLoaderComp , openFullScreenLoader,closeFullScreenLoader }