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, {scrollToFirstError: -10});

    userName(rule, value) {
        if (value === 'frank') {
            return new Promise((resolve, reject) => {
                setTimeout(() => reject('name existed'), 200);
            })
        } else {
            return new Promise((resolve) => {
                setTimeout(() => resolve(null), 200);
            })
        }
    }

    render() {
        const init = this.field.init;

        return (
            <View style={styles.wrap}>
                <View style={styles.block}>
                    <Text>validate</Text>
                    <View style={styles.row}>
                        <input {...init('input', {initValue: 'delete all', rules: {required: true}})} />
                        {this.field.getError('input') ?
                            <span style={{color: 'red'}}>{this.field.getError('input').join(',')}</span> : ''}
                    </View>
                    <View style={styles.row}>
                        <input placeholder="try onBlur" {...init('input1', {
                            rules: [{
                                required: true,
                                message: 'can not be empty',
                                trigger: ['onBlur', 'onChange']
                            }]
                        })} />
                        {this.field.getError('input1') ?
                            <span style={{color: 'red'}}>{this.field.getError('input1').join(',')}</span> : ''}
                    </View>
                    <View style={styles.row}>
                        <input defaultValue="" placeholder="try frank" {...init('username', {
                            rules: [{
                                validator: this.userName,
                                trigger: ['onBlur', 'onChange']
                            }]
                        })} />
                        {this.field.getState('username') === 'loading' ? 'validating...' : ''}
                        {this.field.getError('username') ?
                            <span style={{color: 'red'}}>{this.field.getError('username').join(',')}</span> : ''}
                    </View>

                    <View style={styles.row}>
                        <Button size="small" type="primary" onClick={() => {
                            this.field.validate().then(({errors, values}) => {
                                console.log(errors, values);
                            });
                        }}>validate</Button>
                        <Button size="small" type="primary" onClick={() => {
                            this.field.reset();
                        }}>reset</Button>
                    </View>
                </View>
            </View>
        );
    }
}

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