/** @jsx createElement */
import { createElement, Component, render } from 'rax';
import View from 'nuke-view';
import Text from 'nuke-text';
import ScrollView from 'nuke-scroll-view';
import Radio from 'nuke-radio';
import Button from 'nuke-button';

const App = class NukeDemoIndex extends Component {
  constructor() {
    super();
    this.state = {
      checked: false,
      value: 1,
      groupValue: 2,
    };
  }
    onChange=(value) => {
      this.setState({
        checked: value,
      });
    }
    onChangeDataSource=(value) => {
      this.setState({
        value,
      });
    }
    onChangeGroupCustom=(groupValue) => {
      this.setState({
        groupValue,
      });
      console.log('group', groupValue);
    }
    onChangeGroupCustomItem=(value) => {
      console.log(value);
    }
    onPress() {
      const tmp = this.state.checked;
      this.setState({
        checked: !tmp,
      });
    }
    press() {
      let tmp = this.state.groupValue;
      this.setState({
        groupValue: ++tmp,
      });
    }
    pressGroup() {
      let tmp = this.state.value;
      this.setState({
        value: ++tmp,
      });
      console.log(this.state);
    }
    render() {
      const dataSource = [
        { value: 1, label: '苹果' },
        { value: 2, label: '梨' },
        { value: 3, label: '橘子' },
      ];
      return (
        <ScrollView>
          <Text>----------基础用法------{this.state.checked}-----</Text>
          <Text>受限使用</Text>
          <Button onPress={this.onPress.bind(this)}>{this.state.checked}</Button>
          <Radio size="small" checked={this.state.checked} onChange={this.onChange.bind(this)} />
          <Text>非受限使用</Text>
          <Radio checked onChange={this.onChange} />
          <Text>禁用</Text>
          <Radio disabled checked={false} />
          <Text>----------带数据源的用法------{this.state.value}-----</Text>
          <Button onPress={this.pressGroup.bind(this)}>受限使用+{ this.state.value }</Button>
          <Radio.Group value={this.state.value} onChange={this.onChangeDataSource.bind(this)} size="small" dataSource={dataSource} />
          <Text>------自定义group样式用法------{this.state.groupValue}---</Text>
          <Button onPress={this.press.bind(this)}>受限使用+{this.state.groupValue}</Button>
          <Radio.Group onChange={this.onChangeGroupCustom.bind(this)} value={this.state.groupValue}>
            <View style={style.groupItem}>
              <Radio size="small" style={style.radio} value={1} onChange={this.onChangeGroupCustomItem.bind(this)} />
              <Text>第一项</Text>
            </View>
            <View style={style.groupItem}>
              <Radio size="small" style={style.radio} value={2} onChange={this.onChangeGroupCustomItem.bind(this)} />
              <Text>第二项</Text>
            </View>
            <View style={style.groupItem}>
              <Radio size="small" style={style.radio} value={3} onChange={this.onChangeGroupCustomItem.bind(this)} />
              <Text>第三项</Text>
            </View>
          </Radio.Group>

        </ScrollView>

      );
    }
};
const style = {
  groupItem: {
    flexDirection: 'row',
    justifyContent: 'center',
  },
  radio: {
    margin: '40rem',
  },
};
mount(<App />, 'body');