import React from 'react';
import { DateRangePicker as DateRangePickerComponent } from './picker';
import { DateRange, DefinedRange } from './types';


export interface DateRangePickerProps {
    open: boolean;
    toggle: () => void;
    initialDateRange?: DateRange;
    definedRanges?: DefinedRange[];
    minDate?: Date | string;
    maxDate?: Date | string;
    onChange: (dateRange: DateRange) => void;
    closeOnClickOutside?: boolean;
    wrapperClassName?: string;
}

export const DateRangePicker: React.FunctionComponent<DateRangePickerProps> = (
    props: DateRangePickerProps,
) => {
    const {
        closeOnClickOutside,
        toggle,
        open,
    } = props;

    const handleToggle = () => {
        if (closeOnClickOutside === false) {
            return;
        }

        toggle();
    };

    const handleKeyPress = (event: any) => event?.key === 'Escape' && handleToggle();

    return (
        <div style={{ position: 'relative' }}>
            {
                open && (
                    <div
                        style={{
                            position: 'fixed',
                            height: '100vh',
                            width: '100vw',
                            bottom: 0,
                            zIndex: 0,
                            right: 0,
                            left: 0,
                            top: 0,
                        }}
                        onKeyPress={handleKeyPress}
                        onClick={handleToggle}
                    />
                )
            }
            <div>
                <DateRangePickerComponent {...props} />
            </div>
        </div>
    );
}