import './style.scss';

import classnames from 'classnames/dedupe';

import { Button } from '@wordpress/components';
import { Fragment, useState } from '@wordpress/element';

/**
 * Component Class
 *
 * @param props
 */
export default function CollapseControl(props) {
	const { children, options, initialOpen } = props;

	const [collapsed, setCollapsed] = useState(initialOpen);

	return (
		<div className="vpf-component-collapse-control">
			{options.map((option) => {
				return (
					<Fragment key={option.category}>
						<Button
							onClick={() => {
								setCollapsed(
									option.category === collapsed
										? ''
										: option.category
								);
							}}
							className={classnames(
								'vpf-component-collapse-control-toggle',
								option.category === collapsed
									? 'vpf-component-collapse-control-active'
									: ''
							)}
						>
							<span>{option.title}</span>
							<svg
								viewBox="0 0 24 24"
								xmlns="http://www.w3.org/2000/svg"
								width="24"
								height="24"
								className="components-panel__arrow"
								aria-hidden="true"
								focusable="false"
							>
								<path d="M17.5 11.6L12 16l-5.5-4.4.9-1.2L12 14l4.5-3.6 1 1.2z" />
							</svg>
						</Button>
						<div
							className={classnames(
								'vpf-component-collapse-control-content',
								option.category === collapsed
									? 'vpf-component-collapse-control-content-active'
									: ''
							)}
						>
							{children(option)}
						</div>
					</Fragment>
				);
			})}
		</div>
	);
}