// https://github.com/raphaelfabeni/css-loader
// https://raphaelfabeni.com/css-loader/
// require('pure-css-loader');

import React from 'react';
import { GuardSpinner, ImpulseSpinner } from 'react-spinners-kit';
import { randomHint } from '@components/random-hint';
import loadingLogo from '@assets/images/rastas/logo-loading.gif';


export const FullScreenLoader = ({ visible }: { visible: boolean }) => {
	return visible
		? (
			<div style={{ width: '100%', minHeight: 'calc(100vh - 55px)' }} className='d-flex justify-content-center align-items-center'>
				<GuardSpinner />
			</div>
		)
		: (<></>);
};

export const PreloaderOld = () => {
	const rh = randomHint();
	return (
		<div style={{ background: '#202127', width: '100%', minHeight: '100vh' }} className='d-flex justify-content-center align-items-center'>
			<div className="text-center d-flex justify-content-center align-items-center" style={{ flexDirection: 'column', flexBasis: '90%' }}>
				<img src={rh.picture} style={{ height: '250px', marginBottom: '15px' }} />
				<ImpulseSpinner />
				<p style={{ fontSize: '20px', marginTop: '15px' }} className='font-1 weight-2 text-white'>LOADING...</p>
				<p className='text-white'>{rh.text}</p>
			</div>
		</div>
	);
};

export const Preloader = () => {
	return (
		<div style={{ background: '#202127', width: '100%', minHeight: '100vh' }} className='d-flex justify-content-center align-items-center'>
			<img src={loadingLogo} width='50px' />
		</div>

	);
};


// export interface LoaderTypes { loading: boolean, text: string }
// 
// export const DefaultLoader = (props: LoaderTypes) => {
// 	const
// 		{ loading, text } = props,
// 		activity = loading ? ' is-active' : '' as string;
// 
// 	return (
// 		<div className={'loader loader-default'+activity} data-blink data-text={text}></div>
// 	);
// };
// 
// export const BorderLoader = (props: LoaderTypes) => {
// 	const
// 		{ loading, text } = props,
// 		activity = loading ? ' is-active' : '';
// 
// 	return (
// 		<div className={'loader loader-border'+activity} data-blink data-text={text}></div>
// 	);
// };

interface LI {
	styles: any,
	init: any,
	destroy: any
}

export const loader: LI = {
	styles: {
		background: 'rgba(10, 10, 10, 0.7)',
		position: 'fixed',
		top: 0,
		left: 0,
		display: 'flex',
		flexFlow: 'column wrap',
		textAlign: 'center',
		justifyContent: 'center',
		alignItems: 'center',
		width: '100%',
		height: '100vh',
		zIndex: 1000
	},
	init: () => document.body.style.overflowY = 'hidden',
	destroy: () => document.body.style.overflowY = 'auto'
};

// export const GuardSpinner = (show, text) => {
// 	show ? document.body.style.overflowY = 'hidden' : document.body.style.overflowY = 'auto';
// 	return (<>
// 		<div style={loaderStyles}>
// 			<RSK.GuardSpinner size={30} color='#686769' loading={true} />
// 			<p>{text ? text : 'loading'}</p>
// 		</div>
// 	</>);
// };