import React, { Component } from 'react';
import hocImmutable, { imShallowEqual } from '../../utils/HOC/hocImmutable';

export default Picker => {
    return hocImmutable(class extends Component {
        constructor(props) {
            super(props);
        }
        state = {
            color: this.props.color || '#3dbd7d'
        }
        componentWillReceiveProps(nextProps) {
            if (this.props.color != nextProps.color) {
                this.setState({ color: nextProps.color });
            }
        }
        onChange = (color, e) => {
            const { onChange } = this.props;
            this.setState({ color: color.rgb }, () => {
                onChange && onChange(color, e);
            })
        }
        onChangeComplete = (color, e) => {
            const { onChangeComplete } = this.props;
            onChangeComplete && onChangeComplete(color, e);
        }
        render() {
            const { color, onChange, onChangeComplete, ...props } = this.props;
            return <Picker {...this.props}
                color={this.state.color}
                onChange={this.onChange}
                onChangeComplete={this.onChangeComplete}
            />
        }
    })
}