/**
 * WordPress dependencies
 */
import { Button } from '@safe-wordpress/components';
import { useState } from '@safe-wordpress/element';
import { _x } from '@safe-wordpress/i18n';
import { SelectControl, TextControl } from '@wordpress/components';

/**
 * External dependencies
 */
import { trim } from 'lodash';
import { hasHead } from '@nab/utils';

export type AddEntityContentProps<
	T extends { readonly attributes: { readonly name: string } },
> = {
	readonly labels: {
		readonly collectionName: string;
		readonly nameField: string;
		readonly newItemOption: string;
	};
	readonly item: T;
	readonly items: ReadonlyArray< T >;
	readonly saving: boolean;
	readonly onClose: () => void;
	readonly onSave: (
		items: ReadonlyArray< NoInfer< T > >
	) => Promise< unknown >;
};

export function AddEntityContent<
	T extends { readonly attributes: { readonly name: string } },
>( {
	item,
	items,
	labels,
	saving,
	onClose,
	onSave,
}: AddEntityContentProps< T > ): JSX.Element {
	const [ hasCustomName, enableCustomName ] = useState(
		! item.attributes.name ||
			! items.find( ( i ) => i.attributes.name === item.attributes.name )
	);
	const [ name, setName ] = useState( item.attributes.name || '' );

	const canBeSaved =
		! hasCustomName ||
		! items.find( ( i ) => i.attributes.name === trim( name ) );

	return (
		<>
			<div className="nelio-ab-testing-reusable-entities-dialog__content">
				{ hasHead( items ) && (
					<SelectControl
						label={ labels.collectionName }
						options={ [
							{
								value: '',
								label: labels.newItemOption,
							},
							...items.map(
								( { attributes: { name: itemName } } ) => ( {
									value: itemName,
									label: itemName,
								} )
							),
						] }
						value={ hasCustomName ? '' : name }
						onChange={ ( value ) => {
							enableCustomName( '' === value );
							setName( value );
						} }
					/>
				) }
				{ hasCustomName && (
					<TextControl
						label={
							hasHead( items ) ? undefined : labels.nameField
						}
						placeholder={
							hasHead( items ) ? labels.nameField : undefined
						}
						value={ name }
						onChange={ setName }
					/>
				) }
			</div>
			<div className="nelio-ab-testing-reusable-entities-dialog__actions">
				<Button
					variant="secondary"
					disabled={ saving }
					onClick={ onClose }
				>
					{ _x( 'Close', 'command', 'nelio-ab-testing' ) }
				</Button>
				<div className="nelio-ab-testing-reusable-entities-dialog__main-actions">
					<Button
						variant="primary"
						disabled={ saving || ! canBeSaved }
						onClick={ async () => {
							const actualName = trim( name );
							const newItem = {
								...item,
								attributes: {
									...item.attributes,
									name: actualName,
								},
							};
							await onSave( [
								...items.filter(
									( i ) => i.attributes.name !== actualName
								),
								newItem,
							] );
							onClose();
						} }
					>
						{ getAction( { saving, hasCustomName } ) }
					</Button>
				</div>
			</div>
		</>
	);
}

// HELPERS

function getAction( {
	saving,
	hasCustomName,
}: {
	readonly saving: boolean;
	readonly hasCustomName: boolean;
} ): string {
	if ( hasCustomName ) {
		return saving
			? _x( 'Saving…', 'text', 'nelio-ab-testing' )
			: _x( 'Save', 'command', 'nelio-ab-testing' );
	}
	return saving
		? _x( 'Overwriting…', 'text', 'nelio-ab-testing' )
		: _x( 'Overwrite', 'command', 'nelio-ab-testing' );
}