import {useMemo} from '@wordpress/element';
import {__} from '@wordpress/i18n';
import {Field, Label, Input, Description} from '@headlessui/react';
import FieldControl from '../components/FieldControl';
import {detectScriptLifecycleWarning} from '../utils/scriptLifecycleWarning';

const TextAreaField = ( {field, value, premium, onChange} ) => {
	const disabled = field.premium ?? false;

	// Only fields that are known to sometimes carry <script> tags opt into this scan (see class-ad-field-registry.php/class-placement-field-registry.php's 'scan_for_script_lifecycle' flag)
	const lifecycleWarning = useMemo(
		() => field.scan_for_script_lifecycle
			? detectScriptLifecycleWarning( value, window?.adpressoAdminData?.docsUrlScriptLifecycle )
			: null,
		[field.scan_for_script_lifecycle, value]
	);

	return (
		<FieldControl id={field.id} label={field.label} premium={field.premium} help={field.description}>
				<textarea
					id={field.id}
					className="adpresso-input"
					disabled={disabled}
					value={value || ''}
					onChange={( e ) => onChange( field.id, e.target.value )}
					placeholder={field.placeholder}
					rows={field.rows || 5}
				/>
				{lifecycleWarning && (
					<div className="adpresso-notification-box adpresso-warning">
						<p>
							<strong>{__( 'Notice', 'adpresso' )}: </strong>
							{lifecycleWarning.text}
							{lifecycleWarning.link && (
								<>
									{' '}
									<a href={lifecycleWarning.link} target="_blank" rel="noopener noreferrer">
										{__( 'Learn more', 'adpresso' )}
									</a>
								</>
							)}
						</p>
					</div>
				)}
		</FieldControl>
	);
};

export default TextAreaField;