import $ from 'jquery';
import rafSchd from 'raf-schd';
import { throttle } from 'throttle-debounce';

const { elementorFrontend, VPAdminElementorVariables: variables } = window;
const $wnd = $( window );

$wnd.on( 'elementor/frontend/init', ( $data ) => {
	if ( ! variables ) {
		return;
	}

	const { target: elementorWindow } = $data;

	// add fake iframe width, so @media styles will work fine.
	function maybeResizePreviews() {
		const elementorWidth = elementorWindow
			.jQuery( elementorWindow.document )
			.width();

		elementorWindow.jQuery
			.find( '.visual-portfolio-elementor-preview iframe' )
			.forEach( ( item ) => {
				const $this = $( item );
				const parentWidth = $this.parent().width();

				$this.css( {
					width: elementorWidth,
				} );

				if ( item.iFrameResizer ) {
					item.iFrameResizer.sendMessage( {
						name: 'resize',
						width: parentWidth,
					} );
					item.iFrameResizer.resize();
				}
			} );
	}

	// window resize.
	$wnd.on( 'resize', throttle( 300, rafSchd( maybeResizePreviews ) ) );

	// added/changed widget.
	elementorFrontend.hooks.addAction(
		'frontend/element_ready/visual-portfolio.default',
		( $scope ) => {
			const $block = $( $scope ).find(
				'.visual-portfolio-elementor-preview'
			);
			const $frame = $block.find( 'iframe' );
			const id = $block.attr( 'data-id' );
			const iframeURL = `${
				variables.preview_url +
				( variables.preview_url.split( '?' )[ 1 ] ? '&' : '?' )
			}vp_preview_frame=true&vp_preview_type=elementor&vp_preview_frame_id=${ id }&vp_preview_nonce=${
				variables.nonce
			}`;

			$frame.attr( 'src', iframeURL );

			// resize iframe
			if ( $.fn.iFrameResize ) {
				$frame.iFrameResize( {
					onInit() {
						maybeResizePreviews();
					},
					onMessage( { message } ) {
						// select current block on click message.
						if ( message === 'clicked' ) {
							// Select current widget to display settings.
							$frame
								.closest( '.elementor-element' )
								.find( '.elementor-editor-element-edit' )
								.click();

							window.focus();
						}
					},
				} );
			}
		}
	);
} );
