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);

    validate = () => {
        console.log(this.field.getErrors());
      this.field.validate((error, values) => {
        // eslint-disable-next-line no-alert
        alert(JSON.stringify(error));
      });
    };

    render() {
        const { init, getError, setError, setErrors } = this.field;

        return (
            <View style={styles.wrap}>
                <View style={styles.block}>
                    <Text>setError</Text>
                    <View style={styles.row}>
                        <input {...init('input', {
                            rules: [{
                                required: true,
                                pattern: /hello/,
                                message: 'must be hello'
                            }]
                        })} />
                    </View>
                    <View style={styles.row}>
                       <span style={{color: 'red'}}>{getError('input')}</span>
                    </View>
                    <View style={styles.row}>
                        <Button type="primary" size="small" onClick={() => {
                            setError('input', 'set error 1');
                        }}>setError</Button>

                        <Button type="primary" size="small" onClick={() => {
                            setErrors({input: 'set error 2'});
                        }}>setErrors</Button>

                        <Button type="primary" size="small" onClick={() => {
                            setErrors({input: ''});
                        }}>clear</Button>
                    </View>
                    <View style={styles.row}>
                        <input {...init('input2')} />
                    </View>
                    <View style={styles.row}>
                       <span style={{color: 'red'}}>{getError('input2')}</span>
                    </View>
                    <View style={styles.row}>
                       <Button type="primary" size="small" onClick={() => {
                            setError('input2', 'errors will be removed by onChange and shown on validate');
                        }}>setError</Button>

                        <Button type="primary" size="small" onClick={this.validate}>validate</Button>
                    </View>
                </View>
            </View>
        );
    }
}


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


 export default MyComponent