/** @jsx createElement */
import { createElement, Component, findDOMNode, render } from 'rax';
import View from 'nuke-view';
import Input from 'nuke-base-input';
import Button from 'nuke-button';
import Page from 'nuke-page';

const App = class Demo extends Component {
  constructor() {
    super();
    this.state = {
      content: '',
    };
  }
  getvalue = (e) => {
    console.log(this.refs.myinput.getValue());
  };
  getRef = (e) => {
    if (findDOMNode(this.refs.myinput.getRef())) {
      console.log('find it');
    }
  };
  render() {
    return (
      <Page title="Input">
        <Page.Intro main="基础样式" />
        <View style={styles.lineWithMargin}>
          <Input
            ref="myinput"
            maxLength={10}
            style={{ height: 60, marginBottom: '20rem' }}
            defaultValue="今年流行"
            id="first"
          />
        </View>
        <View style={styles.btns}>
          <Button
            style={styles.btn}
            block
            type="primary"
            onPress={this.getvalue}
          >
            获得值
          </Button>
          <Button style={styles.btn} block type="primary" onPress={this.getRef}>
            获得input
          </Button>
        </View>
        <Page.Intro main="多行" />
        <View style={styles.lineWithMargin}>
          <Input
            style={{ height: '300rem', marginBottom: '20rem' }}
            rows={20}
            maxLength={10}
            multiple
            id="third"
            placeholder="多行文本：说点什么吧"
          />
        </View>
        <Page.Intro main="自定义样式" />
        <View style={styles.lineWithMargin}>
          <Input
            id="fourth"
            style={{
              borderWidth: 0,
              height: 40,
              backgroundColor: '#3089dc',
              color: '#ffffff',
            }}
            inputStyle={{ padding: 0 }}
          />
        </View>

        <Page.Intro main="不可修改" />
        <View style={[styles.lineWithMargin, { marginBottom: '10rem' }]}>
          <Input disabled id="fiveth" value="不可修改" />
        </View>
      </Page>
    );
  }
};
const styles = {
  lineWithMargin: {
    marginLeft: 30,
    marginRight: 30,
  },
  textLine: {
    marginTop: 20,
    marginBottom: 40,
  },
  text: {
    fontSize: 26,
  },
};
render(<App />);