/**
 * WordPress dependencies
 */
import { Dashicon, TextControl } from '@safe-wordpress/components';
import { useSelect } from '@safe-wordpress/data';
import { useEffect } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { MenuSearcher } from '@nab/components';
import type { ExperimentEditProps } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import type { ControlAttributes, AlternativeAttributes } from '../../types';

export type AlternativeProps = ExperimentEditProps< AlternativeAttributes > & {
	readonly placeholder?: string;
};

// NOTE. Dependency loop with @nab package.
import type { store as editorStore } from '@nab/editor';
const NAB_EDITOR = 'nab/editor' as unknown as typeof editorStore;

export const Alternative = ( {
	attributes,
	disabled,
	placeholder = _x( 'Describe your variant…', 'user', 'nelio-ab-testing' ),
	setAttributes,
}: AlternativeProps ): JSX.Element => {
	const isExistingMenu = useExistingMenu();

	useEffect( () => {
		setAttributes( {
			isExistingMenu: isExistingMenu ? true : undefined,
		} );
	}, [ isExistingMenu, setAttributes ] );

	return isExistingMenu ? (
		<>
			<MenuSearcher
				disabled={ disabled }
				value={ attributes.menuId }
				onChange={ ( value ) => setAttributes( { menuId: value } ) }
				placeholder={ _x(
					'Select variant…',
					'user',
					'nelio-ab-testing'
				) }
			/>
			{ !! attributes.unableToCreateVariant && <Error /> }
		</>
	) : (
		<>
			<TextControl
				disabled={ disabled }
				value={ attributes.name }
				onChange={ ( value ) => setAttributes( { name: value } ) }
				placeholder={ placeholder }
			/>
			{ !! attributes.unableToCreateVariant && <Error /> }
		</>
	);
};

// ============
// HELPER VIEWS
// ============

const Error = () => (
	<p className="nab-alternative-menu-error">
		<Dashicon icon="warning" />{ ' ' }
		{ _x(
			'Something went wrong and this variant could not be properly created. Please reset it and save the test again to see if that fixes the issue. If it doesn’t, please get in touch with support.',
			'user',
			'nelio-ab-testing'
		) }
	</p>
);

// =====
// HOOKS
// =====

const useExistingMenu = () =>
	!! useControl()?.attributes.testAgainstExistingMenu;

const useControl = () =>
	useSelect(
		( select ) =>
			select( NAB_EDITOR ).getAlternative< ControlAttributes >(
				'control'
			),
		[]
	);