/**
 * WordPress dependencies
 */
import { useRef } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import './style.scss';
import { useEditorState } from '../../../hooks';

export type JavaScriptPreviewProps = {
	readonly className?: string;
	readonly iframeId: string;
	readonly isSaving: boolean;
	readonly previewUrl?: string;
	readonly value: string;
};

export const JavaScriptPreview = ( {
	className,
	iframeId,
	isSaving,
	previewUrl,
}: JavaScriptPreviewProps ): JSX.Element => {
	const initialUrl = useRef( previewUrl );
	const [ state ] = useEditorState();

	return (
		<div className={ clsx( [ className, 'nab-javascript-preview' ] ) }>
			<iframe
				id={ iframeId }
				className={ clsx( {
					'nab-javascript-preview__iframe': true,
					[ `nab-javascript-preview__iframe--${ state.activeResolution }` ]:
						true,
					'nab-javascript-preview__iframe--is-saving': isSaving,
				} ) }
				title={ _x( 'JavaScript Preview', 'text', 'nelio-ab-testing' ) }
				src={ initialUrl.current }
			></iframe>
		</div>
	);
};