/**
 * External dependencies
 */
import { FormTokenField as WPFormTokenField } from 'wordpress-components';
import clsx from 'clsx';

/**
 * Internal dependencies
 */
import './style.scss';

export interface Props {
	className?: string;
	disabled?: boolean;
	displayTransform?: ( value: string ) => string;
	label?: string;
	messages?: Record< string, string >;
	multiple?: boolean;
	onChange: ( value: string[] ) => void;
	placeholder?: string;
	saveTransform?: ( value: string ) => string;
	style?: React.CSSProperties;
	suggestions: string[];
	validateInput?: ( token: string ) => boolean;
	value: string[];
}

const FormTokenField = ( {
	className,
	style,
	suggestions,
	multiple = true,
	saveTransform = ( incompleteToken ) =>
		incompleteToken.trim().replace( /\s/g, '-' ),
	messages = {},
	validateInput = ( token: string ) => suggestions.includes( token ),
	label = '',
	...props
}: Props ) => {
	return (
		<div
			className={ clsx(
				'wc-blocks-components-form-token-field-wrapper',
				className,
				{
					'single-selection': ! multiple,
				}
			) }
			style={ style }
		>
			<WPFormTokenField
				label={ label }
				__experimentalExpandOnFocus={ true }
				__experimentalShowHowTo={ false }
				__experimentalValidateInput={ validateInput }
				saveTransform={ saveTransform }
				maxLength={ multiple ? undefined : 1 }
				suggestions={ suggestions }
				messages={ messages }
				{ ...props }
			/>
		</div>
	);
};

export default FormTokenField;