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

import {
  DatePickerComponent
} from '@alicloud/console-components';
import {
  H3,
  Hr,
  Button,
  Alert
} from '@alicloud/demo-rc-elements';

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

export default function Testing({
  component
}: ITestingProps<DatePickerComponent>): JSX.Element {
  const DatePicker = component;
  
  const [stateValue, setStateValue] = useState<Moment | null>(null);
  const [stateRangeValue, setStateRangeValue] = useState<[Moment | null, Moment | null] | [] | null>(null);
  
  const handleOnChange = useCallback((value: Moment | null): void => {
    console.info(value); // eslint-disable-line no-console
    
    setStateValue(value);
  }, [setStateValue]);
  const handleSetNow = useCallback(() => setStateValue(moment()), [setStateValue]);
  const handleClear = useCallback(() => setStateValue(null), [setStateValue]);
  const handleSetRangeNowStartOnly = useCallback(() => setStateRangeValue([moment().subtract('7', 'd'), null]), [setStateRangeValue]);
  const handleSetRangeNowEndOnly = useCallback(() => setStateRangeValue([null, moment()]), [setStateRangeValue]);
  const handleSetRangeNow = useCallback(() => setStateRangeValue([moment().subtract('7', 'd'), moment()]), [setStateRangeValue]);
  const handleClearRangeNull = useCallback(() => setStateRangeValue(null), [setStateRangeValue]);
  const handleClearRangeEmpty = useCallback(() => setStateRangeValue([]), [setStateRangeValue]);
  const handleClearRangeNullNull = useCallback(() => setStateRangeValue([null, null]), [setStateRangeValue]);
  
  return <>
    <H3>日</H3>
    <Alert type="warning">非常奇怪，value: Moment | null 和 onChange </Alert>
    <Button onClick={handleSetNow}>设置当前</Button>
    <Button onClick={handleClear}>清空</Button>
    <Hr />
    <DatePicker {...{
      value: stateValue,
      onChange: handleOnChange
    }} />
    <H3>年</H3>
    <DatePicker.YearPicker {...{
      value: stateValue,
      onChange: handleOnChange
    }} />
    <H3>月</H3>
    <DatePicker.MonthPicker {...{
      value: stateValue,
      onChange: handleOnChange
    }} />
    <H3>周</H3>
    <DatePicker.WeekPicker {...{
      value: stateValue,
      onChange: handleOnChange
    }} />
    <H3>间</H3>
    <Button onClick={handleSetRangeNowStartOnly}>设置当前（仅开始）</Button>
    <Button onClick={handleSetRangeNowEndOnly}>设置当前（仅结束）</Button>
    <Button onClick={handleSetRangeNow}>设置当前</Button>
    <Button onClick={handleClearRangeNull}>清空（null）</Button>
    <Button onClick={handleClearRangeEmpty}>清空（[]）</Button>
    <Button onClick={handleClearRangeNullNull}>清空（[null, null]）</Button>
    <Hr />
    <DatePicker.RangePicker {...{
      value: stateRangeValue,
      onChange: setStateRangeValue
    }} />
  </>;
}