import React, {
  useState
} from 'react';

import {
  RangeComponent
} from '@alicloud/console-components';
import {
  H3,
  Hr,
  InputNumber
} from '@alicloud/demo-rc-elements';

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

export default function Testing({
  component
}: ITestingProps<RangeComponent>): JSX.Element {
  const Range = component;
  
  const [stateValue, setStateValue] = useState(30);
  const [stateValueD1, setStateValueD1] = useState(15);
  const [stateValueD2, setStateValueD2] = useState(40);
  
  return <>
    <H3>slider: single</H3>
    <InputNumber {...{
      value: stateValue,
      onChange: setStateValue
    }} />
    <Hr />
    <Range {...{
      slider: 'single',
      value: stateValue,
      onChange: setStateValue
    }} />
    <H3>slider: double</H3>
    <InputNumber {...{
      value: stateValueD1,
      onChange: setStateValueD1
    }} />
    <InputNumber {...{
      value: stateValueD2,
      onChange: setStateValueD2
    }} />
    <Hr />
    <Range {...{
      slider: 'double',
      value: [stateValueD1, stateValueD2],
      onChange: ([value1, value2]) => {
        setStateValueD1(value1);
        setStateValueD2(value2);
      }
    }} />
  </>;
}