import { reduxWrapper } from '../store'
import numeral from 'numeral';
import Script from 'next/script';

import '../css/style.css';

const m = Math.random();
numeral.register('locale', `locale_${ m }`, {
	delimiters: {
		thousands: ' ',
		decimal: ','
	},
	abbreviations: {
		thousand: 'k',
		million: 'm',
		billion: 'b',
		trillion: 't'
	},
	currency: {
		symbol: '₽'
	}
});
numeral.locale(`locale_${ m }`);

const WrappedApp = (props) => 
{
	const { Component, pageProps, } = props;

	return (
		<>
			{ props.observer && (
				<>
					<Script id="yandex-metrica" strategy={'afterInteractive'}>
						{`
							(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
							m[i].l=1*new Date();
							for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
							k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
							(window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

							ym(${ process.env.NEXT_PUBLIC_YANDEX_METRIKA_ID }, "init", { clickmap: true, trackLinks: true, accurateTrackBounce: true, webvisor: true });
							console.log(ym, ${ process.env.NEXT_PUBLIC_YANDEX_METRIKA_ID });
						`}
					</Script>
					<noscript>
						<div>
							<img src={`https://mc.yandex.ru/watch/${ process.env.NEXT_PUBLIC_YANDEX_METRIKA_ID }`} style={{ position:'absolute', left:'-9999px' }} alt=""/>
						</div>
					</noscript>
				</>
			) }
			<Component {...pageProps} />
		</>
	)
}

WrappedApp.getInitialProps = async (props) => 
{
	const { req } = props.ctx;
	
	let observer = true;
	if(req !== undefined && req.url !== null && req.url.indexOf("offstage") > -1)
	{
		observer = false;
	}

	if(req !== undefined && req.cookies !== undefined && req.cookies.observer !== undefined && req.cookies.observer === "true")
	{
		observer = false;
	}

	return {
		observer, 
	}
}

export default reduxWrapper.withRedux(WrappedApp);