/**
 * External dependencies
 */
import PropTypes from 'prop-types';

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

/**
 * Internal dependencies
 */
import { TemplateModeOption } from '../components/template-mode-option';
import {
	AMPNotice,
	NOTICE_SIZE_LARGE,
	NOTICE_TYPE_INFO,
	NOTICE_SIZE_SMALL,
	NOTICE_TYPE_WARNING,
} from '../components/amp-notice';
import { Options } from '../components/options-context-provider';
import { READER, STANDARD, TRANSITIONAL } from '../common/constants';
import { AMPDrawer } from '../components/amp-drawer';
import { ReaderThemes } from '../components/reader-themes-context-provider';
import { ReaderThemeCarousel } from '../components/reader-theme-carousel';
import {
	NOT_RECOMMENDED,
	RECOMMENDED,
	useTemplateModeRecommendation,
} from '../components/use-template-mode-recommendation';

/**
 * Small notice indicating a mode is recommended.
 */
function RecommendedNotice() {
	return (
		<AMPNotice size={NOTICE_SIZE_SMALL}>
			{__('Recommended', 'amp')}
		</AMPNotice>
	);
}

/**
 * Small notice indicating a mode is not recommended.
 */
function NotRecommendedNotice() {
	return (
		<AMPNotice size={NOTICE_SIZE_SMALL} type={NOTICE_TYPE_WARNING}>
			{__('Not recommended', 'amp')}
		</AMPNotice>
	);
}

/**
 * Template modes section of the settings page.
 *
 * @param {Object}  props                   Component props.
 * @param {boolean} props.focusReaderThemes Whether the reader themes drawer should be opened and focused.
 */
export function TemplateModes({ focusReaderThemes }) {
	const {
		editedOptions: { theme_support: editedThemeSupport },
	} = useContext(Options);
	const { selectedTheme, templateModeWasOverridden } =
		useContext(ReaderThemes);
	const templateModeRecommendation = useTemplateModeRecommendation();

	const getLabelForTemplateMode = useCallback(
		(mode) => {
			if (!templateModeRecommendation) {
				return null;
			}

			switch (templateModeRecommendation[mode].recommendationLevel) {
				case RECOMMENDED:
					return <RecommendedNotice />;
				case NOT_RECOMMENDED:
					return <NotRecommendedNotice />;
				default:
					return null;
			}
		},
		[templateModeRecommendation]
	);

	return (
		<section className="template-modes" id="template-modes">
			<h2>{__('Template Mode', 'amp')}</h2>
			{templateModeWasOverridden && (
				<AMPNotice type={NOTICE_TYPE_INFO} size={NOTICE_SIZE_LARGE}>
					{__(
						"Because you selected a Reader theme that is the same as your site's active theme, your site has automatically been switched to Transitional template mode.",
						'amp'
					)}
				</AMPNotice>
			)}
			<TemplateModeOption
				details={templateModeRecommendation?.[STANDARD]?.details}
				detailsUrl="https://amp-wp.org/documentation/getting-started/standard/"
				initialOpen={false}
				mode={STANDARD}
				labelExtra={getLabelForTemplateMode(STANDARD)}
			/>
			<TemplateModeOption
				details={templateModeRecommendation?.[TRANSITIONAL]?.details}
				detailsUrl="https://amp-wp.org/documentation/getting-started/transitional/"
				initialOpen={false}
				mode={TRANSITIONAL}
				labelExtra={getLabelForTemplateMode(TRANSITIONAL)}
			/>
			<TemplateModeOption
				details={templateModeRecommendation?.[READER]?.details}
				detailsUrl="https://amp-wp.org/documentation/getting-started/reader/"
				initialOpen={false}
				mode={READER}
				labelExtra={getLabelForTemplateMode(READER)}
			/>
			{READER === editedThemeSupport && (
				<AMPDrawer
					selected={true}
					heading={
						<div className="reader-themes__heading">
							<h3>
								{sprintf(
									/* translators: %s placeholder is a theme name. */
									__('Reader theme: %s', 'amp'),
									selectedTheme.name || ''
								)}
							</h3>
						</div>
					}
					hiddenTitle={__('Show reader themes', 'amp')}
					id="reader-themes"
					initialOpen={focusReaderThemes}
				>
					<ReaderThemeCarousel />
				</AMPDrawer>
			)}
		</section>
	);
}
TemplateModes.propTypes = {
	focusReaderThemes: PropTypes.bool.isRequired,
};
