import React from 'react';
import Modularity from 'modularity-front';

class ProductService extends Modularity.Module{
	constructor(props){
		super(props)
		this.loadProduct(1);
		this.input.onUpdate((v) => {
			this.loadProduct(v);
		})
		//inputs key,function,regex
		this.RoutingSystem.onRouteChange('ProductService',()=> {
			let query = this.RoutingSystem.getRoute();
			console.log("yeeueyye")
			if(query.params){
				console.log(query.params.id)
				this.loadProduct(query.params.id)
			}

		},'/product/[0-9]+')

		this.RoutingSystem.onRouteChange('ProductService', () => {
			console.log("something")
		},'/products/[0-9]+')
	}
	loadProduct(v){
		fetch('/products/'+ v)
		.then((results)=> results.json())
		.then((json) => this.product.set(json))
		.catch((e)=>{
			console.log(e);
		})
	}




	render(){
		return(
			<div className="ServiceInfo">
				ID : {this.__renderID()}
				<div>
					Data
					<div>
						<input type="text" onChange={(e)=>this.loadProduct(e.target.value)}name=""/>
					</div>
					<Modularity.ModuleUtilities.OutputLink output={this.product}/>
					{super.render()}
				</div>
			</div>
			)
	}
}
ProductService.Outputs = {
	product: {},
	string: {}
}

ProductService.Inputs = {
	input: {
		type: Modularity.Module.Types.Number
	}
}

ProductService.Category = "Services"


export default ProductService;