import React from 'react';

import {
  InputComponent,
  Select,
  Button
} from '@alicloud/console-components';
import {
  H3
} from '@alicloud/demo-rc-elements';

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

export default function Testing({
  component
}: ITestingProps<InputComponent>): JSX.Element {
  const Input = component;
  
  return <>
    <H3>Input</H3>
    <Input {...{
      hasClear: true,
      name: 'test',
      trim: true,
      state: 'loading'
    }} />
    <H3>InputPassword</H3>
    <Input.Password {...{
      hasClear: true,
      name: 'pass'
    }} />
    <H3>InputTextArea</H3>
    <Input.TextArea />
    <Input.TextArea singleLineMode />
    <H3>InputGroup</H3>
    <Input.Group {...{
      addonBefore: <Select aria-label="please select">
        <option value="https">https</option>
        <option value="http">http</option>
      </Select>,
      addonAfter: <Button>search</Button>
    }}>
      <Input {...{
        hasClear: true,
        defaultValue: 'abc',
        style: {
          width: '100%'
        },
        'aria-label': 'please input'
      }} />
    </Input.Group>
  </>;
}