import { Cell } from '.';

/**
 * Renders a table generated by steelbreeze/landscape to an HTML element
 * @param tableData 
 * @param elementId 
 */
export function table(tableData: Array<Array<Cell>>, elementId: string, className: string): HTMLTableElement {
	const tableElement = document.createElement('table');
	tableElement.id = elementId;
	tableElement.classList.add(className);

	for (const rowData of tableData) {
		tableElement.appendChild(row(rowData));
	}

	return tableElement;
}

// render a row in a table
function row(rowData: Array<Cell>): HTMLTableRowElement {
	const rowElement = document.createElement('tr');

	for (const cellData of rowData) {
		rowElement.appendChild(cell(cellData));
	}

	return rowElement;
}

// render a cell in a table with a child div
function cell(cellData: Cell): HTMLTableCellElement {
	const cellElement = document.createElement(cellData.style.includes('axis') ? 'th' : 'td');
	cellElement.colSpan = cellData.cols;
	cellElement.rowSpan = cellData.rows;
	cellElement.className = `cell ${cellData.style}`;

	const divElement = document.createElement('div');
	divElement.appendChild(document.createTextNode(cellData.text || cellData.value || ''));

	cellElement.appendChild(divElement);

	return cellElement;
}