var DBG = DBG || false;
var DBG1 = true;
if (!global.p5VendorJs) throw "Missing p5 Vendor js libs";
if (!global.p5VendorJs.Redux) throw "Missing p5 Vendor js lib: Redux";
var createReactClass = global.p5VendorJs.createReactClass;
var h = global.p5VendorJs.React.createElement;
var ReactDOM = global.p5VendorJs.ReactDOM;
var Redux = global.p5VendorJs.Redux;
var ReduxThunk = global.p5VendorJs.ReduxThunk;
var createStoreWithThunkMiddleware = Redux.applyMiddleware(ReduxThunk)(Redux.createStore); // TODO: to vendor.js

var cellFontSize = 12;
var cellLineHeight = 18;

var p5UI__TableAjax = createReactClass({
	getInitialState: function () {
		var cols = Array.apply(null, { length: 13 }).map(function (undefinedValue, cellIdx) {
			var label = "Col("+cellIdx+")" + ( cellIdx % 2 ? "<br>Col line 2..." : "" );
			return label;
		});
		return {
			isLoading: false,
			cols: cols,
			data: [],
			rowsPerPage: 10,
		};
	},
	getTheadCellHeight: function () {
		var maxLines = this.state.cols.reduce(function (ret, cell) {
			var label = cell;
			return Math.max(ret, label.replace('<br>', '###').replace('<br/>', '###').split("###").length);
		}, 1)
		return 2 * 2 + maxLines * cellLineHeight;
	},
	renderRowCell: function (rowIdx) {
		var _rowIdx = rowIdx;
		return function (value, cellIdx) {
			return h('td', {}, "("+_rowIdx+"/"+cellIdx+")");
		}
	},
	renderTheadColNameRowCell: function (value, cellIdx) {
		var label = this.state.cols[cellIdx];
		return h('th', {
			style: {
				padding: "2px 120px",
				'white-space': 'nowrap',
				'line-height': cellLineHeight+"px",
				'font-size': cellFontSize+"px",
				'border-bottom-width': "1px"
			}
		}, label.replace('<br>', '###<br>###').replace('<br/>', '###<br>###').split("###").map(function (txtOrBr) {
			return ('<br>' === txtOrBr) ? h('br') : txtOrBr;
		}));
	},
	renderTheadFilterRowCell: function (value, cellIdx) {
		return h('td', { style: { padding: 0 } }, [
			// <input class="filter" placeholder="%" type="text" value="" style="box-sizing: border-box; width: 100%; height: 21px; border-top: 0px; border-bottom: 2px solid transparent;">
			h('input', {
				type: "text",
				placeholder: "%",
				style: {
					'box-sizing': "border-box",
					padding: "0 5px",
					width: "100%",
					height: "21px",
					'border': "0px",
					'border-bottom': "2px solid transparent",
					'background-color': "#eee"
				}
			})
		]);
	},
	renderRow: function (value, rowIdx) {
		var allColsCount = 13; // TODO: (this.state.cols.length || 0) + 3;
		var renderRowCell = this.renderRowCell(rowIdx);
		return h('tr', {}, Array.apply(null, { length: allColsCount }).map(renderRowCell));
	},
	render: function () {
		var baseStyle = { 'border-top': "1px solid red", 'border-bottom': "1px solid red", 'min-height': "100px" } // TODO: DBG
		var allColsCount = 13; // TODO: (this.state.cols.length || 0) + 3;

		return h('div', {
			className: "p5UI__TableAjax",
			style: Object.assign(baseStyle, {
			})
		}, [
			h('div', { style: { 'background-color': "#f00", color: "#fff", padding: "3px 12px" } }, "namespace: '" + this.props.namespace + "' getTheadCellHeight("+this.getTheadCellHeight()+")"),
			h('div', {
				style: {
					'margin-left': "163px",
					'min-height': "360px",
					'overflow': "scroll visible",
					'padding-bottom': "1px",
					'clear': "both",
					'width': "1187px",
				}
			}, [
				h('table', {
					className: "table table-bordered table-condensed",
				}, [
					h('thead', {}, [
						h('tr', {}, Array.apply(null, { length: allColsCount }).map(this.renderTheadColNameRowCell)),
						h('tr', {}, Array.apply(null, { length: allColsCount }).map(this.renderTheadFilterRowCell))
					]),
					h('tbody', {}, [
						Array.apply(null, { length: this.state.rowsPerPage }).map(this.renderRow)
					])
				])
			])
		]);
	}
});

global.p5VendorJs['p5UI__TableAjax'] = p5UI__TableAjax;