/**
 * WordPress dependencies
 */
import { select } from '@safe-wordpress/data';
import apiFetch from '@safe-wordpress/api-fetch';

/**
 * External dependencies
 */
import jQuery from 'jquery';
import { store as NC_EDIT_POST } from '@nelio-content/edit-post';
import type { Dict, Url } from '@nelio-content/types';

/**
 * Internal dependencies
 */
import { init, listenToEditPostStore } from '../common';
import type { Args } from '../common';
import { initSections } from './sections';
import { addListeners } from './listeners';
import { isElementor, isElementorHookable } from './listeners/types';
import './style.scss';

jQuery( window ).on( 'load', function () {
	const $panelButtonContainer = jQuery(
		'#elementor-panel-footer-nelio-content'
	);
	const $panelButton = jQuery(
		'#elementor-panel-footer-nelio-content-button'
	);
	const $modal = jQuery( '#elementor-nelio-content' );
	const $modalCloseButton = jQuery( '#elementor-nelio-content__close' );

	$panelButtonContainer.insertBefore(
		jQuery(
			'#elementor-editor-wrapper-v2 > header > div > div > div.MuiGrid-root:last-of-type > div.MuiStack-root > span:first-of-type'
		)
	);
	$modal.insertBefore( '#elementor-navigator' );

	addTooltip( $panelButton as ExtendedJQueryElement );
	addInteractivity( $modal as ExtendedJQueryElement );

	$panelButton.on( 'click', () => $modal.toggle() );
	$modalCloseButton.on( 'click', () => $modal.toggle() );
} );

export async function initPage( args: Args ): Promise< void > {
	args = {
		...args,
		settings: {
			...args.settings,
			isElementorEditor: true,
		},
	};

	addCoreStoreSynchronizer();
	addCustomSaver();

	await init( args );

	initSections();
	addListeners();
}

// =======
// HELPERS
// =======

function addCustomSaver() {
	const $e = ( window as unknown as Dict ).$e;
	if ( ! isElementorHookable( $e ) ) {
		return;
	}

	class NCCustomUpdaterBeforeSave extends $e.modules.hookUI.Before {
		getCommand() {
			return 'document/save/save';
		}

		getId() {
			return 'nelio-content-custom-updater-before-save';
		}

		getConditions() {
			return true;
		}

		apply() {
			const {
				getAutoShareEndMode,
				getAutomationSources,
				getExternalFeaturedImageAlt,
				getExternalFeaturedImageUrl,
				getNetworkImageIds,
				getPost,
				getQueryArgs,
				getSeries,
				getSuggestedReferences,
				isAutoShareEnabled,
			} = select( NC_EDIT_POST );
			const post = getPost();
			if ( ! post.id ) {
				return;
			}

			const values = {
				autoShareEndMode: getAutoShareEndMode(),
				automationSources: getAutomationSources(),
				efiAlt: getExternalFeaturedImageAlt(),
				efiUrl: getExternalFeaturedImageUrl() || ( '' as Url ),
				followers: post.followers,
				highlights: [],
				isAutoShareEnabled: isAutoShareEnabled(),
				networkImageIds: getNetworkImageIds(),
				permalinkQueryArgs: getQueryArgs(),
				series: getSeries(),
				suggestedReferences: getSuggestedReferences(),
			};

			void apiFetch( {
				path: `/nelio-content/v1/post/${ post.id }/items`,
				method: 'PUT',
				data: {
					values,
				},
			} );
		}
	}

	$e.hooks.registerUIBefore( new NCCustomUpdaterBeforeSave() );
}

function addCoreStoreSynchronizer() {
	listenToEditPostStore( () => {
		const $e = ( window as unknown as Dict ).$e;
		if ( ! isElementorHookable( $e ) ) {
			return;
		}

		$e.internal( 'document/save/set-is-modified', { status: true } );
	} );
}

function addTooltip( $el: ExtendedJQueryElement ) {
	$el.tipsy( {
		gravity: 'n',
		offset: $el.data( 'tooltip-offset' ),
		title: () => $el.data( 'tooltip' ) as string,
	} );
}

function addInteractivity( $el: ExtendedJQueryElement ) {
	const elementor = ( window as unknown as Dict ).elementor;
	if ( ! isElementor( elementor ) ) {
		return;
	}

	$el.draggable( {
		iframeFix: true,
		handle: '#elementor-nelio-content__header',
	} );

	$el.resizable( {
		handles: 'all',
		containment: 'document',
		minWidth: 280,
		maxWidth: 500,
		minHeight: 240,
		start: () =>
			elementor.$previewWrapper.addClass( 'ui-resizable-resizing' ),
		stop: () =>
			elementor.$previewWrapper.removeClass( 'ui-resizable-resizing' ),
	} );
}

type ExtendedJQueryElement = JQuery< HTMLElement > & {
	readonly tipsy: ( options: Dict ) => void;
	readonly draggable: ( options: Dict ) => void;
	readonly resizable: ( options: Dict ) => void;
};