import {useState, useRef, useEffect} from '@wordpress/element';
import {Popover} from '@wordpress/components';
import {__} from '@wordpress/i18n';
import {format, parseISO, isValid} from 'date-fns';
import {dateI18n} from '@wordpress/date';
import CalendarPopover from '../../../../admin/assets/design/components/CalendarPopover';
import TextInput from './TextInput';

const {dateFormat} = window.adpressoAnalyticsData || {dateFormat: 'F j, Y'};

const DateRangePicker = ( {value, onChange, className = ''} ) => {
	const [isCalendarOpen, setIsCalendarOpen] = useState( false );
	const [draftRange, setDraftRange] = useState( undefined );
	// Ref for the Input-element on which the Popover should be attached
	const anchorRef = useRef( null );

	useEffect( () => {
		if ( isCalendarOpen ) {
			if ( value && typeof value === 'object' && value.start && value.end ) {
				const s = parseISO( value.start );
				const e = parseISO( value.end );
				if ( isValid( s ) && isValid( e ) ) {
					setDraftRange( {from: s, to: e} );
				}
			} else {
				// If "Last 30 days" is active, we start with empty or the current date.
				setDraftRange( undefined );
			}
		}
	}, [isCalendarOpen, value] );

	const handleApply = () => {
		if ( !draftRange || !draftRange.from || !draftRange.to ) {
			return;
		}

		const apiStart = format( draftRange.from, 'yyyy-MM-dd' );
		const apiEnd = format( draftRange.to, 'yyyy-MM-dd' );
		const labelStart = format( draftRange.from, 'yyyy-MM-dd\'T\'12:00:00' );
		const labelEnd = format( draftRange.to, 'yyyy-MM-dd\'T\'12:00:00' );

		const finalPayload = {
			key:   'custom',
			start: apiStart,
			end:   apiEnd,
			label: `${dateI18n( dateFormat, labelStart )} - ${dateI18n( dateFormat, labelEnd )}`
		};

		onChange( finalPayload );
		setIsCalendarOpen( false );
	};

	let displayStart = '';
	let displayEnd = '';

	if ( isCalendarOpen && draftRange?.from ) {
		const start = format( draftRange.from, 'yyyy-MM-dd\'T\'12:00:00' );
		displayStart = dateI18n( dateFormat, start );
	} else if ( !isCalendarOpen && value && typeof value === 'object' && value.start ) {
		displayStart = dateI18n( dateFormat, `${value.start}T12:00:00` );
	}

	if ( isCalendarOpen && draftRange?.to ) {
		const end = format( draftRange.to, 'yyyy-MM-dd\'T\'12:00:00' );
		displayEnd = dateI18n( dateFormat, end );
	} else if ( !isCalendarOpen && value && typeof value === 'object' && value.end ) {
		displayEnd = dateI18n( dateFormat, `${value.end}T12:00:00` );
	}

	const dynamicPlaceholder = dateI18n( dateFormat, new Date() );

	return (
		<div className={`adpresso-date-range-picker ${className}`} ref={anchorRef}>
			{__( 'From', 'adpresso' )}
			<TextInput
				placeholder={dynamicPlaceholder}
				value={displayStart}
				onClick={() => setIsCalendarOpen( true )}
				readOnly
			/>
			{__( 'To', 'adpresso' )}
			<TextInput
				placeholder={dynamicPlaceholder}
				value={displayEnd}
				onClick={() => setIsCalendarOpen( true )}
				readOnly
			/>
			<button
				type="button"
				className="adpresso-calendar-button"
				onClick={() => setIsCalendarOpen( !isCalendarOpen )}
			>
				<span className="dashicons dashicons-calendar-alt"></span>
			</button>

			{isCalendarOpen && (
				<Popover
					anchor={anchorRef.current}
					onClose={() => setIsCalendarOpen( false )}
					position="bottom center"
					className="adpresso-date-popover-wrapper"
					noArrow={false}
				>
					<CalendarPopover
						currentSelection={draftRange}
						onSelect={setDraftRange}
						onApply={handleApply}
					/>
				</Popover>
			)}
		</div>
	);
};

export default DateRangePicker;