import React, {
  useState,
  useMemo
} from 'react';

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

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

export default function Testing({
  component
}: ITestingProps<StepComponent>): JSX.Element {
  const Step = component;
  
  const [stateStretch, setStateStretch] = useState(false);
  
  const steps = useMemo(() => [
    ['Step 1', 'Open the refrigerator door'],
    ['Step 2', 'Put the elephant in the refrigerator'],
    ['Step 3', 'Close the refrigerator door']
  ].map((v, i): JSX.Element => <Step.Item {...{
    key: i,
    'aria-current': i === 1 ? 'step' : false,
    title: v[0],
    content: v[1]
  }} />), [Step]);
  
  return <>
    <InputSwitch {...{
      label: 'props.stretch',
      value: stateStretch,
      onChange: setStateStretch
    }} />
    <Alert type="help"><code>stretch</code> 有 BUG，当从 true 降为 false 的时候，没有效果。</Alert>
    <Hr />
    <H3>shape = arrow</H3>
    <Step {...{
      stretch: stateStretch,
      current: 1,
      shape: 'arrow'
    }}>{steps}</Step>
    <H3>shape = circle</H3>
    <Step {...{
      stretch: stateStretch,
      current: 1,
      shape: 'circle'
    }}>{steps}</Step>
    <H3>shape = circle + Horizontal content</H3>
    <Step {...{
      stretch: stateStretch,
      current: 1,
      shape: 'circle',
      labelPlacement: 'hoz'
    }}>{steps}</Step>
    <H3>shape = dot</H3>
    <Step {...{
      stretch: stateStretch,
      current: 1,
      shape: 'dot'
    }}>{steps}</Step>
  </>;
}