import {useState, useEffect} from '@wordpress/element';
import {__, sprintf} from '@wordpress/i18n';
import {DateTimePicker} from '@wordpress/components';
import ButtonGroup from '../components/ButtonGroup';
import DateRangePicker from '../components/DateRangePicker';
import {DayPicker} from 'react-day-picker';
import '../scss/_schedule.scss';

const SchedulePeriodField = ( {field, allMetaData, onDataChange} ) => {

	// Get the saved values. If empty, they are null or undefined.
	const startDate = allMetaData['start_date'];
	const endDate = allMetaData['end_date'];

	const startMode = startDate ? 'scheduled' : 'now';
	const endMode = endDate ? 'scheduled' : 'no_end';
	const timezoneLabel = window.adpressoData?.timezone || '';

	const handleStartModeChange = ( newMode ) => {
		if ( newMode === 'now' ) {
			onDataChange( 'start_date', '' );
		} else {
			onDataChange( 'start_date', new Date().toISOString() );
		}
	};

	const handleEndModeChange = ( newMode ) => {
		if ( newMode === 'no_end' ) {
			onDataChange( 'end_date', '' );
		} else {
			// Initialise with startDate + 1 week, or today when empty
			const baseDate = startDate ? new Date( startDate ) : new Date();
			baseDate.setDate( baseDate.getDate() + 7 );
			onDataChange( 'end_date', baseDate.toISOString() );
		}
	};

	return (
		<div className="adpresso-schedule-period-wrapper">

			{/* --- START DATE --- */}
			<div className="adpresso-schedule-row">
				<label className="adpresso-field-label">
					{__( 'Start date', 'adpresso' )}
					{timezoneLabel && <span className="adpresso-timezone-hint"> ({timezoneLabel})</span>}
				</label>

				<ButtonGroup
					value={startMode}
					options={[
						{key: 'now', label: __( 'Now', 'adpresso' )},
						{key: 'scheduled', label: __( 'Scheduled', 'adpresso' )}
					]}
					onChange={handleStartModeChange}
				/>

				{startMode === 'scheduled' && (
					<div className="adpresso-datetime-container adpresso-fields-only">
						<DateTimePicker
							currentDate={startDate}
							onChange={( date ) => onDataChange( 'start_date', date )}
							is12Hour={false} // Oder dynamisch basierend auf WP-Settings
						/>
					</div>
				)}
			</div>

			{/* --- END DATE --- */}
			<div className="adpresso-schedule-row">
				<label className="adpresso-field-label">
					{__( 'End date', 'adpresso' )}
					{timezoneLabel && <span className="adpresso-timezone-hint"> ({timezoneLabel})</span>}
				</label>

				<ButtonGroup
					value={endMode}
					options={[
						{key: 'no_end', label: __( 'No end', 'adpresso' )},
						{key: 'scheduled', label: __( 'Scheduled', 'adpresso' )}
					]}
					onChange={handleEndModeChange}
				/>

				{endMode === 'scheduled' && (
					<div className="adpresso-datetime-container adpresso-fields-only">
						<DateTimePicker
							currentDate={endDate}
							onChange={( date ) => onDataChange( 'end_date', date )}
							is12Hour={false}
						/>
						{startDate && endDate && new Date( endDate ) < new Date( startDate ) && (
							<p className="adpresso-error-text">
								{__( 'Warning: End date is before start date.', 'adpresso' )}
							</p>
						)}
					</div>
				)}
			</div>

		</div>
	);
};

export default SchedulePeriodField;