import {RichText} from "@wordpress/block-editor";


export default function TableBody({tableStyles, updateCell, rows, states}) {

	const {
		bodyBackground,
		bodyBackgroundEven,
		bodyTextColor,
		bodyTextColorEven,
		bodyTextDecoration,
		bodyTextAlign,
		bodyFontStyle,
		bodyFontSize,
		bodyFontWeight,

		bodyBorderColumnColor,
		bodyBorderColumnWidthLeft,
		bodyBorderColumnWidthRight,
		bodyBorderRowColor,
		bodyBorderRowWidthTop,
		bodyBorderRowWidthBottom,

		multipleBodyBackground
	} = tableStyles;

	return (
		<tbody className={"fitb-item-table-body"}>

		{Array.from({length: 2}).map((_, trIndex) => (
			<tr className={"fitb-item-table-row"} style={{
				background: (multipleBodyBackground && trIndex === 1) ? bodyBackgroundEven : bodyBackground,
				borderStyle: "solid",
				borderColor: bodyBorderRowColor,
				borderTopWidth: bodyBorderRowWidthTop,
				borderBottomWidth: bodyBorderRowWidthBottom,
			}}>
				{rows.map((row, index) => (
					states[index] ?
						<td className={"fitb-item-table-cell"} key={index}
							style={{
								borderStyle: "solid",
								borderColor: bodyBorderColumnColor,
								borderLeftWidth: bodyBorderColumnWidthLeft,
								borderRightWidth: bodyBorderColumnWidthRight,
							}}>
							<RichText
								tagName="div"
								key={index}
								value={row}
								style={{
									color: (multipleBodyBackground && trIndex === 1) ? bodyTextColorEven : bodyTextColor,
									textAlign: bodyTextAlign,
									fontStyle: bodyFontStyle,
									fontSize: bodyFontSize,
									textDecoration: bodyTextDecoration,
									fontWeight: bodyFontWeight,
								}}
								onChange={(value) =>
									updateCell(index, value)
								}
							/>
						</td> : ''
				))}
			</tr>
		))}
		</tbody>
	);
}