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

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

import {
	BlockControls,
	InspectorControls,
} from '@wordpress/block-editor';

import { ReactComponent as CogIcon } from '@/assets/cogicon.svg';
import SelectDialog from '@/components/select-dialog';
import PreviewForm from '@/components/preview-form';
import { BlockAttributes, EmbedMode } from '@/types';

const Edit: React.FC<BlockEditProps<BlockAttributes>> = ( { attributes, setAttributes, className } ) => {
	const handleForm = ( form: { [key: string]: any } ) => {
		setAttributes( {
			formId: form.formId,
			seamlessEmbedCode: form.embedCodes.Seamless,
			iframeEmbedCode: form.embedCodes.IFrame,
			ampEmbedCode: form.embedCodes.Amp,
			embedMode: EmbedMode.Seamless,
		} );
	};

	const resetForm = () => {
		// Create a new object which sets all attributes to null
		const nullAttributes = Object.keys( attributes ).reduce(
			( accumulator, current ) => {
				// @ts-ignore
				accumulator[ current ] = null;
				return accumulator;
			}, {} );

		setAttributes( nullAttributes );
	};

	if ( ! attributes.formId ) {
		return (
			<div>
				<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>
			</div>
		);
	}

	return (
		<div>
			{
				<BlockControls>
					<ToolbarButton
						icon={ edit }
						label="Edit"
						onClick={ () => resetForm() }
					/>
				</BlockControls>
			}

			<InspectorControls key="setting">
				<div id="gutenpride-controls">
					<fieldset>
						<legend className="blocks-base-control__label">
							{ __( 'Background color', 'gutenpride' ) }
						</legend>
						{/* <ColorPalette // Element Tag for Gutenberg standard colour selector
							onChange={ onChangeBGColor } // onChange event callback
						/> */}
					</fieldset>
					<fieldset>
						<legend className="blocks-base-control__label">
							{ __( 'Text color', 'gutenpride' ) }
						</legend>
						{/* <ColorPalette // Element Tag for Gutenberg standard colour selector
							onChange={ onChangeTextColor } // onChange event callback
						/> */}
					</fieldset>
				</div>
			</InspectorControls>

			<PreviewForm
				formId={ attributes.formId } // TODO: this should actually be the form GUID
				embedCode={ attributes.iframeEmbedCode }
			/>
		</div>
	);
};

export default Edit;