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

export default function TableHead( {headers, updateHeader, tableStyles, states} ) {
	const {
		headerBackground,
		headerTextColor,
		headerTextAlign,
		headerFontStyle,
		headerTextDecoration,
		headerFontSize,
		headerFontWeight,

		headerBorderColumnColor,
		headerBorderColumnWidthLeft,
		headerBorderColumnWidthRight,
		headerBorderRowColor,
		headerBorderRowWidthTop,
		headerBorderRowWidthBottom,
	} = tableStyles;

	return (
		<thead className={"fitb-item-table-header"} style={{
			borderStyle: "solid",
			borderColor: headerBorderRowColor,
			borderTopWidth: headerBorderRowWidthTop,
			borderBottomWidth: headerBorderRowWidthBottom,
		}}>
		<tr className={"fitb-item-table-header-row"} style={{
			background: headerBackground,
		}}>
			{headers.map((header, index) => (
				states[index] ?
					<th className={"fitb-item-table-header-cell"} key={index}
						style={{
							borderStyle: "solid",
							borderColor: headerBorderColumnColor,
							borderLeftWidth: headerBorderColumnWidthLeft,
							borderRightWidth: headerBorderColumnWidthRight,
						}}>
						<RichText
							tagName="div"
							key={index}
							value={header}
							style={{
								color: headerTextColor,
								textAlign: headerTextAlign,
								fontStyle: headerFontStyle,
								textDecoration: headerTextDecoration,
								fontSize: headerFontSize,
								fontWeight: headerFontWeight,
							}}
							onChange={(value) => updateHeader(index, value)}
						/>
					</th> : ''
			))}
		</tr>
		</thead>);
}