import { createInterpolateElement } from '@wordpress/element';
import { PanelRow } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

const { flowEW } = window;

function SettingsHint( { settingsUrl, usersUrl } ) {
	const settingsLink = (
		<a
			href={ settingsUrl }
			className="flow-ew-review-notice__link"
			target="_blank"
			rel="noreferrer"
		/>
	);
	const usersLink = (
		<a
			href={ usersUrl }
			className="flow-ew-review-notice__link"
			target="_blank"
			rel="noreferrer"
		/>
	);

	return createInterpolateElement(
		__(
			'Please check the <settings>settings</settings> to see which user roles can review, and also if the role is applied the assigned <users>users</users>.',
			'jumplinks-editorial-workflow'
		),
		{
			settings: settingsLink,
			users: usersLink,
		}
	);
}

export default function ReviewModeNotice( {
	reviewMandatory,
	publishBlocked,
	noReviewers,
	settingsUrl = flowEW.settingsUrl,
	usersUrl = flowEW.usersUrl,
} ) {
	if ( noReviewers && ! reviewMandatory ) {
		return (
			<PanelRow>
				<div
					className="flow-ew-review-notice flow-ew-review-notice--in-review"
					role="alert"
				>
					<p className="flow-ew-review-notice__title">
						{ __(
							'No Review Roles Assigned',
							'jumplinks-editorial-workflow'
						) }
					</p>
					<p className="flow-ew-review-notice__desc">
						<SettingsHint
							settingsUrl={ settingsUrl }
							usersUrl={ usersUrl }
						/>
					</p>
				</div>
			</PanelRow>
		);
	}

	if ( ! publishBlocked ) {
		return null;
	}

	if ( noReviewers ) {
		return (
			<PanelRow>
				<div
					className="flow-ew-review-notice flow-ew-review-notice--changes-requested"
					role="alert"
					data-flow-ew-publish-guard-only="1"
				>
					<p className="flow-ew-review-notice__title">
						{ __(
							'No Review Roles Assigned',
							'jumplinks-editorial-workflow'
						) }
					</p>
					<p className="flow-ew-review-notice__desc">
						{ __(
							'Post can go live only after approval by a reviewer.',
							'jumplinks-editorial-workflow'
						) }{ ' ' }
						<SettingsHint
							settingsUrl={ settingsUrl }
							usersUrl={ usersUrl }
						/>
					</p>
				</div>
			</PanelRow>
		);
	}

	return (
		<PanelRow>
			<div
				className="flow-ew-review-notice flow-ew-review-notice--in-review"
				role="note"
				data-flow-ew-publish-guard-only="1"
			>
				<p className="flow-ew-review-notice__title">
					{ __(
						'Review Mode set to Mandatory',
						'jumplinks-editorial-workflow'
					) }
				</p>
				<p className="flow-ew-review-notice__desc">
					{ __(
						'Post can go live only after approval by a reviewer.',
						'jumplinks-editorial-workflow'
					) }
				</p>
			</div>
		</PanelRow>
	);
}
