import { useState, useEffect } from 'react';

import { Context } from './table-context';
import { arrayToClassName } from 'elementor-app/utils/utils.js';

import TableHead from './table.head';
import TableBody from './table-body';
import TableRow from './table-row';
import TableCell from './table-cell';
import TableCheckbox from './table-checkbox';

import './table.scss';

export default function Table( { className, initialSelected, initialDisabled, selection, children, onSelect } ) {
	const [ selected, setSelected ] = useState( initialSelected ),
	[ disabled, setDisabled ] = useState( initialDisabled ),
	classNameBase = 'eps-table',
	classes = [ classNameBase, { [ classNameBase + '--selection' ]: selection }, className ];

	useEffect( () => {
		if ( onSelect ) {
			onSelect( selected );
		}
	}, [ selected ] );

	return (
		<Context.Provider value={ { selected, setSelected, disabled, setDisabled } }>
			<table className={ arrayToClassName( classes ) }>
				{
					selection &&
					<colgroup>
						<col className={ classNameBase + '__checkboxes-column' } />
					</colgroup>
				}

				{ children }
			</table>
		</Context.Provider>
	);
}

Table.Head = TableHead;
Table.Body = TableBody;
Table.Row = TableRow;
Table.Cell = TableCell;
Table.Checkbox = TableCheckbox;

Table.propTypes = {
	children: PropTypes.any.isRequired,
	className: PropTypes.string,
	headers: PropTypes.array,
	initialDisabled: PropTypes.array,
	initialSelected: PropTypes.array,
	rows: PropTypes.array,
	selection: PropTypes.bool,
	onSelect: PropTypes.func,
};

Table.defaultProps = {
	selection: false,
	initialDisabled: [],
	initialSelected: [],
};