import React, {
  useState,
  useCallback
} from 'react';
import dayjs, {
  Dayjs
} from 'dayjs';

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

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

import dateCellRender from './date-cell-render';

const now = dayjs();

export default function Testing({
  component
}: ITestingProps<Calendar2Component>): JSX.Element {
  const Calendar2 = component;
  
  const [stateValue, setStateValue] = useState<Dayjs>(now);
  const handleBackToday = useCallback(() => setStateValue(now), [setStateValue]);
  
  return <>
    <Button onClick={handleBackToday}>回到今日</Button>
    <Calendar2 {...{
      value: stateValue,
      dateCellRender,
      onSelect: setStateValue
    }} />
  </>;
}