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

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

export default function Step1() {
	const [ state, setState ] = useState( false );
	const { setStep, toggleMetabox } = useContext( OneClickContext );
	const { step1 } = advancedAds.oneclick;

	const onCancel = () => {
		setState( false );
		toggleMetabox( false );
		setStep( 1 );
	};

	const onAgree = () => {
		setStep( 2 );
	};

	return (
		<div className="mt-6 mb-8">
			<p dangerouslySetInnerHTML={ { __html: step1.content } }></p>
			<p>
				<label htmlFor="consent">
					<input
						type="checkbox"
						id="consent"
						onClick={ () => setState( ! state ) }
					/>
					<span>{ step1.agreeText }</span>
				</label>
			</p>
			<p className="buttons-set">
				<button
					className="button button-primary"
					disabled={ ! state }
					onClick={ onAgree }
				>
					{ step1.btnAgree }
				</button>
				<button className="button" onClick={ onCancel }>
					{ advancedAds.oneclick.btnCancel }
				</button>
			</p>
		</div>
	);
}