import React, {
  useState
} from 'react';

import {
  TimelineProps,
  TimelineComponent
} from '@alicloud/console-components';
import {
  ChoiceItem,
  RadioGroup,
  H3,
  P
} from '@alicloud/demo-rc-elements';

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

const DATA_SOURCE_MODE: ChoiceItem<TimelineProps['mode'] | undefined>[] = [{
  label: '无',
  value: undefined
}, {
  label: 'left',
  value: 'left'
}, {
  label: 'alternate',
  value: 'alternate'
}];

export default function Testing({
  component
}: ITestingProps<TimelineComponent>): JSX.Element {
  const Timeline = component;
  
  const [stateItemMode, setStateItemMode] = useState<TimelineProps['mode'] | undefined>();
  
  return <>
    <H3>Timeline</H3>
    <P><code>children</code> 若有 <code>null</code>、<code>string</code> 等，会 crash。</P>
    <RadioGroup {...{
      label: 'Item 的 mode',
      items: DATA_SOURCE_MODE,
      value: stateItemMode,
      onChange: setStateItemMode
    }} />
    <Timeline {...{
      mode: stateItemMode
    }}>
      <Timeline.Item {...{
        title: 'State = 无',
        time: '2016-06-10 10:30:00'
      }} />
      <Timeline.Item {...{
        title: 'State = process',
        time: '2016-06-10 10:30:00',
        state: 'process'
      }} />
      <Timeline.Item {...{
        title: 'State = success',
        time: '2016-06-11',
        state: 'success'
      }} />
      <Timeline.Item {...{
        title: 'State = error',
        time: '2016-06-09',
        state: 'error'
      }} />
      <Timeline.Item {...{
        title: 'State = done',
        content: 'Done 难道没有图标展示？？',
        time: '2017-07-27',
        state: 'done'
      }} />
    </Timeline>
  </>;
}