"use strict";

const React = require("react");
const defaultValue = require("default-value");

const useTheme = require("../../util/themeable");
const defaultStyle = require("./style.css");
const generateGridItemStyle = require("../../util/generate-grid-item-style");
const generateGridTemplateString = require("../../util/generate-grid-template-string");

module.exports = function Grid({ x, y, rows, columns, rowGap, columnGap, children }) {
	let { withTheme } = useTheme({ control: "grid", defaultStyle });

	let rows_ = defaultValue(rows, [1]);
	let columns_ = defaultValue(columns, [1]);

	let style = {
		gridTemplateRows: generateGridTemplateString(rows_),
		gridTemplateColumns: generateGridTemplateString(columns_),
		gridRowGap: rowGap,
		gridColumnGap: columnGap,
		... generateGridItemStyle({ x, y })
	};

	// FIXME: Context for x/y

	return (
		<div className={withTheme("uilibComponent", "grid")} style={style}>
			{children}
		</div>
	);

	// return (
	// 	<div className="ribbonGrid" style={style}>
	// 		{childrenWithProps(props.children, (item) => {
	// 			let itemStyle = {};

	// 			if (item.props.x != null) {
	// 				itemStyle.gridColumnStart = item.props.x + 1;

	// 				if (item.props.cellWidth != null) {
	// 					itemStyle.gridColumnEnd = itemStyle.gridColumnStart + item.props.cellWidth;
	// 				}
	// 			}

	// 			if (item.props.y != null) {
	// 				itemStyle.gridRowStart = item.props.y + 1;

	// 				if (item.props.cellHeight != null) {
	// 					itemStyle.gridRowEnd = itemStyle.gridRowStart + item.props.cellHeight;
	// 				}
	// 			}

	// 			return {
	// 				style: itemStyle
	// 			};
	// 		})}
	// 	</div>
	// );
};