import React, {
  useState
} from 'react';

import {
  ProgressProps,
  ProgressComponent,
  Icon
} from '@alicloud/console-components';
import {
  ChoiceItem,
  Hr,
  RadioGroup,
  InputNumber
} from '@alicloud/demo-rc-elements';

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

const dataSourceShape: ChoiceItem<ProgressProps['shape'] | undefined>[] = [{
  label: '无',
  value: undefined
}, {
  label: 'circle',
  value: 'circle'
}, {
  label: 'line',
  value: 'line'
}];

function textRender(percent: number): JSX.Element | number {
  if (percent >= 100) {
    return <Icon type="select" />;
  }
  
  return percent;
}

export default function Testing({
  component
}: ITestingProps<ProgressComponent>): JSX.Element {
  const Progress = component;
  
  const [stateShape, setStateShape] = useState<ProgressProps['shape'] | undefined>();
  const [statePercent, setStatePercent] = useState<number>(25);
  
  return <>
    <RadioGroup {...{
      items: dataSourceShape,
      label: 'props.shape',
      value: stateShape,
      onChange: setStateShape
    }} />
    <InputNumber {...{
      value: statePercent,
      onChange: setStatePercent
    }} />
    <Hr />
    <Progress {...{
      percent: statePercent,
      shape: stateShape,
      textRender
    }} />
  </>;
}