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 : Les Filles du Thé créent leur chaine sur You Tube !	</title>
	<atom:link href="https://les-filles-du-the.com/les-filles-du-the-creent-leur-chaine-sur-you-tube/feed/" rel="self" type="application/rss+xml" />
	<link>https://les-filles-du-the.com/les-filles-du-the-creent-leur-chaine-sur-you-tube/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=les-filles-du-the-creent-leur-chaine-sur-you-tube</link>
	<description>Apprenez facilement à choisir, préparer et déguster votre Thé !</description>
	<lastBuildDate>Thu, 01 Dec 2016 00:44:27 +0000</lastBuildDate>
	<sy:updatePeriod>
	hourly	</sy:updatePeriod>
	<sy:updateFrequency>
	1	</sy:updateFrequency>
	
	<item>
		<title>
		Par : LETOQUART ANNIE		</title>
		<link>https://les-filles-du-the.com/les-filles-du-the-creent-leur-chaine-sur-you-tube/#comment-444</link>

		<dc:creator><![CDATA[LETOQUART ANNIE]]></dc:creator>
		<pubDate>Thu, 01 Dec 2016 00:44:27 +0000</pubDate>
		<guid isPermaLink="false">http://les-filles-du-the.com/?p=1432#comment-444</guid>

					<description><![CDATA[j&#039;ai lu avec attention le petit livre du thé, il me sera précieux pour choisir de nouveaux thés,  les découvrir,  les préparer en tenant compte de toutes ses infos  et apprécier les moments privilégiés de la dégustation. 
Un grand merci aussi pour cette vidéo, attends avec impatience la suite,
super ce que vous faites le filles a bientôt]]></description>
			<content:encoded><![CDATA[<p>j&rsquo;ai lu avec attention le petit livre du thé, il me sera précieux pour choisir de nouveaux thés,  les découvrir,  les préparer en tenant compte de toutes ses infos  et apprécier les moments privilégiés de la dégustation.<br />
Un grand merci aussi pour cette vidéo, attends avec impatience la suite,<br />
super ce que vous faites le filles a bientôt</p>
]]></content:encoded>
		
			</item>
	</channel>
</rss>