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 = new Field(this, {
        parseName: true,
        values: {
            objWithDefaults: {
                a: 1,
                b: 2
            }
        }
    });

    onGetValue() {
        console.log(this.field.getValues());
    }

    onSetValue() {
        this.field.setValues({
            obj: {
                b: 'b',
                c: 'c'
            },
            arr: ['first', 'second']
        });
    }



    render() {
        const { init, reset, resetToDefault } = this.field;

        return (
            <View style={styles.wrap}>
                <View style={styles.block}>
                    <Text>toPath</Text>
                    <View style={styles.row}>
                        <h3>Object transfer</h3>
                        obj.b: <input {...init('obj.b', {initValue: 'test1'})} /> &nbsp;
                        obj.c: <input {...init('obj.c', {initValue: 'test2'})} />
                    </View>
                    <View style={styles.row}>
                        <h3>Array transfer</h3>
                        arr.0: <input {...init('arr.0', {initValue: '0'})} /> &nbsp;
                        arr.1: <input {...init('arr.1', {initValue: '1'})} />
                    </View>
                    <View style={styles.row}>
                        <h3>Object with Defaults</h3>
                        objWithDefaults.a: <input {...init('objWithDefaults.a')} /> &nbsp;
                        objWithDefaults.b: <input {...init('objWithDefaults.b')} />
                    </View>
                    <View style={styles.row}>
                        <Button size="small" type="primary" onClick={this.onGetValue.bind(this)}>getValues</Button>
                        <Button size="small" type="primary" onClick={this.onSetValue.bind(this)}>setValues</Button>
                        <Button size="small" type="primary" onClick={() => reset()}>reset</Button>
                        <Button size="small" type="primary" onClick={() => resetToDefault()}>resetToDefault</Button>
                    </View>
                    <View style={styles.row}>
                        <pre>{JSON.stringify(this.field.getValues(), null, 2)}</pre>
                    </View>
                </View>
            </View>
        );
    }
}


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