/**
 * External 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 date type and format.
 *
 * Displays select controls for choosing the date 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 date 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 date configuration controls.
 */
const DateField = ( { settings, updateSetting } ) => {
	const dateTimeTypeOptions = [
		{ label: __( 'Published', 'spectra-pro' ), value: 'published' },
		{ label: __( 'Modified', 'spectra-pro' ), value: 'modified' },
	];

	// Memoized date format previews.
	const formatFjY = useMemo( () => dateI18n( 'F j, Y' ), [] );
	const formatYmd = useMemo( () => dateI18n( 'Y-m-d' ), [] );
	const formatMdy = useMemo( () => dateI18n( 'm/d/Y' ), [] );
	const formatDmy = useMemo( () => dateI18n( 'd/m/Y' ), [] );

	// Options for date formats.
	const formatOptions = [
		{ value: '', label: __( 'Default', 'spectra-pro' ) },
		{ value: 'F j, Y', label: formatFjY },
		{ value: 'Y-m-d', label: formatYmd },
		{ value: 'm/d/Y', label: formatMdy },
		{ value: 'd/m/Y', label: formatDmy },
		{ value: 'human_readable', label: __( 'Human Readable', 'spectra-pro' ) },
		{ value: 'custom', label: __( 'Custom', 'spectra-pro' ) },
	];
	return (
		<>
			{ /* Select control for choosing date type */ }
			<SelectControl
				label={ __( 'Date Type', 'spectra-pro' ) }
				value={ settings.source.dateType }
				options={ dateTimeTypeOptions }
				onChange={ ( value ) => updateSetting( 'source.dateType', value ) }
			/>

			{ /* Select control for choosing date format */ }
			<SelectControl
				label={ __( 'Date Format', 'spectra-pro' ) }
				value={ settings.source.dateFormat }
				options={ formatOptions }
				onChange={ ( value ) => updateSetting( 'source.dateFormat', value ) }
			/>
			{ /* Text input for custom date format when selected */ }
			{ settings.source.dateFormat === 'custom' && (
				<>
					<TextControl
						label={ __( 'Custom Date Format', 'spectra-pro' ) }
						value={ settings.source.customDateFormat }
						onChange={ ( value ) => updateSetting( 'source.customDateFormat', value ) }
					/>
					{ /* Help text with link to date 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 date formats %1$shere%2$s.', 'spectra-pro' ),
								'<a target="_blank" href="https://wordpress.org/support/article/formatting-date-and-time/">',
								'</a>'
							),
						} }
					></p>
				</>
			) }
		</>
	);
};

export default DateField;
