/* global ajaxurl */

/**
 * External dependencies
 */
import React from 'react';
import ReactDOM from 'react-dom';

/**
 * WordPress dependencies
 */
import domReady from '@wordpress/dom-ready';

/**
 * SUI dependencies
 */
import { TutorialsList, TutorialsSlider } from '@wpmudev/shared-tutorials';

function hideTutorials() {
	const xhr = new XMLHttpRequest();

	xhr.open('POST', ajaxurl + '?action=smush_hide_tutorials', true);
	xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');

	xhr.onload = () => {
		if (200 === xhr.status) {
			const noticeMessage = `<p>${window.wp_smush_msgs.tutorialsRemoved}</p>`,
				noticeOptions = {
					type: 'success',
					icon: 'check',
				};

			window.SUI.openNotice(
				'wp-smush-ajax-notice',
				noticeMessage,
				noticeOptions
			);
		}
	};

	xhr.send('_ajax_nonce=' + window.wp_smush_msgs.nonce);
}

/**
 * Render the "Tutorials List" component.
 *
 * @since 2.8.5
 */
domReady(function () {
	// Tutorials section on Dashboard page.
	const tutorialsDiv = document.getElementById('smush-dash-tutorials');
	if (tutorialsDiv) {
		ReactDOM.render(
			<TutorialsSlider
				category="11228"
				title={window.smush_tutorials.tutorials}
				viewAll={window.smush_tutorials.tutorials_link}
				onCloseClick={hideTutorials}
			/>,
			tutorialsDiv
		);
	}

	// Tutorials page.
	const tutorialsPageBox = document.getElementById('smush-box-tutorials');
	if (tutorialsPageBox) {
		ReactDOM.render(
			<TutorialsList
				category="11228"
				title={window.smush_tutorials.tutorials}
				translate={window.smush_tutorials.tutorials_strings}
			/>,
			tutorialsPageBox
		);
	}
});