/**
 * WordPress dependencies
 */
import { InspectorControls } from '@safe-wordpress/block-editor';
import { PanelBody, ToggleControl } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';
import type { BlockEditProps } from '@safe-wordpress/blocks';

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

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

	return (
		<>
			<InspectorControls>
				<PanelBody
					title={ _x( 'Field settings', 'text', 'nelio-forms' ) }
				>
					<ToggleControl
						label={ _x(
							'Field is required',
							'text',
							'nelio-forms'
						) }
						help={ _x(
							'Does this field have to be completed for the form to be submitted?',
							'text',
							'nelio-forms'
						) }
						checked={ required }
						onChange={ ( value ) => {
							setAttributes( { required: value } );
						} }
					/>
					<ToggleControl
						label={ _x( 'Edit options', 'command', 'nelio-forms' ) }
						checked={ isEditingOptions }
						onChange={ ( value ) => {
							setAttributes( { isEditingOptions: value } );
						} }
					/>
					<ToggleControl
						label={ _x( 'Hide label', 'command', 'nelio-forms' ) }
						checked={ isLabelHidden }
						onChange={ ( value ) => {
							setAttributes( { isLabelHidden: value } );
						} }
					/>
				</PanelBody>
			</InspectorControls>
		</>
	);
};

export default Inspector;