import { IReactComponent } from '@wowpic/xform-types';
import { DatePicker } from 'antd';
import { Moment } from 'moment';
import React, { FunctionComponent, useCallback } from 'react';
import { getMomentTime } from '../utils';

const AntdRangePicker = DatePicker.RangePicker;

const RangePicker: FunctionComponent<IReactComponent> = ({
    value: originValue,
    valueType,
    onChange,
    ...props
}) => {
    const [originStartTime, originEndTime] = originValue || [];
    const value: [Moment, Moment] = [
        getMomentTime(originStartTime),
        getMomentTime(originEndTime)
    ];
    const OnValueChange = useCallback(
        (v) => {
            const [startTime, endTime] = v || [];
            if (valueType === 'timestamp') {
                onChange([+startTime, +endTime]);
            } else {
                onChange(v);
            }
        },
        [valueType, onChange]
    );
    return (
        <AntdRangePicker value={value} onChange={OnValueChange} {...props} />
    );
};

export default RangePicker;