import React from "react";
import ReactDom from "react-dom";

import Input from "../index";
import Button from "../../button/index";

import { Demo, DemoPanel } from "../../../external/demo/index";
import Doc from "./doc.md";
import '../style/v2.scss';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      value: "",
      countValue: "初始异步计数值",
    };

    this.focus = this.focus.bind(this);
    this.onChange = this.onChange.bind(this);
    this.toggleGrowLimit = this.toggleGrowLimit.bind(this);
  }

  focus() {
    this.refs.test.focus();
  }

  toggleGrowLimit() {
    this.setState({
      minHeight: 42,
      maxHeight: 210,
    });
  }

  onChange() {
    this.setState({
      value: this.refs.test.getValue(),
    });
  }

  componentDidMount() {
    setTimeout(() => {
      this.setState({ countValue: "asdf延时5s后异步计数值" });
    }, 5000);
  }

  render() {
    return (
      <Demo doc={<Doc />} name="Input">
        <DemoPanel title="默认输入框">
          <Input placeholder="large size" size="l" />
          <br />
          <br />
          <Input placeholder="default size" />
          <br />
          <br />
          <Input placeholder="long size" size="long" />
          <br />
          <br />
          <Input placeholder="small size" size="s" />
        </DemoPanel>

        <DemoPanel title="默认文本域">
          <Input placeholder="type=textarea" type="textarea" />
        </DemoPanel>

        <DemoPanel title="自动增高的文本域">
          <Input
            placeholder="type=textarea; autogrow"
            type="textarea"
            autogrow
            style={{
              minHeight: this.state.minHeight,
              maxHeight: this.state.maxHeight
            }}
          />
          <br />
          <br />
          <Button onClick={this.toggleGrowLimit}>
            切换设置min-height/max-height
          </Button>
        </DemoPanel>

        <DemoPanel title="带计数器的文本域">
          <Input
            placeholder="type=textarea; counter={100}"
            type="textarea"
            counter={100}
          />
        </DemoPanel>

        <DemoPanel title="带计数器的文本域 中文计数，数字和字符两个算一个">
          <Input
            placeholder="type=textarea; lan=ch counter={100}"
            lan="ch"
            type="textarea"
            counter={100}
          />
        </DemoPanel>

        <DemoPanel title="带计数器的文本域 中文计数，数字和字符两个算一个">
          <Input
            placeholder="type=textarea; lan=ch counter={100}"
            lan="ch"
            type="textarea"
            counter={100}
          />
        </DemoPanel>

        <DemoPanel title="带计数器的文本域 中文计数，数字和字符两个算一个，初始化和更新value演示，受控组件">
          <Input
            placeholder="type=textarea; lan=ch counter={100}"
            value={this.state.countValue}
            lan="ch"
            type="textarea"
            counter={100}
            onChange={(e) => this.setState({ countValue: e.target.value })}
          />
        </DemoPanel>

        <DemoPanel title="一些API">
          <Input
            placeholder="getValue & focus"
            onChange={this.onChange}
            ref="test"
          />
          <br />
          <br />
          <p>你输入的值是: {this.state.value}</p>
          <Button onClick={this.focus}>Focus</Button>
        </DemoPanel>

        <DemoPanel title="Disabled态">
          <Input placeholder="disabled text" disabled />
          <br />
          <br />
          <Input placeholder="disabled textarea" type="textarea" disabled />
        </DemoPanel>
      </Demo>
    );
  }
}

const demo = document.getElementById("demo");

if (demo) {
  ReactDom.render(<App />, demo);
}