/**
 * WordPress dependencies
 */
import { BaseControl, RangeControl } from '@safe-wordpress/components';
import { useInstanceId } from '@safe-wordpress/compose';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import clsx from 'clsx';
import { ConversionActionScope, ErrorText } from '@nab/components';
import type { CAEditProps } from '@nab/types';

/**
 * Internal dependencies
 */
import type { Attributes } from './types';

export const Edit = ( {
	attributes: { value },
	scope,
	errors,
	setAttributes,
	setScope,
}: CAEditProps< Attributes > ): JSX.Element => {
	const instanceId = useInstanceId( Edit );

	const rangeControlId = `nab-time-on-page-action__value-${ instanceId }`;

	return (
		<>
			<BaseControl
				id={ rangeControlId }
				className={ clsx( {
					'nab-conversion-action__field--has-errors': errors.value,
				} ) }
				help={ <ErrorText value={ errors.value } /> }
			>
				<div className="nab-time-on-page-conversion-action">
					<RangeControl
						id={ rangeControlId }
						label={ _x(
							'Time on Page (seconds)',
							'text',
							'nelio-ab-testing'
						) }
						className="nab-time-on-page-conversion-action__value"
						min={ 0 }
						max={ 400 }
						value={ value }
						onChange={ ( newValue ) =>
							setAttributes( { value: newValue } )
						}
					/>
				</div>
			</BaseControl>

			<ConversionActionScope
				scope={ scope }
				setScope={ setScope }
				error={ errors._scope }
			/>
		</>
	);
};