import html2canvas from 'html2canvas';

(function() {
	'use strict';

	const bugReportContainer = document.getElementById( 'admin-bug-report' );
	
	const toggleFormButton = bugReportContainer.querySelector( '.toggle-report-button' );
	const toggleContainer = bugReportContainer.querySelector( '.toggle-container' );

	function setupReportEvents() {
		// Main toggle button
		toggleFormButton.addEventListener( 'click', event => {
			event.preventDefault();
			event.stopPropagation();

			if ( toggleContainer.classList.contains( 'is-open' ) ) {			
				toggleContainer.classList.remove( 'is-open' );
				toggleContainer.setAttribute( 'aria-expanded', false );
				toggleFormButton.setAttribute( 'aria-expanded', false );
				toggleContainer.querySelector( 'textarea' ).blur();
			} else {
				toggleContainer.classList.add( 'is-open' );
				toggleContainer.setAttribute( 'aria-expanded', true );
				toggleFormButton.setAttribute( 'aria-expanded', true );
				toggleContainer.querySelector( 'textarea' ).focus();
			}
		} );

		// Bail early if we're missing settings
		if ( toggleContainer.querySelector( '.invalid-settings' ) !== null ) {
			return;
		}

		// Report form events
		const reportContainer = toggleContainer.querySelector( '.report' );
		
		const reportTextarea = toggleContainer.querySelector( 'textarea' );
		const takeScreenShotButton = toggleContainer.querySelector( '.screenshot' );
		const takeScreenShotButtonIcon = takeScreenShotButton.querySelector( '.camera-icon' );
		const takeScreenShotValueField = reportContainer.querySelector( '.screen-uri' );

		const processingContainer = bugReportContainer.querySelector( '.processing' );
		const resultsContainer = bugReportContainer.querySelector( '.results' );
		const successFailureContainers = resultsContainer.querySelectorAll( '.success, .failed' );
		const closeResultsButtons = bugReportContainer.querySelectorAll( '.close, .close-results' );

		const reportForm = reportContainer.querySelector( 'form' );

		// Screenshot
		takeScreenShotButton.addEventListener( 'click', event => {
			event.preventDefault();

			takeScreenShotButtonIcon.classList.remove( 'fa-camera' );
			takeScreenShotButtonIcon.classList.add( 'fa-refresh', 'fa-spin' );
			
			html2canvas( document.body).then( canvas => {
				takeScreenShotValueField.value = canvas.toDataURL( 'image/png' );
				
				takeScreenShotButtonIcon.classList.remove( 'fa-refresh', 'fa-spin' );
				takeScreenShotButtonIcon.classList.add( 'fa-check' );
			} );
		} );

		// Results reset
		closeResultsButtons.forEach( button => {
			button.addEventListener( 'click', event => {
				toggleContainer.classList.remove( 'is-open' );

				resultsContainer.classList.remove( 'is-open' );
				successFailureContainers.forEach( container => {
					container.classList.remove( 'is-open' );
				} );

				reportContainer.classList.add( 'is-open' );

				takeScreenShotButtonIcon.classList.remove( 'fa-check' );
				takeScreenShotButtonIcon.classList.add( 'fa-camera' );

				takeScreenShotValueField.value = '';
				reportTextarea.value = '';
			} );
		} );

		// Form submission
		reportForm.addEventListener( 'submit', event => {
			event.preventDefault();

			if ( reportTextarea.value == '' && takeScreenShotValueField.value == '' ) {
				return false;
			}

			reportContainer.classList.remove( 'is-open' );
			processingContainer.classList.add( 'is-open' );

			const formData  = new FormData();
			const data = {
				action: 'admin_bug_report_submit', 
				security: abr.NONCES.SUBMIT_REPORT,
				message: reportTextarea.value,
				screenshot: takeScreenShotValueField.value,
				globals: JSON.stringify( abr.GLOBALS )
			};

			for ( let key in data ) {
				formData.append( key, data[key] );
			}

			fetch( abr.AJAX_URL, {
				method: 'post', 
				body: formData
			} ).then( response => {
				return response.json();
			} ).then( data => {
				processingContainer.classList.remove( 'is-open' );
				resultsContainer.classList.add( 'is-open' );

				if ( data.success ) {
					resultsContainer.querySelector( '.success' ).classList.add( 'is-open' );
				} else {
					resultsContainer.querySelector( '.failed' ).classList.add( 'is-open' );
				}
			} );
			
		} );	
	}

	setupReportEvents();
} )();