import { Meteor } from 'meteor/meteor';
import React, { useState } from 'react';
import { useTracker } from 'meteor/react-meteor-data';
import _ from 'lodash';

export default class GridTable2 extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			rows: [{_id: 1234, name: "Fred"}, {_id: 1235, }],
			columns: [{id: "first", value: row => {return row._id}}, {id: "second", value: row => {return row.name}}]
		}
	}
	render() {
		console.log("Rendering GridTable2")
		return <table><tbody>
		<tr><td>Test</td><td>Test2</td></tr>
		{/*<tr>*/}
		{/*<GridTableCell row={this.state.row} column={this.state.column}></GridTableCell>*/}
		{/*</tr>*/}
		{/*{this.state.rows.map((row) => <GridTableRow key={row._id} row={row} columns={this.state.columns}></GridTableRow>)}*/}
		</tbody></table>
	}
}

class GridTableRow extends React.Component {
	constructor(props) {
		super(props)
		this.state = {
			columns: props.columns,
			row: props.row,
		}
	}
	render() {
		console.log("Rendering GridTableRow")
		return <tr>
			{this.state.columns.map((column)=><GridTableCell key={this.state.row._id + "-" + column.id} row={this.state.row} column={column}/>)}
		</tr>
	}
}

class GridTableCell extends React.Component {
	constructor(props) {
		super(props)
		console.log(props);
		this.state = {
			row: props.row,
			column: props.column,
			value: props.column.value(props.row)
		}
	}
	render() {
		console.log("Rendering GridTableCell")
		return <td>{this.state.value}</td>
	}
}