import React, {component} from 'react';
import { Row , Col} from 'react-materialize';
import Modularity from 'modularity-front';
import './CustomTable.css';
let Module = Modularity.Module;

class CustomTable extends Modularity.Module{
	
	constructor(props){
		super(props);
	}
	render(){
		let headers = this.TableHeader.value.map((header) => {
			return(<th>{header}</th>)
		})

		let items = this.TableBody.value
		let body = Object.keys(items).map((key,index) => {
			return (
				<tr key={index} className="row_content">
					<td>{items[key].name}</td>
					<td>{items[key].price} €</td>
					<td>{items[key].quantity}</td>
					<td>{(items[key].price * items[key].quantity,3).toFixed(2)} €</td>
				</tr>
				)
		})

		return(
			<Row>
			 	<table className="custom_table">
				 	<thead className="header">
				 		<tr className="header_content">
				 			{headers}
				 		</tr>
				 	</thead>
				 	
				 	<tbody className="table_body">
				 		{body}
				 	</tbody>

			 	</table>
			 {super.render()}
		 	</Row>
			)
		}
	}
CustomTable.EditPosition = "center";
CustomTable.Inputs = {
	TableHeader: {
		type:Module.Types.Array,
		defaultValue:['Selected Items','Unit Price','Quantity','SubTotal']
	},
	TableBody : {
		type:Module.Types.Object,
		defaultValue:{}
	}
}


CustomTable.Category = 'sxoinas'


export default CustomTable;




