'use strict';

const Promise = require("bluebird");
const React = require('react');

const withElement = require("../lib/with-element");
const fileToDataUrl = require("../lib/file-to-data-url");

module.exports = function FileUpload({ addUpload }) {
	function handleChange(event) {
		return Promise.map(Array.from(event.target.files), (file) => {
			if (file.type.startsWith("image/")) {
				return Promise.try(() => {
					return fileToDataUrl(file);
				}).then((url) => {
					return addUpload({
						file: file,
						preview: url
					});
				});
			} else {
				return addUpload({
					file: file,
					preview: "/icons/file.svg"
				});
			}
		});
	}

	let setFileRef = withElement((element) => {
		element.addEventListener("change", handleChange);

		return function() {
			element.removeEventListener("change", handleChange);
		};
	});

	return (
		<div className="fileUpload">
			<input type="file" id="fileUpload" multiple ref={setFileRef} />
			<label htmlFor="fileUpload"><img src="/icons/file.svg"/></label>
		</div>
	);
};