import React, { useRef } from 'react';
import { DatePicker } from 'antd';
import { onBlurFn } from '../onBlurFn';
import { antiAssign } from '../../../../utils/utils';
import styles from './styles.less';

const { RangePicker } = DatePicker;
export const ApolloDateRange = (props: any) => {
    const { onChange, placeholder, showTime, beginDatePlaceholder, endDatePlaceholder, origin } = props;
    const selfProps = antiAssign(props, ['onChange', 'columnConfig']);
    const isOpen = useRef();
    const changeValue = (date, dateString) => {
        if (typeof onChange === 'function') {
            if (typeof onBlurFn === 'function' && !isOpen.current) {
                onBlurFn({ ...props, value: date });
            }
            onChange(date, dateString);
        }
    };
    const dateOnBlurFn = (e: boolean) => {
        isOpen.current = e;
    };
    const timeOnBlurFn = (e: boolean) => {
        isOpen.current = e;
        if (typeof onBlurFn === 'function' && !e) {
            onBlurFn(props);
        }
    };
    return (origin === 'editForm' ?
        <RangePicker
            className={styles.date}
            dropdownClassName={styles.dropdownClassName}
            // popupStyle={{ width: '350px' }}
            {...selfProps}
            placeholder={[beginDatePlaceholder || placeholder, endDatePlaceholder || placeholder]}
            onChange={changeValue}
            onOpenChange={showTime ? timeOnBlurFn : dateOnBlurFn}
        /> :
        <RangePicker
            className={styles.date}
            dropdownClassName={styles.dropdownClassName}
            // popupStyle={{ width: '350px' }}
            {...selfProps}
            placeholder={[beginDatePlaceholder || placeholder, endDatePlaceholder || placeholder]}
            onChange={changeValue}
        />
    );
};