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 {
    state = {
        show: true,
        show2: true
    }
    field = new Field(this);
    field2 = new Field(this, { autoUnmount: false });

    render() {
        return (
            <View style={styles.wrap}>
                <View style={styles.block}>
                    <Text>Auto Unmount</Text>
                    <View style={styles.row}>
                        {this.state.show ? < input {...this.field.init('name', { initValue: 'autoUnmount = true' })} /> : null}
                        <Button size="small" type="primary" onClick={() => {
                                console.log('value auto delete', this.field.getValues());
                            }}
                        >
                            print
                        </Button>
                        <Button size="small" type="primary" onClick={() => this.setState({ show: false })}>
                            delete
                        </Button>
                    </View>
                    <View style={styles.row}>
                        {this.state.show2 ? < input {...this.field2.init('name2', { initValue: 'autoUnmount = false' })} /> : null}
                        <Button
                            size="small" type="primary"
                            onClick={() => {
                                console.log('value always exist', this.field2.getValues());
                            }}
                        >
                            print
                        </Button>
                        <Button
                            size="small" type="primary"
                            onClick={() => this.setState({ show2: false })}
                        >
                            delete
                        </Button>
                    </View>
                </View>
            </View>
        );
    }
}

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