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 Custom extends Component {
    constructor(props) {
        super(props);

        this.state = {
            value: typeof props.value === 'undefined' ? [] : props.value
        };
    }

    // update value
    componentWillReceiveProps(nextProps) {
        if ('value' in nextProps) {
            this.setState({
                value: typeof nextProps.value === 'undefined' ? [] : nextProps.value
            });
        }
    }

    onAdd = () => {
        const value = this.state.value.concat([]);
        value.push('new');

        this.setState({
            value
        });
        this.props.onChange(value);
    }

    render() {
        return (<div className="custom">
            {this.state.value.map((v, i) => {
                return <Button size="small" key={i} >{v}</Button>;
            })}
            <Button size="small" type="primary" onClick={this.onAdd.bind(this)}>Add ＋ </Button>
        </div>);
    }
}

/* eslint-disable react/no-multi-comp */
class MyComponent extends Component {
    field = Field.create(this, {
        deepReset: true
    });

    onGetValue() {
        console.log(this.field.getValue('custom'));
    }

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

        return (
            <View style={styles.wrap}>
                <View style={styles.block}>
                    <Text>Custom</Text>
                    <View style={styles.row}>
                        <Custom {...init('custom', {initValue: ['test']})} />
                    </View>
                    <View style={styles.row}>
                        <Button size="small"  type="primary" onClick={this.onGetValue.bind(this)}>getValue</Button>
                        <Button size="small"  type="primary" onClick={() => setValue('custom', ['test', 'setValue'])}>setValue</Button>
                        <Button size="small"  onClick={() => reset()}>reset</Button>
                    </View>
                </View>
            </View>
        );
    }
}
// render(<MyComponent />, null, { driver: DriverUniversal });
 export default MyComponent