/**
 * WordPress dependencies
 */
import { SelectControl } from '@safe-wordpress/components';
import { _x } from '@safe-wordpress/i18n';

/**
 * External dependencies
 */
import { PostSearcher } from '@nab/components';
import { isEmpty, isMultiArray, isSingleton } from '@nab/utils';

import type { PostSearcherProps } from '@nab/components';
import type { ExperimentEditProps, EntityKind, Maybe } from '@nab/types';

/**
 * Internal dependencies
 */
import './style.scss';
import { usePostTypes } from '../../../post/hooks';
import type { ControlAttributes } from '../../types';

type Attributes< T extends string > = {
	[ K in keyof ControlAttributes ]: K extends 'postType'
		? T
		: ControlAttributes[ K ];
};

export type OriginalProps< T extends string > = ExperimentEditProps<
	Attributes< T >
> & {
	readonly disableExistingContentSelect?: boolean;
	readonly disableRunAsInlineTestSelect?: boolean;
	readonly validPostFilter?: PostSearcherProps[ 'filter' ];
};

export const Original = < T extends string >( {
	attributes,
	setAttributes,
	validPostFilter,
	experimentType,
}: OriginalProps< T > ): JSX.Element => {
	const { postTypes, showSinglePostType, isLoadingPostTypes } =
		usePostTypes( experimentType );

	const defaultPostType = postTypes[ 0 ]?.name;
	const postType = attributes.postType || defaultPostType;
	const selectablePostTypes = postTypes.map( ( type ) => ( {
		value: type.name,
		label: type.labels.singular_name,
	} ) );

	return (
		<div className="nab-original-popup-alternative">
			<div className="nab-original-popup-alternative__selector">
				{ showSinglePostType && isSingleton( postTypes ) && (
					<input
						type="text"
						value={ postTypes[ 0 ].labels.singular_name }
						disabled
					/>
				) }
				{ isMultiArray( postTypes ) && (
					<SelectControl
						value={ postType }
						options={ selectablePostTypes }
						disabled={ !! attributes.postId }
						onChange={ ( value ) =>
							setAttributes( {
								postId: undefined,
								postType: value as T,
							} )
						}
					/>
				) }
				<PostSearcher
					disabled={ isEmpty( postTypes ) }
					type={ postType }
					value={ attributes.postId }
					perPage={ 10 }
					onChange={ ( value ) =>
						setAttributes( {
							postId: value,
							postType: postType as T,
						} )
					}
					filter={ validPostFilter }
					placeholder={ getPlaceholder(
						postTypes,
						isLoadingPostTypes
					) }
				/>
			</div>
		</div>
	);
};

// =======
// HELPERS
// =======

function getPlaceholder(
	postTypes: ReadonlyArray< EntityKind >,
	isLoading: boolean
): Maybe< string > {
	if ( isLoading ) {
		return _x(
			'Loading compatible post types…',
			'text',
			'nelio-ab-testing'
		);
	}

	if ( isEmpty( postTypes ) ) {
		return _x(
			'There are no compatible post types to select.',
			'text',
			'nelio-ab-testing'
		);
	}

	if ( postTypes?.length > 1 ) {
		return _x(
			'First select the post type and then the actual content…',
			'user',
			'nelio-ab-testing'
		);
	}

	return undefined;
}