/**
 * WordPress dependencies
 */
import { __, _n, sprintf } from '@wordpress/i18n';
import { Button, ExternalLink } from '@wordpress/components';
import { useDispatch, useSelect } from '@wordpress/data';

/**
 * Internal dependencies
 */
import { AMPValidationErrorsKeptIcon } from '../../../icons';
import { store as blockValidationStore } from '../../store';
import { StatusIcon } from '../icon';
import { SidebarNotification } from '../sidebar-notification';
import { useErrorsFetchingStateChanges } from '../../hooks/use-errors-fetching-state-changes';

/**
 * AMP validation status notification component.
 */
export default function AMPValidationStatusNotification() {
	const { autosave, savePost } = useDispatch('core/editor');
	const { isFetchingErrors } = useErrorsFetchingStateChanges();

	const {
		fetchingErrorsRequestErrorMessage,
		isDraft,
		isEditedPostNew,
		keptMarkupValidationErrorCount,
		reviewLink,
		supportLink,
		unreviewedValidationErrorCount,
		validationErrorCount,
	} = useSelect(
		(select) => ({
			fetchingErrorsRequestErrorMessage:
				select(
					blockValidationStore
				).getFetchingErrorsRequestErrorMessage(),
			isDraft:
				['draft', 'auto-draft'].indexOf(
					select('core/editor').getEditedPostAttribute('status')
				) !== -1,
			isEditedPostNew: select('core/editor').isEditedPostNew(),
			keptMarkupValidationErrorCount:
				select(blockValidationStore).getKeptMarkupValidationErrors()
					.length,
			reviewLink: select(blockValidationStore).getReviewLink(),
			supportLink: select(blockValidationStore).getSupportLink(),
			unreviewedValidationErrorCount:
				select(blockValidationStore).getUnreviewedValidationErrors()
					.length,
			validationErrorCount:
				select(blockValidationStore).getValidationErrors().length,
		}),
		[]
	);

	if (isFetchingErrors) {
		return null;
	}

	if (isEditedPostNew) {
		return (
			<SidebarNotification
				icon={<StatusIcon />}
				message={__('Validation will be checked upon saving.', 'amp')}
			/>
		);
	}

	const sidebarNotificationAction = reviewLink && (
		<>
			<ExternalLink href={reviewLink}>
				{__('View technical details', 'amp')}
			</ExternalLink>
			<br />
			{supportLink && (
				<ExternalLink href={supportLink}>
					{__('Get Support', 'amp')}
				</ExternalLink>
			)}
		</>
	);

	if (fetchingErrorsRequestErrorMessage) {
		return (
			<SidebarNotification
				icon={<AMPValidationErrorsKeptIcon />}
				message={fetchingErrorsRequestErrorMessage}
				action={
					<Button
						isLink
						onClick={
							isDraft
								? () => savePost({ isPreview: true })
								: () => autosave({ isPreview: true })
						}
					>
						{__('Try again', 'amp')}
					</Button>
				}
			/>
		);
	}

	if (keptMarkupValidationErrorCount > 0) {
		return (
			<SidebarNotification
				icon={<AMPValidationErrorsKeptIcon />}
				message={sprintf(
					/* translators: %d is count of validation errors whose invalid markup is kept */
					_n(
						'AMP is disabled due to invalid markup being kept for %d issue.',
						'AMP is disabled due to invalid markup being kept for %d issues.',
						keptMarkupValidationErrorCount,
						'amp'
					),
					keptMarkupValidationErrorCount
				)}
				action={sidebarNotificationAction}
			/>
		);
	}

	if (unreviewedValidationErrorCount > 0) {
		return (
			<SidebarNotification
				icon={<StatusIcon broken={true} />}
				message={
					// @todo De-duplicate with what is in AMPDocumentStatusNotification.
					sprintf(
						/* translators: %d is count of unreviewed validation error */
						_n(
							'AMP is valid, but %d issue needs review.',
							'AMP is valid, but %d issues need review.',
							unreviewedValidationErrorCount,
							'amp'
						),
						unreviewedValidationErrorCount
					)
				}
				action={sidebarNotificationAction}
			/>
		);
	}

	if (validationErrorCount > 0) {
		return (
			<SidebarNotification
				icon={<StatusIcon />}
				message={
					// @todo De-duplicate with what is in AMPDocumentStatusNotification.
					sprintf(
						/* translators: %d is count of unreviewed validation error */
						_n(
							'AMP is valid. %d issue was reviewed.',
							'AMP is valid. %d issues were reviewed.',
							validationErrorCount,
							'amp'
						),
						validationErrorCount
					)
				}
				action={sidebarNotificationAction}
			/>
		);
	}

	// @todo De-duplicate with what is in AMPDocumentStatusNotification.
	return (
		<SidebarNotification
			icon={<StatusIcon />}
			message={__('No AMP validation issues detected.', 'amp')}
		/>
	);
}
