import {DayPicker} from 'react-day-picker';
import Button from '../../../../admin/assets/design/components/Button';
import {format} from 'date-fns';
import 'react-day-picker/dist/style.css';
import './CalendarPopover.scss';
import PreIcon from '../icons/PreIcon';
import BackIcon from '../icons/BackIcon';

const CalendarPopover = ( {currentSelection, onSelect, onApply} ) => {
	let footer = <p>Please pick the first day.</p>;
	if ( currentSelection?.from ) {
		if ( !currentSelection.to ) {
			footer = <p>{format( currentSelection.from, 'PPP' )}</p>;
		} else if ( currentSelection.to ) {
			footer = (
				<p>
					{format( currentSelection.from, 'PPP' )} – {format( currentSelection.to, 'PPP' )}
				</p>
			);
		}
	}

	return (
		<div className="adpresso-calendar-popover">
			<DayPicker
				mode="range"
				selected={currentSelection}
				onSelect={onSelect}
				numberOfMonths={2}
				footer={footer}
				captionLayout="dropdown"
				navLayout="around"
				startMonth={new Date( 2015, 0 )}
				endMonth={new Date( 2035, 11 )}
				pagedNavigation
				classNames={{
					button_previous: 'rdp-button_previous adpresso-color-secondary adpresso-square-btn',
					button_next:     'rdp-button_next adpresso-color-secondary adpresso-square-btn',
					dropdown:        'adpresso-select-button'
				}}
				components={{
					Chevron: ( {orientation, className} ) => {
						if ( orientation === 'left' ) {
							return <BackIcon width="19" height="19" className={className}/>;
						}
						if ( orientation === 'right' ) {
							return <PreIcon width="19" height="19" className={className}/>;
						}
						return null;
					}
				}}
			/>
			<div className="adpresso-calendar-popover-footer">
				<Button
					variant="primary"
					onClick={onApply}
					className="adpresso-btn adpresso-btn-action"
				>
					Apply
				</Button>
			</div>
		</div>
	);
};

export default CalendarPopover;