import { __ } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
import { SELECTORS } from './constants';
import API from './classes/api';
import ControlSync from './classes/control/control-sync';
import ControlStates from './classes/control/control-states';
import ControlMeta from './classes/control/control-meta';
import OptimizationDetails from './classes/optimization-details';

class OptimizationControl {
	constructor() {
		this.controlSyncRequestInProgress = false;

		this.init();

		this.controlSync = new ControlSync();
	}

	init() {
		this.initEventListeners();

		setInterval( () => this.runStatusCheckLoop(), 5000 );
	}

	async runStatusCheckLoop() {
		if ( this.controlSyncRequestInProgress ) {
			return;
		}

		this.controlSyncRequestInProgress = true;

		await this.controlSync.run();

		this.controlSyncRequestInProgress = false;
	}

	initEventListeners() {
		document.addEventListener( 'click', ( e ) => this.handleOptimizeButtonClick( e ) );
		document.addEventListener( 'click', ( e ) => this.handleReoptimizeButtonClick( e ) );
		document.addEventListener( 'click', ( e ) => this.handleRestoreButtonClick( e ) );
		document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsOpen( e ) );
		document.addEventListener( 'click', ( e ) => this.handleOptimizationDetailsClick( e ) );
	}

	async handleOptimizeButtonClick( e ) {
		if ( ! e.target.closest( `${ SELECTORS.optimizeButtonSelector }, ${ SELECTORS.tryAgainOptimizeButtonSelector }` ) ) {
			return;
		}

		speak( __( 'Optimization is in progress', 'image-optimization' ), 'assertive' );

		const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
		const states = new ControlStates( controlWrapper );

		states.renderLoading( 'optimize' );

		try {
			controlWrapper.dataset.isFrozen = true;

			await API.optimizeSingleImage( {
				imageId: new ControlMeta( controlWrapper ).getImageId(),
				reoptimize: false,
			} );
		} catch ( error ) {
			states.renderError( error );
		}
	}

	async handleReoptimizeButtonClick( e ) {
		if ( ! e.target.closest( `${ SELECTORS.reoptimizeButtonSelector }, ${ SELECTORS.tryAgainReoptimizeButtonSelector }` ) ) {
			return;
		}

		speak( __( 'Reoptimizing is in progress', 'image-optimization' ), 'assertive' );

		const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
		const states = new ControlStates( controlWrapper );

		states.renderLoading( 'reoptimize' );

		try {
			controlWrapper.dataset.isFrozen = true;

			await API.optimizeSingleImage( {
				imageId: new ControlMeta( controlWrapper ).getImageId(),
				reoptimize: true,
			} );
		} catch ( error ) {
			states.renderError( error );
		}
	}

	async handleRestoreButtonClick( e ) {
		if ( ! e.target.closest( `${ SELECTORS.restoreButtonSelector }, ${ SELECTORS.tryAgainRestoreButtonSelector }` ) ) {
			return;
		}

		speak( __( 'Image restoring is in progress', 'image-optimization' ), 'assertive' );

		const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
		const states = new ControlStates( controlWrapper );

		states.renderLoading( 'restore' );

		try {
			controlWrapper.dataset.isFrozen = true;

			await API.restoreSingleImage( new ControlMeta( controlWrapper ).getImageId() );
		} catch ( error ) {
			states.renderError( error );
		}
	}

	async handleOptimizationDetailsOpen( e ) {
		if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsButtonSelector }` ) ) {
			return;
		}

		const controlWrapper = e.target.closest( SELECTORS.controlWrapperSelector );
		const imageId = new ControlMeta( controlWrapper ).getImageId();

		try {
			OptimizationDetails.initModal();
			OptimizationDetails.renderLoading();

			const details = await API.getOptimizationDetails( imageId );

			OptimizationDetails.openModal();
			OptimizationDetails.renderData( imageId, details );
		} catch ( error ) {
			OptimizationDetails.openModal();
			OptimizationDetails.renderError( error.message );
		}
	}

	async handleOptimizationDetailsClick( e ) {
		if ( ! e.target.closest( `${ SELECTORS.optimizationDetailsOptimizeButtonSelector }` ) ) {
			return;
		}

		const imageId = parseInt( e.target.dataset?.imageId, 10 );

		await API.optimizeSingleImage( { imageId } );

		const controlWrapper = document.querySelector( `.image-optimization-control[data-image-optimization-image-id="${ imageId }"]` );

		if ( controlWrapper ) {
			new ControlStates( controlWrapper ).renderLoading( 'optimize' );
		}

		OptimizationDetails.closeModal();
	}
}

export default OptimizationControl;
{
	"name": "woocommerce/product-image",
	"title": "Product Image",
	"description": "Display the main product image.",
	"category": "woocommerce-product-elements",
	"attributes": {
		"showProductLink": { "type": "boolean", "default": true },
		"showSaleBadge": { "type": "boolean", "default": true },
		"saleBadgeAlign": { "type": "string", "default": "right" },
		"imageSizing": { "type": "string", "default": "single" },
		"productId": { "type": "number", "default": 0 },
		"isDescendentOfQueryLoop": { "type": "boolean", "default": false },
		"isDescendentOfSingleProductBlock": {
			"type": "boolean",
			"default": false
		},
		"width": { "type": "string" },
		"height": { "type": "string" },
		"scale": { "type": "string", "default": "cover" },
		"aspectRatio": { "type": "string" }
	},
	"supports": {
		"interactivity": {
			"clientNavigation": true
		},
		"html": false,
		"__experimentalBorder": {
			"radius": true,
			"__experimentalSkipSerialization": true
		},
		"typography": {
			"fontSize": true,
			"__experimentalSkipSerialization": true
		},
		"spacing": {
			"margin": true,
			"padding": true
		},
		"dimensions": {
			"aspectRatio": true,
			"__experimentalSkipSerialization": true
		},
		"email": true
	},
	"selectors": {
		"root": ".wp-block-woocommerce-product-image.wc-block-components-product-image, .wp-block-woocommerce-product-image .wc-block-components-product-image"
	},
	"ancestor": [
		"woocommerce/all-products",
		"woocommerce/single-product",
		"woocommerce/product-template",
		"core/post-template"
	],
	"usesContext": [ "imageId", "postId", "query", "queryId" ],
	"keywords": [ "WooCommerce" ],
	"textdomain": "woocommerce",
	"apiVersion": 3,
	"$schema": "https://schemas.wp.org/trunk/block.json"
}
<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	
	>
<channel>
	<title>
	Commentaires sur : Atelier 1: Comment bien choisir votre thé ?	</title>
	<atom:link href="https://les-filles-du-the.com/atelier-1-comment-bien-choisir-votre-the/feed/" rel="self" type="application/rss+xml" />
	<link>https://les-filles-du-the.com/atelier-1-comment-bien-choisir-votre-the/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=atelier-1-comment-bien-choisir-votre-the</link>
	<description>Apprenez facilement à choisir, préparer et déguster votre Thé !</description>
	<lastBuildDate>Mon, 18 Apr 2016 11:59:59 +0000</lastBuildDate>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>
		Par : Jean-Yves		</title>
		<link>https://les-filles-du-the.com/atelier-1-comment-bien-choisir-votre-the/#comment-32</link>

		<dc:creator><![CDATA[Jean-Yves]]></dc:creator>
		<pubDate>Mon, 18 Apr 2016 11:59:59 +0000</pubDate>
		<guid isPermaLink="false">http://les-filles-du-the.com/?p=736#comment-32</guid>

					<description><![CDATA[Expérience très intéressante pour un novice comme moi en Thé.
Je connais à présent ma couleur de Thé ! 
Les goûts dégustés sont stupéfiants. Le cadre où nous avons été accueilli est fantastique.
Mylène sait communiquer sa passion, l&#039;atelier est très vivant et top, je le recommande !
J&#039;imagine bien son intervention avec mes collègues dans la société où  je travaille.
Impatient de découvrir le deuxième atelier.]]></description>
			<content:encoded><![CDATA[<p>Expérience très intéressante pour un novice comme moi en Thé.<br />
Je connais à présent ma couleur de Thé !<br />
Les goûts dégustés sont stupéfiants. Le cadre où nous avons été accueilli est fantastique.<br />
Mylène sait communiquer sa passion, l&rsquo;atelier est très vivant et top, je le recommande !<br />
J&rsquo;imagine bien son intervention avec mes collègues dans la société où  je travaille.<br />
Impatient de découvrir le deuxième atelier.</p>
]]></content:encoded>
		
			</item>
		<item>
		<title>
		Par : Juliette et Mylène		</title>
		<link>https://les-filles-du-the.com/atelier-1-comment-bien-choisir-votre-the/#comment-20</link>

		<dc:creator><![CDATA[Juliette et Mylène]]></dc:creator>
		<pubDate>Tue, 12 Apr 2016 08:29:31 +0000</pubDate>
		<guid isPermaLink="false">http://les-filles-du-the.com/?p=736#comment-20</guid>

					<description><![CDATA[En réponse à &lt;a href=&quot;https://les-filles-du-the.com/atelier-1-comment-bien-choisir-votre-the/#comment-19&quot;&gt;François&lt;/a&gt;.

Merci François de ta participation. 

Ce fut un plaisir pour moi de partager cette passion ! 

A très bientôt pour le prochain atelier !]]></description>
			<content:encoded><![CDATA[<p>En réponse à <a href="https://les-filles-du-the.com/atelier-1-comment-bien-choisir-votre-the/#comment-19">François</a>.</p>
<p>Merci François de ta participation. </p>
<p>Ce fut un plaisir pour moi de partager cette passion ! </p>
<p>A très bientôt pour le prochain atelier !</p>
]]></content:encoded>
		
			</item>
		<item>
		<title>
		Par : François		</title>
		<link>https://les-filles-du-the.com/atelier-1-comment-bien-choisir-votre-the/#comment-19</link>

		<dc:creator><![CDATA[François]]></dc:creator>
		<pubDate>Sat, 09 Apr 2016 20:06:04 +0000</pubDate>
		<guid isPermaLink="false">http://les-filles-du-the.com/?p=736#comment-19</guid>

					<description><![CDATA[Une superbe matinée, en charmante compagnie. ;) Ce qui ne gâte rien.
Mais avant tout une expérience enrichissante et dynamique. 
J&#039;aimais déjà beaucoup le thé mais maintenant je suis complètement ADDICT.
Le partage de connaissance est fluide et à la porté de tous même si vous ne connaissais rien au thé.

En bref un super moment.
Grosse bise et à bientôt pour le prochain atelier.
J&#039;ai hâte d&#039;y être.
François]]></description>
			<content:encoded><![CDATA[<p>Une superbe matinée, en charmante compagnie. 😉 Ce qui ne gâte rien.<br />
Mais avant tout une expérience enrichissante et dynamique.<br />
J&rsquo;aimais déjà beaucoup le thé mais maintenant je suis complètement ADDICT.<br />
Le partage de connaissance est fluide et à la porté de tous même si vous ne connaissais rien au thé.</p>
<p>En bref un super moment.<br />
Grosse bise et à bientôt pour le prochain atelier.<br />
J&rsquo;ai hâte d&rsquo;y être.<br />
François</p>
]]></content:encoded>
		
			</item>
	</channel>
</rss>