/**
 * WordPress dependencies
 */
import { BlockControls } from '@safe-wordpress/block-editor';
import { ToolbarGroup, ToolbarButton } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';
import type { BlockEditProps } from '@safe-wordpress/blocks';

/**
 * External dependencies
 */
import { RequiredIcon } from '@nelio/forms/components';

/**
 * Internal dependencies
 */
import type { Attributes } from './types';

const BlockToolbar = ( props: BlockEditProps< Attributes > ): JSX.Element => {
	const { attributes, setAttributes } = props;
	const { required } = attributes;

	return (
		<>
			{ /* @ts-expect-error controls property is not mandatory */ }
			<BlockControls>
				<ToolbarGroup>
					<ToolbarButton
						icon={ <RequiredIcon /> }
						isActive={ required }
						title={ _x( 'Required', 'text', 'nelio-forms' ) }
						onClick={ () =>
							setAttributes( { required: ! required } )
						}
					/>
				</ToolbarGroup>
			</BlockControls>
		</>
	);
};

export default BlockToolbar;