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

/**
 * External dependencies
 */
import { ErrorText } from '@nab/components';
import { store as NAB_DATA } from '@nab/data';
import { getLocalUrlError } from '@nab/utils';
import type { ExperimentEditProps } from '@nab/types';

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

export const Alternative = ( {
	attributes,
	disabled,
	setAttributes,
}: ExperimentEditProps< AlternativeAttributes > ): JSX.Element => {
	const { url = '' } = attributes;
	const homeUrl = useHomeUrl();
	const urlError = getLocalUrlError( url, homeUrl );

	return (
		<div>
			<div className="nab-url-alternative-version">
				<div className="nab-url-alternative-version__url">
					<TextControl
						className="nab-url-alternative-version__url-value"
						disabled={ disabled }
						value={ url }
						onChange={ ( value ) =>
							setAttributes( { url: value } )
						}
						placeholder={ _x( 'URL…', 'text', 'nelio-ab-testing' ) }
					/>
				</div>
				{ ! disabled && urlError && (
					<ErrorText
						className="nab-url-alternative-version__url-error"
						value={ urlError }
					/>
				) }
			</div>
		</div>
	);
};

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

const useHomeUrl = () =>
	useSelect(
		( select ) => select( NAB_DATA ).getPluginSetting( 'homeUrl' ),
		[]
	);