# Input

import * as React from 'react'
import * as ReactDOM from 'react-dom'
import classNames from 'classnames'
import Input, { IInputProps } from '../index'
import List from '../../list'
import log from '../../base/log'
import BaseDemo from '../../base/baseDemo'
import { autobind } from 'core-decorators'
import Switch from '../../switch'
@autobind
class InputDemo extends BaseDemo<{ name: string }, any> {
  state = {
    disabled: false,
    readOnly: false,
    clearable: true,
    isPwd: false
  }
  @log
  onChange() {
    // console.log(this)
  }
  toggleProxy = type => {
    this.toggle(type)
  }
  toggle = type => {
    this.setState({ [type]: !this.state[type] })
  }

  render() {
    const { disabled, readOnly, clearable, isPwd } = this.state

    const props: IInputProps = {
      label: '单项输入',
      placeholder: '请输入内容',
      disabled,
      readOnly,
      textAlign: 'left',
      clearable,
      isPwd,
      value: '123456',
      maxLength: 11,
      onChange: this.onChange,
      extra: <span className="q-icon__occupy" />
    }

    return (
      <div style={{backgroundColor: '#F3F6FA'}}>
        <List header="1. 默认单项输入">
          <Input {...props} />
        </List>
        <List header="2. 输入文字居右">
          <Input {...{ ...props, ...{textAlign: 'right' } }} />
        </List>
        <List header="3. 暗提示">
          <Input {...{...props, ...{type: 'no-label', placeholder: '请输入银行卡号'}}} />
        </List>
        <List header="4. 多行折行显示">
          <Input {...{...props, ...{type: 'more-line', placeholder: '详细信息文案内容过多的情况下可折行显示'}, textAlign: 'right', value: '这里的文字较多，如果一行不够，可以进行多行展示~~'}} />
        </List>
        <List header="5. 验证码输入">
          <Input {...{...props, ...{type: 'code', placeholder: '请输入验证码', label: '验证码'}}} />
        </List>
        <List header="6. 带图标的label">
          <Input {...{ ...props, ...{thumbImg: '//img002.qufenqi.com/products/6b/63/6b63320f90b4d53f34adf66a4621f1ac.png' } }} />
        </List>
        <List header="7. 选择输入">
          <Input {...{ ...props, ...{type: 'picker' , textAlign: 'right' } }} />
        </List>
        <List header="8. 段落输入">
          <Input {...{ ...props, ...{type: 'paragraph', maxLength: 10, placeholder: '请输入段落内容' } }} />
        </List>

        <List header="参数控制">
          <List.Item
            extra={
              <Switch
                checked={disabled}
                onChange={this.toggleProxy.bind(this, 'disabled')}
              />
            }
          >
            disabled
          </List.Item>
          <List.Item
            extra={
              <Switch
                checked={readOnly}
                onChange={this.toggleProxy.bind(this, 'readOnly')}
              />
            }
          >
            readOnly
          </List.Item>
          <List.Item
            extra={
              <Switch
                checked={clearable}
                onChange={this.toggleProxy.bind(this, 'clearable')}
              />
            }
          >
            clearable
          </List.Item>
          <List.Item
            extra={
              <Switch
                checked={isPwd}
                onChange={this.toggleProxy.bind(this, 'isPwd')}
              />
            }
          >
            password
          </List.Item>
        </List>
      </div>
    )
  }
}