import React, {
  useState,
  useCallback
} from 'react';
import moment, {
  Moment
} from 'moment';

import {
  TimePickerComponent
} from '@alicloud/console-components';
import {
  Button
} from '@alicloud/demo-rc-elements';

import {
  ITestingProps
} from '../../types';

export default function Testing({
  component
}: ITestingProps<TimePickerComponent>): JSX.Element {
  const TimePicker = component;
  
  const [stateValue, setStateValue] = useState<Moment | null>(null);
  const handleSetNow = useCallback(() => setStateValue(moment()), [setStateValue]);
  const handleClear = useCallback(() => setStateValue(null), [setStateValue]);
  
  return <>
    <Button onClick={handleSetNow}>设置当前</Button>
    <Button onClick={handleClear}>清空</Button>
    <TimePicker {...{
      value: stateValue,
      onChange: setStateValue
    }} />
  </>;
}