/**
 * 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 {JSX} 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|JSX} 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,
};
