/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import { ProductIcon } from '@teydeastudio/components/src/product-icon/index.js';

/**
 * WordPress dependencies
 */
import { __, sprintf } from '@wordpress/i18n';

/**
 * RecommendedPluginsTable component
 *
 * @param {Object} properties                    Component properties object.
 * @param {Array}  properties.recommendedPlugins Array of recommended plugins with their data.
 *
 * @return {Element} RecommendedPluginsTable component.
 */
export const RecommendedPluginsTable = ( { recommendedPlugins } ) => {
	/**
	 * Render the action link
	 *
	 * @param {string}  detailsUrl  Plugin details URL.
	 * @param {string}  name        Plugin name.
	 * @param {boolean} isInstalled Whether the plugin is installed.
	 * @param {boolean} isActive    Whether the plugin is activated.
	 *
	 * @return {string|Element} The action link.
	 */
	const renderActionLink = ( detailsUrl, name, isInstalled, isActive ) => {
		if ( isInstalled && isActive ) {
			return '-';
		}

		return (
			<a
				href={ detailsUrl }
				className="thickbox open-plugin-details-modal"
				aria-label={ sprintf(
					// Translators: %s - plugin name.
					__( 'More information about %s', 'careers' ),
					name,
				) }
				data-title={ name }
			>
				{ sprintf(
					// Translators: %1$s - action to take, either "Activate" or "Install"; %2$s - plugin name.
					__( '%1$s the %2$s plugin', 'careers' ),
					isInstalled ? __( 'Activate', 'careers' ) : __( 'Install', 'careers' ),
					name,
				) }
			</a>
		);
	};

	/**
	 * Render the component
	 */
	return (
		<table>
			<thead>
				<tr>
					<th>{ __( 'Name', 'careers' ) }</th>
					<th>{ __( 'Is installed', 'careers' ) }</th>
					<th>{ __( 'Is active', 'careers' ) }</th>
					<th>{ __( 'Actions', 'careers' ) }</th>
				</tr>
			</thead>
			<tbody>
				{
					/**
					 * Show all recommended plugins and
					 * their status info
					 */
					recommendedPlugins.map( ( recommendedPlugin ) => {
						const { name, description, slug, detailsUrl, status } = recommendedPlugin;
						const { isInstalled, isActive } = status;

						return (
							<tr key={ slug }>
								<td>
									<div className="careers-settings-container__plugin-name">
										<ProductIcon slug={ slug } />
										<strong>{ name }</strong>
									</div>
									<p className="careers-settings-container__plugin-description">{ description }</p>
								</td>
								<td className={ `careers-settings-container__text--${ isInstalled ? 'success' : 'error' }` }>
									<strong>{ isInstalled ? __( 'Yes', 'careers' ) : __( 'No', 'careers' ) }</strong>
								</td>
								<td className={ `careers-settings-container__text--${ isActive ? 'success' : 'error' }` }>
									<strong>{ isActive ? __( 'Yes', 'careers' ) : __( 'No', 'careers' ) }</strong>
								</td>
								<td>{ renderActionLink( detailsUrl, name, isInstalled, isActive ) }</td>
							</tr>
						);
					} )
				}
			</tbody>
		</table>
	);
};

/**
 * Props validation
 */
RecommendedPluginsTable.propTypes = {
	recommendedPlugins: PropTypes.arrayOf(
		PropTypes.shape( {
			name: PropTypes.string.isRequired,
			description: PropTypes.string.isRequired,
			slug: PropTypes.string.isRequired,
			detailsUrl: PropTypes.string.isRequired,
			status: PropTypes.shape( {
				isActive: PropTypes.bool.isRequired,
				isInstalled: PropTypes.bool.isRequired,
			} ).isRequired,
		} ),
	).isRequired,
};
