/**
 * External dependencies
 */
import {
	RangeControl,
	SelectControl,
	ToggleControl,
	__experimentalToolsPanelItem as ToolsPanelItem,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
 * Animation Options Panel (Pro)
 *
 * Renders additional animation settings in the block inspector panel,
 * available only in the Pro version of the plugin. This panel is conditionally
 * injected via the `spectra.animations-extension.options` filter.
 *
 * The panel provides extended controls such as:
 * - Animation Duration
 * - Animation Delay
 * - Animation Easing
 * - Replay on Scroll
 *
 * This function is intended to be used as a filter callback, returning
 * a React component containing extra ToolsPanelItems for animation customization.
 *
 * Only returns content if `spectraAnimationType` is set, ensuring animation
 * settings are only shown when an animation is active.
 *
 * @since x.x.x
 *
 * @param {null}   defaultValue Default value returned if no animation type is set or props are missing.
 * @param {Object} props        Props passed from the block context, including:
 *                              - attributes: Block attributes
 *                              - setAttributes: Function to update attributes
 *
 * @return {Element|null} JSX element with additional animation controls, or defaultValue if not applicable.
 */
const AnimationOptions = ( defaultValue, props ) => {
	const {
		setAttributes,
		attributes: {
			spectraAnimationType,
			spectraAnimationTime,
			spectraAnimationDelay,
			spectraAnimationEasing,
			spectraAnimationOnce,
		},
	} = props;

	if ( ! props || ! spectraAnimationType ) {
		return defaultValue;
	}

	return (
		<>
			{ /* Animation Duration (ms) 
				- Specifies how long the animation lasts.
				- Default value: 400ms.
			*/ }
			<ToolsPanelItem
				label={ __( 'Animation Duration (ms)', 'spectra-pro' ) }
				isShownByDefault
				hasValue={ () => !! spectraAnimationTime && 400 !== spectraAnimationTime }
				onDeselect={ () => setAttributes( { spectraAnimationTime: 400 } ) }
			>
				<RangeControl
					__next40pxDefaultSize
					__nextHasNoMarginBottom
					label={ __( 'Animation Duration (ms)', 'spectra-pro' ) }
					help={ __( 'How long the animation lasts (in milliseconds). Default is 400ms.', 'spectra-pro' ) }
					value={ spectraAnimationTime }
					min={ 100 }
					max={ 3000 }
					step={ 100 }
					onChange={ ( value ) => setAttributes( { spectraAnimationTime: value } ) }
				/>
			</ToolsPanelItem>
			{ /* Animation Delay (ms) 
				- Specifies the time delay before the animation starts.
				- Default value: 0ms.
			*/ }
			<ToolsPanelItem
				label={ __( 'Animation Delay (ms)', 'spectra-pro' ) }
				isShownByDefault
				hasValue={ () => !! spectraAnimationDelay && 0 !== spectraAnimationDelay }
				onDeselect={ () => setAttributes( { spectraAnimationDelay: 0 } ) }
			>
				<RangeControl
					__next40pxDefaultSize
					__nextHasNoMarginBottom
					label={ __( 'Animation Delay (ms)', 'spectra-pro' ) }
					help={ __( 'Time to wait before starting (in milliseconds).', 'spectra-pro' ) }
					value={ spectraAnimationDelay }
					min={ 0 }
					max={ 3000 }
					step={ 100 }
					onChange={ ( value ) => setAttributes( { spectraAnimationDelay: value } ) }
				/>
			</ToolsPanelItem>
			{ /* Animation Easing 
				- Controls the acceleration and deceleration of the animation for a natural effect.
				- Default value: 'ease'.
			*/ }
			<ToolsPanelItem
				label={ __( 'Animation Easing', 'spectra-pro' ) }
				isShownByDefault
				hasValue={ () => !! spectraAnimationEasing && 'ease' !== spectraAnimationEasing }
				onDeselect={ () => setAttributes( { spectraAnimationEasing: 'ease' } ) }
			>
				<SelectControl
					__next40pxDefaultSize
					__nextHasNoMarginBottom
					label={ __( 'Animation Easing', 'spectra-pro' ) }
					help={ __( 'Controls the animation’s speed flow for a natural feel.', 'spectra-pro' ) }
					onChange={ ( value ) =>
						setAttributes( {
							spectraAnimationEasing: value,
						} )
					}
					value={ spectraAnimationEasing }
					options={ [
						{ label: __( 'Ease', 'spectra-pro' ), value: 'ease' },
						{
							label: __( 'Ease-in', 'spectra-pro' ),
							value: 'ease-in',
						},
						{
							label: __( 'Ease-out', 'spectra-pro' ),
							value: 'ease-out',
						},
						{
							label: __( 'Ease-in-out', 'spectra-pro' ),
							value: 'ease-in-out',
						},
					] }
				/>
			</ToolsPanelItem>

			{ /* Play Animation Only Once
				- Determines whether the animation should play only the first time the element enters the viewport.
				- When enabled, the animation will not repeat on subsequent scrolls.
				- When disabled, the animation will trigger every time the element enters the viewport.
				- Default value: false.
			*/ }
			<ToolsPanelItem
				label={ __( 'Play Repeatedly on Scroll', 'spectra-pro' ) }
				isShownByDefault
				hasValue={ () => ! spectraAnimationOnce }
				onDeselect={ () => setAttributes( { spectraAnimationOnce: false } ) }
			>
				<ToggleControl
					__next40pxDefaultSize
					__nextHasNoMarginBottom
					label={ __( 'Play Repeatedly on Scroll', 'spectra-pro' ) }
					checked={ spectraAnimationOnce }
					onChange={ ( value ) => setAttributes( { spectraAnimationOnce: value } ) }
					help={ __(
						'Enable to play the animation only once when the element first scrolls into view. Disable to repeat it every time. Applies only on the frontend.',
						'spectra-pro'
					) }
				/>
			</ToolsPanelItem>
		</>
	);
};

export default AnimationOptions;
