/**
 * WordPres dependencies
 */
import { Popover, Spinner } from '@safe-wordpress/components';
import { useRef, useState } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { usePageAttribute } from '@nab/data';

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

export const ChatBot = (): JSX.Element | null => {
	const [ loading, setLoading ] = useState( true );
	const iframe = useRef< HTMLIFrameElement | null >( null );
	const [ isOpen, openChatBot ] = usePageAttribute( 'chatbot/status', false );

	if ( ! isOpen ) {
		return null;
	}

	const onNewChat = () =>
		iframe.current?.contentWindow?.postMessage( {
			type: 'nelio-ab-testing-chatbot-reset',
		} );
	const onClose = () => openChatBot( false );

	const url = 'https://neliosoftware.com/testing/support-bot/';
	const virtualAnchor = {
		getBoundingClientRect: () => ( {
			top: window.innerHeight,
			left: window.innerWidth - 12,
			right: window.innerWidth,
			bottom: window.innerHeight,
			width: 0,
			height: 0,
		} ),
		ownerDocument: document,
	};

	return (
		<Popover
			className="nelio-ab-testing-chatbot-wrapper"
			anchor={ virtualAnchor }
		>
			<div className="nelio-ab-testing-chatbot">
				<div className="nelio-ab-testing-chatbot__header">
					<div className="nelio-ab-testing-chatbot__title">
						{ _x( 'Help', 'text', 'nelio-ab-testing' ) }
					</div>
					<div className="nelio-ab-testing-chatbot__actions">
						<HeaderButton type="edit" onClick={ onNewChat } />
						<HeaderButton type="close" onClick={ onClose } />
					</div>
				</div>
				<div className="nelio-ab-testing-chatbot__content">
					{ loading && (
						<div className="nelio-ab-testing-chatbot__content-loader">
							<Spinner />
						</div>
					) }
					<iframe
						ref={ iframe }
						onLoad={ () => setLoading( false ) }
						title={ _x(
							'Support Chat Bot',
							'text',
							'nelio-ab-testing'
						) }
						src={ url }
					></iframe>
				</div>
			</div>
		</Popover>
	);
};

const HeaderButton = ( {
	type,
	onClick,
}: {
	readonly type: 'close' | 'edit';
	readonly onClick: () => void;
} ) => {
	const label =
		'edit' === type
			? _x( 'New Chat', 'command', 'nelio-ab-testing' )
			: _x( 'Close Chat', 'command', 'nelio-ab-testing' );
	return (
		<button
			className="nelio-ab-testing-chatbot__button"
			aria-label={ label }
			title={ label }
			onClick={ onClick }
		>
			{ 'edit' === type ? (
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					width="24"
					height="24"
					aria-hidden="true"
					focusable="false"
				>
					<path d="m19 7-3-3-8.5 8.5-1 4 4-1L19 7Zm-7 11.5H5V20h7v-1.5Z"></path>
				</svg>
			) : (
				<svg
					xmlns="http://www.w3.org/2000/svg"
					viewBox="0 0 24 24"
					width="24"
					height="24"
					aria-hidden="true"
					focusable="false"
				>
					<path d="m13.06 12 6.47-6.47-1.06-1.06L12 10.94 5.53 4.47 4.47 5.53 10.94 12l-6.47 6.47 1.06 1.06L12 13.06l6.47 6.47 1.06-1.06L13.06 12Z"></path>
				</svg>
			) }
		</button>
	);
};