/**
 * External dependencies.
 */
import {
	Button,
	__experimentalHStack as HStack,
	__experimentalVStack as VStack,
	TextControl,
} from '@wordpress/components';
import { useInstanceId } from '@wordpress/compose';
import { chevronLeftSmall, chevronRightSmall } from '@wordpress/icons';
import { __, isRTL } from '@wordpress/i18n';

/**
 * Renders a toggleable drawer for configuring advanced dynamic content settings.
 *
 * Displays a button to toggle the drawer and, when open, fields for setting before/after
 * text, fallback text, and character limits. Updates the dynamic content settings with
 * the provided values.
 *
 * @since x.x.x
 *
 * @param {Object}   props                       - The component props.
 * @param {Object}   props.settings              - The dynamic content settings from the context.
 * @param {Function} props.updateAdvancedSetting - Function to update advanced settings in the context.
 * @param {boolean}  props.settingsOpen          - Whether the drawer is open.
 * @param {Function} props.setSettingsOpen       - Function to toggle the drawer's open state.
 * @return {Element} The advanced settings drawer component.
 */
const AdvancedSettingsDrawer = ( { settings, updateAdvancedSetting, settingsOpen, setSettingsOpen } ) => {
	// Generate a unique ID for the component instance.
	const id = useInstanceId( AdvancedSettingsDrawer );
	const settingsDrawerId = `spectra-dynamic-content-advanced-settings-drawer-${ id }`;

	// Render the toggle button and conditional drawer content.
	return (
		<div className="spectra-pro-dynamic-content-advanced-settings">
			{ /* Button to toggle the advanced settings drawer */ }
			<Button
				__next40pxDefaultSize
				className="spectra-pro-dynamic-content-advanced-settings__drawer-toggle"
				aria-expanded={ settingsOpen }
				onClick={ () => setSettingsOpen( ! settingsOpen ) }
				icon={ isRTL() ? chevronLeftSmall : chevronRightSmall }
				iconPosition="left"
				aria-controls={ settingsDrawerId }
			>
				{ __( 'Advanced', 'spectra-pro' ) }
			</Button>

			<>
				{ /* Drawer content shown when open */ }
				{ settingsOpen && (
					<div className="spectra-pro-dynamic-content-advanced-settings__drawer" id={ settingsDrawerId }>
						<VStack spacing={ 4 }>
							{ /* Before Text Field */ }
							<HStack gap={ 2 } align="center">
								<label htmlFor={ `before-${ id }` }>{ __( 'Before Text', 'spectra-pro' ) }</label>
								<TextControl
									__next40pxDefaultSize
									__nextHasNoMarginBottom
									id={ `before-${ id }` }
									value={ settings.advanced.before }
									onChange={ ( newValue ) => updateAdvancedSetting( 'before', newValue ) }
								/>
							</HStack>

							{ /* After Text Field */ }
							<HStack gap={ 2 } align="center">
								<label htmlFor={ `after-${ id }` }>{ __( 'After Text', 'spectra-pro' ) }</label>
								<TextControl
									__next40pxDefaultSize
									__nextHasNoMarginBottom
									id={ `after-${ id }` }
									value={ settings.advanced.after }
									onChange={ ( newValue ) => updateAdvancedSetting( 'after', newValue ) }
								/>
							</HStack>

							{ /* Fallback Text Field */ }
							<VStack align="start">
								<HStack gap={ 2 } align="center">
									<label htmlFor={ `fallback-${ id }` }>
										{ __( 'Fallback Text', 'spectra-pro' ) }
									</label>
									<TextControl
										__next40pxDefaultSize
										__nextHasNoMarginBottom
										id={ `fallback-${ id }` }
										value={ settings.advanced.fallback }
										onChange={ ( newValue ) => updateAdvancedSetting( 'fallback', newValue ) }
									/>
								</HStack>
								<p className="components-base-control__help">
									{ __(
										'Fallback text to display if the dynamic content is not found.',
										'spectra-pro'
									) }
								</p>
							</VStack>

							{ /* Character Limit Field */ }
							<HStack gap={ 2 } align="center">
								<label htmlFor={ `char-limit-${ id }` }>
									{ __( 'Character Limit', 'spectra-pro' ) }
								</label>
								<TextControl
									__next40pxDefaultSize
									__nextHasNoMarginBottom
									id={ `char-limit-${ id }` }
									type="number"
									value={ settings.advanced.charLength }
									onChange={ ( newValue ) => updateAdvancedSetting( 'charLength', newValue ) }
								/>
							</HStack>
						</VStack>
					</div>
				) }
			</>
		</div>
	);
};

export default AdvancedSettingsDrawer;
