import * as React from 'react';
import { __ } from '@wordpress/i18n';

import { BlockEditProps } from '@wordpress/blocks';
import { Placeholder, ExternalLink } from '@wordpress/components';

import CogIcon from '@/assets/cogicon';
import SelectDialog from '@/components/select-dialog';
import { BlockAttributes, EmbedMode } from '@/types';

const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
	const handleForm = ( form: string ) => {
		const formObj = JSON.parse( form );

		setAttributes( {
			formId: formObj.formId,
			seamlessEmbedCode: formObj.embedCodes.Seamless,
			iframeEmbedCode: formObj.embedCodes.IFrame,
			ampEmbedCode: formObj.embedCodes.Amp,
			embedMode: EmbedMode.Seamless,
		} );
	};

	if ( ! attributes.formId ) {
		return (
			<Placeholder
				icon={ CogIcon }
				label="Cognito Forms"
				className={ className }
				instructions={ __(
					'Click the button below to choose a form to embed.'
				) }
			>
				<SelectDialog onSelectForm={ handleForm }></SelectDialog>
				<br />
				<div className="components-placeholder__learn-more">
					<ExternalLink
						href={ __(
							'https://wordpress.org/support/article/embeds/'
						) }
					>
						{ __( 'Learn more about embeds' ) }
					</ExternalLink>
				</div>
			</Placeholder>
		);
	}

	return (
		<div
			className="cog-wp-embed cog-wp-embed__preview"
			dangerouslySetInnerHTML={ { __html: attributes.iframeEmbedCode } } // Must be Iframe embed code as others do not work in Gutenberg
		></div>
	);
}

export default Edit;