/**
 * WordPress dependencies.
 */
import { SelectControl, TextControl } from '@wordpress/components';
import { dateI18n } from '@wordpress/date';
import { useMemo } from '@wordpress/element';
import { sprintf, __ } from '@wordpress/i18n';

/**
 * Renders controls for configuring time type and format.
 *
 * Displays select controls for choosing the time type (published or modified) and format,
 * with an optional text input for custom formats. Updates the dynamic content settings
 * with the selected values and provides a help link for time format documentation.
 *
 * @since x.x.x
 *
 * @param {Object}   props               - The component props.
 * @param {Object}   props.settings      - The dynamic content settings from the context.
 * @param {Function} props.updateSetting - Function to update settings in the context.
 * @return {Element} The time configuration controls.
 */
const TimeField = ( { settings, updateSetting } ) => {
	// Options for time type (published or modified).
	const dateTimeTypeOptions = [
		{ label: __( 'Published', 'spectra-pro' ), value: 'published' },
		{ label: __( 'Modified', 'spectra-pro' ), value: 'modified' },
	];

	// Memoized time format previews.
	const format12HourLower = useMemo( () => dateI18n( 'g:i a' ), [] );
	const format12HourUpper = useMemo( () => dateI18n( 'g:i A' ), [] );
	const format24Hour = useMemo( () => dateI18n( 'H:i' ), [] );

	// Options for time formats.
	const formatOptions = [
		{ label: __( 'Default', 'spectra-pro' ), value: 'default' },
		{ value: 'g:i a', label: format12HourLower },
		{ value: 'g:i A', label: format12HourUpper },
		{ value: 'H:i', label: format24Hour },
		{ label: __( 'Custom', 'spectra-pro' ), value: 'custom' },
	];

	return (
		<>
			{ /* Select control for choosing time type */ }
			<SelectControl
				label={ __( 'Time Type', 'spectra-pro' ) }
				value={ settings.source.timeType }
				options={ dateTimeTypeOptions }
				onChange={ ( value ) => updateSetting( 'source.timeType', value ) }
			/>

			{ /* Select control for choosing time format */ }
			<SelectControl
				label={ __( 'Time Format', 'spectra-pro' ) }
				value={ settings.source.timeFormat }
				options={ formatOptions }
				onChange={ ( value ) => updateSetting( 'source.timeFormat', value ) }
			/>

			{ /* Text input for custom time format when selected */ }
			{ settings.source.timeFormat === 'custom' && (
				<>
					<TextControl
						label={ __( 'Custom Time Format', 'spectra-pro' ) }
						value={ settings.source.customTimeFormat }
						onChange={ ( value ) => updateSetting( 'source.customTimeFormat', value ) }
					/>
					{ /* Help text with link to time format documentation */ }
					<p
						className="components-base-control__help"
						dangerouslySetInnerHTML={ {
							__html: sprintf(
								/* translators: %1$s: opening anchor tag, %2$s: closing anchor tag */
								__( 'Learn more about time formats %1$shere%2$s.', 'spectra-pro' ),
								'<a target="_blank" href="https://wordpress.org/support/article/formatting-date-and-time/">',
								'</a>'
							),
						} }
					></p>
				</>
			) }
		</>
	);
};

export default TimeField;
