/**
 * External dependencies
 */
import { __ } from '@wordpress/i18n';
import { Button } from '@wordpress/components';
import { Icon, trendingUp } from '@wordpress/icons';
import { recordEvent } from '@woocommerce/tracks';
import { Spinner } from '@woocommerce/components';

/**
 * Internal dependencies
 */
import { CollapsibleCard, CardBody } from '~/marketing/components';
import { useRecommendedPlugins } from './useRecommendedPlugins';
import { PluginsTabPanel } from './PluginsTabPanel';
import './DiscoverTools.scss';

export const DiscoverTools = () => {
	const { isInitializing, isLoading, plugins, installAndActivate } =
		useRecommendedPlugins();

	/**
	 * Renders card body.
	 *
	 * - If loading is in progress, it renders a loading indicator.
	 * - If there are zero plugins, it renders an empty content.
	 * - Otherwise, it renders PluginsTabPanel.
	 */
	const renderCardContent = () => {
		if ( isInitializing ) {
			return (
				<CardBody>
					<Spinner />
				</CardBody>
			);
		}

		if ( plugins.length === 0 ) {
			return (
				<CardBody className="woocommerce-marketing-discover-tools-card-body-empty-content">
					<Icon icon={ trendingUp } size={ 32 } />
					<div>
						{ __(
							'Continue to reach the right audiences and promote your products in ways that matter to them with our range of marketing solutions.',
							'woocommerce'
						) }
					</div>
					<Button
						variant="tertiary"
						href="https://woocommerce.com/product-category/woocommerce-extensions/marketing-extensions/"
						onClick={ () => {
							recordEvent( 'marketing_explore_more_extensions' );
						} }
					>
						{ __(
							'Explore more marketing extensions',
							'woocommerce'
						) }
					</Button>
				</CardBody>
			);
		}

		return (
			<PluginsTabPanel
				plugins={ plugins }
				isLoading={ isLoading }
				onInstallAndActivate={ installAndActivate }
			/>
		);
	};

	return (
		<CollapsibleCard
			className="woocommerce-marketing-discover-tools-card"
			header={ __( 'Discover more marketing tools', 'woocommerce' ) }
		>
			{ renderCardContent() }
		</CollapsibleCard>
	);
};