import Toggle from '../../shared/components/Toggle';
import { TextField } from '../../shared/components/Fields';
import { __ } from '@wordpress/i18n';

export default function MessagePanel( { settings, onChange } ) {
	return (
		<>
			<Toggle
				label={ __( 'Allow customers to add a gift message', 'rt-gift-wrap-for-woocommerce' ) }
				checked={ !! settings.allow_message }
				onChange={ ( value ) => onChange( 'allow_message', value ) }
			/>

			{ !! settings.allow_message && (
				<>
					<TextField
						label={ __( 'Message field label', 'rt-gift-wrap-for-woocommerce' ) }
						value={ settings.message_label }
						onChange={ ( value ) => onChange( 'message_label', value ) }
					/>
					<TextField
						type="number"
						min="10"
						max="1000"
						label={ __( 'Maximum characters', 'rt-gift-wrap-for-woocommerce' ) }
						value={ settings.message_max_length }
						onChange={ ( value ) => onChange( 'message_max_length', parseInt( value, 10 ) || 200 ) }
					/>
				</>
			) }
		</>
	);
}