/**
 * `whenActive` HOC.
 *
 * Site Kit by Google, Copyright 2021 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * Internal dependencies
 */
import Data from 'googlesitekit-data';
import { CORE_MODULES } from '../googlesitekit/modules/datastore/constants';
import { kebabCaseToPascalCase } from '../googlesitekit/data/transform-case';
const { useSelect } = Data;

/**
 * Higher-Order Component to render wrapped components when selected module is active and connected.
 *
 * A higher-order component is used here instead of hooks because there is potential for
 * related selectors in components this HOC wraps to call out to resolvers that call endpoints
 * for modules that aren't active. This would cause 404s at best and possibly errors, so
 * it's better to wrap them in HOCs and "return early".
 *
 * @since 1.16.0
 *
 * @param {Object}           options                       Options for enhancing function.
 * @param {string}           options.moduleName            Name of a module to check.
 * @param {WPComponent|null} [options.FallbackComponent]   Optional. Fallback component to render when the module is not active.
 * @param {WPComponent|null} [options.IncompleteComponent] Optional. Fallback component to render when the module is active but not connected.
 * @return {Function} Enhancing function.
 */
export default function whenActive( {
	moduleName,
	FallbackComponent,
	IncompleteComponent = null,
} ) {
	return ( WrappedComponent ) => {
		WrappedComponent.count = WrappedComponent.count || 0;
		const WhenActiveComponent = ( props ) => {
			const count = WrappedComponent.count + 1;
			// if ( count > 150 ) {
			// 	debugger;
			// }
			// global.console.log( WrappedComponent.name, { count, moduleName, FallbackComponent, IncompleteComponent } );
			WrappedComponent.count = count;
			const { WidgetNull } = props;
			// The following eslint rule is disabled because it treats the following hook as such that doesn't adhere
			// the "rules of hooks" which is incorrect because the following hook is a valid one.
			// eslint-disable-next-line react-hooks/rules-of-hooks
			const module = useSelect( ( select ) => select( CORE_MODULES ).getModule( moduleName ) );
			// global.console.log( { moduleName, FallbackComponent, WidgetNull } ); // eslint-disable-line no-console
			const WhenFallbackComponent = FallbackComponent || WidgetNull;

			// Return <WidgetNull /> if the module is not loaded yet or doesn't exist.
			if ( ! module ) {
				return null;
			}

			// Return a fallback if the module is not active.
			if ( module.active === false ) {
				return <WhenFallbackComponent { ...props } />;
			}

			// Return a fallback if the module is active but not connected yet.
			if ( module.connected === false ) {
				if ( IncompleteComponent !== null ) {
					return <IncompleteComponent { ...props } />;
				}
				// If there isn't a IncompleteComponent then use the FallbackComponent if available.
				// return FallbackComponent !== null ? <FallbackComponent { ...props } /> : <props.WidgetNull />;
				// return WhenFallbackComponent !== null ? <WhenFallbackComponent { ...props } /> : <props.WidgetNull />;
				return <WhenFallbackComponent { ...props } />;
			}

			// Return the active and connected component.
			return <WrappedComponent { ...props } />;
		};

		WhenActiveComponent.displayName = `When${ kebabCaseToPascalCase( moduleName ) }Active`;
		if ( WrappedComponent.displayName || WrappedComponent.name ) {
			WhenActiveComponent.displayName += `(${ WrappedComponent.displayName || WrappedComponent.name })`;
		}

		return WhenActiveComponent;
	};
}

@@ -1991,352 +1991,50 @@
 %7B%0A%09%09
-WrappedComponent.count = WrappedComponent.count %7C%7C 0;%0A%09%09const WhenActiveComponent = ( props ) =%3E %7B%0A%09%09%09const count = WrappedComponent.count + 1;%0A%09%09%09// if ( count %3E 150 ) %7B%0A%09%09%09// %09debugger;%0A%09%09%09// %7D%0A%09%09%09// global.console.log( WrappedComponent.name, %7B count, moduleName, FallbackComponent, IncompleteComponent %7D );%0A%09%09%09WrappedComponent.count = count;
+const WhenActiveComponent = ( props ) =%3E %7B
 %0A%09%09%09
@@ -2416,117 +2416,8 @@
  );%0A
-%09%09%09// global.console.log( %7B moduleName, FallbackComponent, WidgetNull %7D ); // eslint-disable-line no-console%0A
 %09%09%09c
@@ -2496,22 +2496,12 @@
 urn 
-%3CWidgetNull /%3E
+null
  if 
@@ -2945,16 +2945,17 @@
 ;%0A%09%09%09%09%7D%0A
+%0A
 %09%09%09%09// I
@@ -3007,251 +3007,30 @@
 the 
-FallbackComponent if available.%0A%09%09%09%09// return FallbackComponent !== null ? %3CFallbackComponent %7B ...props %7D /%3E : %3Cprops.WidgetNull /%3E;%0A%09%09%09%09// return WhenFallbackComponent !== null ? %3CWhenFallbackComponent %7B ...props %7D /%3E : %3Cprops.WidgetNull /%3E;
+WhenFallbackComponent.
 %0A%09%09%09

Remove some debug code.