/**
 * External dependencies
 */
import ErrorPlaceholder, {
	ErrorObject,
} from '@woocommerce/editor-components/error-placeholder';
import type { Block } from '@wordpress/blocks';
import { ComponentType } from 'react';

/**
 * Internal dependencies
 */
import { BLOCK_NAMES } from './constants';
import { getClassPrefixFromName } from './utils';

interface APIErrorRequiredProps {
	error: ErrorObject;
	isLoading: boolean;
	name: string;
}

interface APIErrorProductProps extends APIErrorRequiredProps {
	getCategory: never;
	getProduct(): void;
}

interface APIErrorCategoryProps extends APIErrorRequiredProps {
	getCategory(): void;
	getProduct: never;
}

type APIErrorProps< T extends Block > =
	| ( T & APIErrorProductProps )
	| ( T & APIErrorCategoryProps );

export const withApiError =
	< T extends Block >( Component: ComponentType< T > ) =>
	( props: APIErrorProps< T > ) => {
		const { error, isLoading, name } = props;

		const className = getClassPrefixFromName( name );
		const onRetry =
			name === BLOCK_NAMES.featuredCategory
				? props.getCategory
				: props.getProduct;

		if ( error ) {
			return (
				<ErrorPlaceholder
					className={ `${ className }-error` }
					error={ error }
					isLoading={ isLoading }
					onRetry={ onRetry }
				/>
			);
		}

		return <Component { ...props } />;
	};