import React from 'react';

/**
 * HOC to provide src to the wrapped component with a file input field in a really simple way.
 * Note: this component was created only as a development helper
 * @param Component
 * @returns {FilePicker}
 */
export function withFilePicker(Component) {
    class FilePicker extends React.Component {
        state = {
            src: false,
        };
        onChange = evt => {
            const reader = new FileReader();
            reader.addEventListener('load', () => this.setState({ src: reader.result }), false);
            if (evt.target.files && evt.target.files.length) {
                reader.readAsDataURL(evt.target.files[0]);
            }
        };
        render() {
            return (
                <div>
                    <input type="file" onChange={this.onChange} />
                    <div>
                        <Component src={this.state.src} {...this.props} />
                    </div>
                </div>
            );
        }
    }
    return FilePicker;
}

export default withFilePicker;
