import { createElement, render, Component } from 'rax';
import DriverUniversal from 'driver-universal';
import { Button, Field, Icon } from '@alifd/meet';
import View from 'rax-view';
import Text from 'rax-text';

const styles = {
  wrap: {
    padding: '16rpx'
  },
  block: {
    marginBottom: '20rpx'
  },
  row: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: '20rpx',
    paddingBottom: '20rpx',
    marginTop: '20rpx'
  }
}

class MyComponent extends Component {
    field = Field.create(this, {
        onChange: (name, value) => {
            console.log(this.field.getValues());

            switch (name) {
                case 'input':
                    this.field.setValue('sync', `change to: ${value}`);
                    break;
            }
        }
    });

    render() {
        const {init, getValue} = this.field;
        const layout = {
            marginBottom: 10,
            width: 400
        };

        return (
            <View style={styles.wrap}>
                <View style={styles.block}>
                    <Text>onChange</Text>
                    <View style={styles.row}>
                        <input placeholder="controlled by onChange" {...init('input')} style={layout}/><br/>
                    </View>
                    <View style={styles.row}>
                        <input placeholder="under control" {...init('input')} style={layout}/><br/>
                    </View>
                    <View style={styles.row}>
                        <input placeholder="everyone can control me" {...init('sync')} style={layout}/><br/>
                    </View>
                </View>
            </View>
        );
    }
}

// render(<MyComponent />, null, { driver: DriverUniversal });
 export default MyComponent