import { IReactComponent } from '@wowpic/xform-types';
import { TimePicker as AntdTimePicker } from 'antd';
import React, { FunctionComponent, useCallback } from 'react';
import { getMomentTime } from '../utils';

const TimePicker: FunctionComponent<IReactComponent> = ({
    value: originValue,
    onChange,
    ...props
}) => {
    const value: any = getMomentTime(originValue);
    const onValueChange = useCallback(
        (v) => onChange(+v),
        [onChange]
    );
    return <AntdTimePicker value={value} onChange={onValueChange} {...props} />;
};

export default TimePicker;
