/**
 * WordPress dependencies
 */
import { Button } from '@safe-wordpress/components';
import { useDispatch } from '@safe-wordpress/data';
import { useRef, useState } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import confetti from 'canvas-confetti';
import {
	store as NC_SOCIAL_EDITOR,
	SocialMessageEditor,
} from '@nelio-content/social-message-editor';

/**
 * Internal dependencies
 */
import './style.scss';

type MessageCreationStepProps = {
	readonly isDisabled: boolean;
	readonly previousStep: () => void;
	readonly nextStep: () => void;
	readonly onFinish: () => void;
};

export const MessageCreationStep = ( {
	isDisabled,
	previousStep,
	nextStep,
	onFinish,
}: MessageCreationStepProps ): JSX.Element => {
	const ref = useRef< HTMLButtonElement >();
	const [ wasMessageCreated, setWasMessageCreated ] = useState( false );
	const [ isLoading, setIsLoading ] = useState( false );
	const { openNewSocialMessageEditor } = useDispatch( NC_SOCIAL_EDITOR );

	return (
		<div className="nelio-content-wizard-page__step nelio-content-wizard-page__step--message-creation">
			<div className="nelio-content-wizard-page__step-title">
				{ wasMessageCreated
					? _x(
							'Great! Your First Message is Ready',
							'user',
							'nelio-content'
					  )
					: _x(
							'Schedule Your First Social Message',
							'user',
							'nelio-content'
					  ) }
			</div>
			<p className="nelio-content-wizard-page__step-description">
				{ wasMessageCreated
					? _x(
							'You have successfully created your first content promotion message. Now you can view it in your calendar.',
							'user',
							'nelio-content'
					  )
					: _x(
							'Now you can create and schedule your first content promotion message.',
							'user',
							'nelio-content'
					  ) }
			</p>
			{ ! wasMessageCreated && (
				<>
					<Button
						className="nelio-content-wizard-page__message-creation-button"
						variant="primary"
						onClick={ () =>
							openNewSocialMessageEditor(
								{},
								{ context: 'calendar', isPreviewVisible: true }
							)
						}
					>
						{ _x(
							'Add Social Message',
							'command',
							'nelio-content'
						) }
					</Button>
					<SocialMessageEditor
						callback={ () => setWasMessageCreated( true ) }
					/>
				</>
			) }
			<div className="nelio-content-wizard-page__step-actions">
				<Button
					className="nelio-content-wizard-page__step-button"
					variant="secondary"
					disabled={ isDisabled || isLoading }
					onClick={ previousStep }
				>
					{ _x( 'Back', 'command', 'nelio-content' ) }
				</Button>
				<Button
					ref={ ref }
					className="nelio-content-wizard-page__step-button"
					variant={ wasMessageCreated ? 'primary' : 'secondary' }
					disabled={ isDisabled || isLoading }
					isBusy={ isLoading }
					onClick={ () => {
						setIsLoading( true );
						nextStep();
						void confetti( {
							origin: getOrigin( ref.current ),
							ticks: 100,
						} )?.then( () => onFinish() );
					} }
				>
					{ isLoading
						? _x( 'Opening calendar…', 'text', 'nelio-content' )
						: _x( 'Open calendar', 'command', 'nelio-content' ) }
				</Button>
			</div>
		</div>
	);
};

const getOrigin = ( element?: HTMLElement ) => {
	const rect = element?.getBoundingClientRect();
	const vw = window.innerWidth || document.documentElement.clientWidth || 1;
	const vh = window.innerHeight || document.documentElement.clientHeight || 1;
	const x = rect
		? Math.min( Math.max( ( rect.left + rect.width / 2 ) / vw, 0 ), 1 )
		: 0.5;
	const y = rect
		? Math.min( Math.max( ( rect.top + rect.height / 2 ) / vh, 0 ), 1 )
		: 0.5;
	return { x, y };
};