/**
 * WordPress Dependencies
 */
import { decodeEntities } from '@wordpress/html-entities';
import { useContext, useState } from '@wordpress/element';

/**
 * Internal Dependencies
 */
import Modal from './Modal';
import Settings from './Settings';
import { OneClickContext } from './store/context';

export default function Step3() {
	const { step3 } = advancedAds.oneclick;
	const [ open, toggleModal ] = useState( false );
	const { selectedMethod, selectedPage } = useContext( OneClickContext );

	const onClose = () => toggleModal( false );

	return (
		<>
			<div className="mt-6 mb-8">
				<p>
					{ String.format(
						decodeEntities( step3.yourDomain ),
						advancedAds.oneclick.options.connectedDomain
					) }
				</p>
				{ 'final' === selectedMethod && (
					<p
						dangerouslySetInnerHTML={ {
							__html: step3.finalContent,
						} }
					></p>
				) }
			</div>
			{ 'page' === selectedMethod && (
				<div className="mt-6 mb-8">
					<div className="subheader inline">{ step3.title }</div>
					{ ! selectedPage ? (
						<div
							className="mt-6"
							dangerouslySetInnerHTML={ {
								__html: step3.importContent,
							} }
						></div>
					) : (
						<p
							dangerouslySetInnerHTML={ {
								__html: step3.previewContent,
							} }
						></p>
					) }
					<p className="buttons-set">
						<button
							className="button button-primary"
							onClick={ () => toggleModal( true ) }
						>
							{ step3.btnImport }
						</button>
						{ selectedPage > 0 && (
							<a
								href={ `${ advancedAds.siteInfo.homeUrl }/?p=${ selectedPage }` }
								target="_blank"
								className="button button-secondary !flex items-center gap-x-1"
								rel="noreferrer"
							>
								<span>
									{ advancedAds.oneclick.modal.btnGoto }
								</span>
								<span className="dashicons dashicons-external"></span>
							</a>
						) }
					</p>
				</div>
			) }

			<Modal open={ open } onClose={ onClose } />

			<Settings />
		</>
	);
}