/*
Fully JS EndofYear Sitenotice, init events etc
See detailed documentation in Dev/mediawiki
*/

function initEndOfYearSitenotice( endOfYearDiv, contentForSlides, donatePageUrl = '/wiki/Donate', isLocalFileSystem = false ) {

	const localStorageName = 'dismiss-end-of-year-sitenotice';
	
	let valid = true;
	
	// Basic error checks
	if( ! contentForSlides ) {
		console.error('Dev: contentForSlides is missing but needed. Please check for errors');
		valid = false;
	}

	// If the user has the dismissed less than a week ago, it will not be executed
	if( isLocalFileSystem && localStorage.getItem(localStorageName) > Date.now() ) valid = false;
	
	// If it failed at least on test
	if( ! valid ) {
		$('#donate-end-of-year').hide();
		return;
	}
	
	// Remove item (because it's not valid) if it exists
	if( isLocalFileSystem ) localStorage.removeItem(localStorageName);
	
	// --------------------
	// Settings and Globals
	
	const settings = {
		durationSlide: 10000, // Milliseconds
		durationProgressbar: 9500, // Milliseconds
		mobileBreak: 660, // Pixels
		paymentBottomBorderSpace: 15, // Pixels
	};
	
	const refs = {
		playNextTimeout: null,
	};
	
	const states = {
		slideIndex: null,
		slideCount: 0,
		isPlay: null,
		crypto: { payBitcoin: '', payMonero: '', payEthereum: '', },
	};
	
	// ---
	// DOM

	let content = $(`
	    <div class="h1"> <span>Please support us!</span> </div>
	    <div class="slideshow">
	        <div class="content"></div>
	        <div class="control">
	            <div class="progress"></div>
	            <div class="slide-buttons"></div>
	            <div class="flow"> <i class="fa-solid fa-pause is-play"></i> <i class="fa-solid fa-play is-pause"></i> </div>
	        </div>
	    </div>
	    <div class="payment">
	        <div class="h2">PayPal</div>
	        <div class="pay-via-paypal-module"></div>
	        <div class="h2 crypto">Or Crypto<br>Addresses</div>
	        <div class="crypto-container">
	            <div class="code-select btc" data-button-image-src="/w/images/thumb/2/29/BC_Logo_.png/40px-BC_Logo_.png"></div>
	            <div class="code-select xmr" data-button-image-src="/w/images/thumb/0/05/Monero-symbol-1280.png/40px-Monero-symbol-1280.png"></div>
	            <div class="code-select eth" data-button-image-src="/w/images/thumb/2/2c/Ethereumlogo.png/40px-Ethereumlogo.png"></div>
	        </div> <a href="${donatePageUrl}" target="_blank">Or Other Payment Options</a>
	    </div>
	`);
	
	endOfYearDiv = $(endOfYearDiv);
	endOfYearDiv.append( content );
	
	let mobileDonateButtonTemplate = $('<span class="mobile-donate-button">Donate</span>');

	// ---
	// FNs
	
	function switchSlide( slideButton ) {
		endOfYearDiv.find('.slideshow .content > div').removeClass('active');
		endOfYearDiv.find('.slideshow .control > .slide-buttons span').removeClass('active');
		
		endOfYearDiv.find('.slideshow .slide-buttons span.active').removeClass('active');
		slideButton.addClass('active');
		states.slideIndex = slideButton.index();
		let slide = endOfYearDiv.find('.slideshow .content > div').eq( states.slideIndex );
		slide.addClass('active');
		slide.css( 'opacity', 0 );
		slide.animate( { opacity: 1 }, 300 );
	}
	
	function playNext( isPlay ) {
		if( isPlay != 'auto' ) {
			clearTimeout( refs.playNextTimeout );
			endOfYearDiv.find('.slideshow .progress').stop( true );
			
			if( isPlay != states.isPlay ) {
				if( typeof isPlay == 'boolean' ) states.isPlay = isPlay;
				else if( isPlay == 'toggle' ) states.isPlay = ! states.isPlay;
				endOfYearDiv.find('.slideshow .control .flow i').removeClass('active');
				endOfYearDiv.find('.slideshow .control .flow i.is-' + ( states.isPlay ? 'play' : 'pause'  ) ).addClass('active');
			}
			
			if( ! states.isPlay ) return;
		}
		
		if( states.slideIndex == null || states.slideIndex >= states.slideCount - 1 ) states.slideIndex = 0;
		else states.slideIndex++;
		switchSlide( endOfYearDiv.find( '.slideshow .slide-buttons span' ).eq( states.slideIndex ) );
		endOfYearDiv.find('.slideshow .progress').css( 'width', '1%' ).stop( true ).animate( { width: '100%' }, settings.durationProgressbar );
		refs.playNextTimeout = setTimeout( () => playNext( 'auto' ), settings.durationSlide );
	}
	
	// -----
	// Setup
	
	// Imported Initializations
	
	endOfYearDiv.find('.pay-via-paypal-module').payViaPaypal('init');
	endOfYearDiv.find('.payment .crypto-container .code-select').codeSelect('init');
	
	// Content
	
	endOfYearDiv.find('.content').html( contentForSlides );

	if( endOfYearDiv.find('.content h1').length > 0 ) {
		endOfYearDiv.find( '.h1 span' ).html( endOfYearDiv.find('.content h1').html() );
		endOfYearDiv.find('.content h1').remove();
	}

	if( endOfYearDiv.find('.content [data-crypto-addresses]').length > 0 ) {
		let crypto = JSON.parse( endOfYearDiv.find('.content [data-crypto-addresses]').attr('data-crypto-addresses') );
		endOfYearDiv.find('.content [data-crypto-addresses]').remove();
		states.crypto = { ...crypto };
	}
	
	if( ! states.crypto.payBitcoin ) console.warn('Dev: payBitcoin is missing. Please check for errors');
	if( ! states.crypto.payMonero ) console.warn('Dev: payMonero is missing. Please check for errors');
	if( ! states.crypto.payEthereum ) console.warn('Dev: payEthereum is missing. Please check for errors');

	endOfYearDiv.find('.payment .btc .code').text( states.crypto.payBitcoin );
	endOfYearDiv.find('.payment .xmr .code').text( states.crypto.payMonero );
	endOfYearDiv.find('.payment .eth .code').text( states.crypto.payEthereum );
	
	// Add Mobile donate link button
	
	if( $(window).width() <= settings.mobileBreak ) {
		endOfYearDiv.find('.content > div').append( mobileDonateButtonTemplate.clone() );
	}
	
	// Iterate over slides
	
	let maxHeight = 0;

	endOfYearDiv.find('.slideshow .content > div').each( function() {
		$(this).css('display','block');
		if( $(this).outerHeight() > maxHeight ) maxHeight = $(this).outerHeight();
		$(this).css('display','');
		endOfYearDiv.find('.slideshow .slide-buttons').append( '<span' + ( $(this).hasClass('active') ? ' class="active"' : '' ) + '></span>' );
		states.slideCount++;
	});
	
	// If not mobile include the height of payment
	if( $(window).width() > settings.mobileBreak ) {
		let paymentAdjustedHeight = endOfYearDiv.find('.payment').outerHeight() - endOfYearDiv.find('.slideshow .control').outerHeight() - settings.paymentBottomBorderSpace;
		if( paymentAdjustedHeight > maxHeight ) maxHeight = paymentAdjustedHeight;
	}
	
	endOfYearDiv.find('.slideshow .content').height( maxHeight );
	
	endOfYearDiv.find('.payment').animate( { opacity: 1}, 300 );
	
	// ------
	// Events

	endOfYearDiv.find('.slideshow .slide-buttons span').on( 'click', function() {
	  console.info([ states, $(this) ]);
		if( states.isPlay ) {
			states.slideIndex = $(this).index() - 1;
			playNext();
		} else {
			switchSlide( $(this) );
		}
	});
	
	if( isLocalFileSystem ) {
		$('#siteNotice .sitenotice-close').on('click', function() {
			localStorage.setItem(localStorageName, Date.now() + cookieValidity );
		});
	}
	
	endOfYearDiv.find('.slideshow .control .flow i').on( 'click', () => playNext( 'toggle' ) );
	
	endOfYearDiv.find('.content .mobile-donate-button').on( 'click', function() {
		playNext( false );
		endOfYearDiv.find('.slideshow').hide();
		endOfYearDiv.find('.payment').show();
		endOfYearDiv.css('height','auto');
	});
	
	// ----
	// Init
	
	// FadeIn endOf year the start playing the slideshow
	endOfYearDiv.animate( { opacity: 1}, 300 );
	playNext( true );
		
}

/*
[[Category:MultiWiki]]
*/