import '../scss/_field-control.scss';
import PremiumBadge from '../partials/premium-badge';
import ManualLink from '../partials/ManualLink';

const FieldControl = ( {
						   label,
						   help,
						   id,
						   error,
						   className = '',
						   children,
						   premium = false,
						   labelClassName = '',
						   helpClassName = '',
						   link = '',
						   ...props
					   } ) => {

	const wrapperClasses = [
		'adpresso-field-control',
		className,
		premium && 'is-premium'
	].filter( Boolean ).join( ' ' );

	const helpId = help && id ? `${id}-description` : undefined;
	const errorId = error && id ? `${id}-error` : undefined;

	return (
		<div className={wrapperClasses} {...props}>
			{label && (
				<label
					htmlFor={id}
					className={`adpresso-field-label ${labelClassName}`}
				>
					{label}
					{premium && <PremiumBadge/>}
					{!help && link && <ManualLink url={link}/>}
				</label>
			)}

			<div className="adpresso-field-inner">
				{children}
			</div>

			{error && (
				<p id={errorId} className="adpresso-field-error">
					{error}
				</p>
			)}

			{help && (
				<p id={helpId} className={`adpresso-field-help ${helpClassName}`}>
					{help}
					{link && <ManualLink url={link}/>}
				</p>
			)}
		</div>
	);
};

export default FieldControl;