import React, {component} from 'react';
import { Button, Row,Input} from 'react-materialize';
import Modularity from 'modularity-front';

const Module = Modularity.Module; 
const RS = Modularity.RoutingSystem; // old DON'T USE this you can use this.RoutingSystem inside module freely!

class FileUploader extends Modularity.Module{
	
	constructor(props){
		super(props);
		
		this.file.onUpdate(()=>{
			
			this.forceUpdate();
		})
		this.state = {

		};
		//this.object.onUpdate((e)=> this.forceUpdate());
	}



	_submit(e){
		e.preventDefault();
		this.fileData.set(this.state);
		fetch(this.file.value,{
			method:"POST",
			headers: {
        	"Content-Type": "multipart/form-data"
    		},
    		body: JSON.stringify(e.target[0].files),
				})
			.then((res)=> console.log("file Uploaded succesfully"))
			.catch((e)=>{
				console.log(e)
			})

	}

	render(){
		return(
			
			<Row onSubmit={(e) => this._submit(e)}>
			 	<Input type="file" accpet={this.file.filetype} name="file" label="File" s ={12}/>
			 	<Button type="submit" waves='light' s={12}>{ "Submit"}</Button>
			 	{super.render()}
		 	</Row>
		 	
			)
		}
	}

FileUploader.Inputs = {
	...Module.Inputs,
	file: {
		type: Module.Types.Text,
		defaultValue: "/files",
		//needs to be changed to more data 
		filetype:''
	}
}

FileUploader.Outputs = {
	fileData:{

	}
}

FileUploader.Category = 'sxoinas'


export default FileUploader;