import './collapse.scss';

export default function Collapse( props ) {
	// The state of the collapse managed by the parent component to let the parent control if the collapse is open or closed by default.
	return (
		<div
			className={ `eps-collapse ${ props.className }` }
			data-open={ props.isOpen || undefined /* Set `undefined` when 'isOpen' equals `false` to avoid showing the attr "data-open" */ }
		>
			<button
				className="eps-collapse__title"
				onClick={ () => {
					props.onChange( ( value ) => ! value );
					props.onClick?.( props.isOpen, props.title );
				} }
			>
				<span>{ props.title }</span>
				<i className="eicon-chevron-right eps-collapse__icon" />
			</button>
			<div className="eps-collapse__content">
				{ props.children }
			</div>
		</div>
	);
}

Collapse.propTypes = {
	isOpen: PropTypes.bool,
	onChange: PropTypes.func,
	className: PropTypes.string,
	title: PropTypes.node,
	onClick: PropTypes.func,
	children: PropTypes.oneOfType( [
		PropTypes.node,
		PropTypes.arrayOf( PropTypes.node ),
	] ),
};

Collapse.defaultProps = {
	className: '',
	isOpen: false,
};