'use client';
import { useState } from 'react'; //, useEffect
import { WebUiLogo } from './WebUiLogo';
import { ArrowTopRightOnSquareIcon } from '@heroicons/react/20/solid';
// form steps
import Intro from './step/Intro';
import Register from './step/Register';
import PinCheck from './step/PinCheck';
import Options from './step/Options';
import Manage from './step/Manage';
import Documentation from './step/Documentation';
import Alert from './Alert';
import User from './panel/User';
import { Wordmark } from './Wordmark';
interface Notice {
	text?: string;
	title?: string;
	type?: string;
}
// define an interface for our registration so we can tightly bind the model
interface RegistrationArgs {
	registrationStep?: string;
	onStep: Function;
	registrationEmail?: string;
	onRegistrationEmail: Function;
	registrationName?: string;
	onRegistrationName: Function;
	commAdministrative?: boolean;
	commNews?: boolean;
	commDeveloper?: boolean;
	pin?: string;
	balance?: number;
	newUser?: boolean;
	testMode?: boolean;
	onCommNews: Function;
	onCommAdministrative: Function;
	onCommDeveloper: Function;
	onPin: Function;
	notice?: Notice;
	mailStep: number;
	logged: boolean;
	expires: number;
}

export default function Window( {
	registrationStep,
	onStep,
	registrationEmail,
	onRegistrationEmail,
	registrationName,
	onRegistrationName,
	commAdministrative,
	commNews,
	commDeveloper,
	onCommAdministrative,
	onCommNews,
	onCommDeveloper,
	onPin,
	pin,
	balance,
	newUser,
	notice,
	testMode,
	logged,
	expires,
}: RegistrationArgs ) {
	// const [ initted, setInitted ] = useState( false );
	// const dataProps = ! initted ? { 'data-closed': true } : {};
	// simply used to add an introduction page
	const [ showReg, setShowReg ] = useState( false );

	const getPin = () => {
		onStep( 'pin' );
	};

	const retryLoad = () => {
		onStep( 'reload' );
	};

	// useEffect( () => {
	// 	if ( ! initted ) {
	// 		setInitted( true );
	// 	}
	// 	return () => {
	// 		// Anything in here is fired on component unmount.
	// 	};
	// }, [] );
	return (
		<div
			// { ...dataProps }
			className="relative transform overflow-hidden rounded-lg dark:bg-zinc-950 bg-sky-800 px-4 pb-4 pt-5 text-left shadow-black/70 shadow-2xl transition-all data-[closed]:translate-y-4 data-[closed]:opacity-0 data-[enter]:duration-300 data-[leave]:duration-200 data-[enter]:ease-out data-[leave]:ease-in max-w-xl py-24 sm:px-6 sm:py-10 lg:px-8 data-[closed]:sm:translate-y-0 data-[closed]:sm:scale-95"
		>
			<WebUiLogo
				className="pointer-events-none absolute right-0 top-0 -z-9 h-[18rem] w-[18rem] -translate-y-[3.8rem] translate-x-[1rem]"
				isLoading={ false }
			/>
			<svg
				viewBox="0 0 1024 1024"
				aria-hidden="true"
				className="absolute left-0 top-0 -z-10 h-[80rem] w-[80rem] -translate-y-2/3 -translate-x-1/4 [mask-image:radial-gradient(closest-side,white,transparent)]"
			>
				<circle
					r={ 512 }
					cx={ 512 }
					cy={ 512 }
					fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
					fillOpacity="0.9"
				/>
				<defs>
					<radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
						<stop stopColor="#67e8f9" />
						<stop offset={ 1 } stopColor="#67e8f9" />
					</radialGradient>
				</defs>
			</svg>

			<div className="mt-3 sm:mt-5">
				<Wordmark />
				<div className="mt-12">
					{ undefined !== notice && notice.text && (
						<Alert
							text={ notice.text }
							title={ notice.title ? notice.title : '' }
							visible={ true }
							type={ notice.type ? notice.type : 'warning' }
						/>
					) }

					{ undefined === registrationStep ||
						( 'error' === registrationStep && (
							<>
								<p className="mt-6 mb-3 text-pretty text-lg/8 text-white">
									Unable to connect to cloud service,
									<br /> please{ ' ' }
									<button
										onClick={ () => retryLoad() }
										className="underline inline-block"
									>
										try again in a moment
									</button>
									.
								</p>
								<p className="mt-6 mb-3 text-pretty text-lg/8 text-white">
									If the problem persists the{ ' ' }
									<a
										href="https://www.web-engineer.co.uk/doc/sentry-wordpress"
										target="_blank"
										className="underline"
										rel="noreferrer"
									>
										support page
									</a>{ ' ' }
									provides information, frequently asked
									questions and access to raise a request.
								</p>
							</>
						) ) }
					{ 'init' === registrationStep && (
						<p className="mt-6 mb-3 text-pretty text-lg/8 text-zinc-100">
							Loading.
						</p>
					) }
					{ 'register' === registrationStep && (
						<>
							{ /* ok - chance here to introduce then register
							and will not use your data or train AI models.
							*/ }
							{ ! showReg && (
								<Intro onSetShowReg={ setShowReg } />
							) }
							{ showReg && (
								<p className="mt-6 mb-3 text-pretty text-lg text-zinc-100">
									This plugin uses the{ ' ' }
									<b className="text-nowrap font-black">
										Web-Engine cloud
									</b>{ ' ' }
									to generate secure challenges, registration
									is required to use this service
								</p>
							) }
						</>
					) }
					{ 'activate' === registrationStep && (
						<>
							{ /* web-engine cloud is connected but sentry
								tokens havent been setup for this domain
								i.e. Capthcha::OPTION_DOMAIN does not exist!!
							*/ }

							<p className="mt-6 mb-3 text-pretty text-lg text-zinc-100">
								The Web-Engine cloud service is connected,
								however sentry isn&rsquo;t enabled.
							</p>
							<button
								type="button"
								onClick={ () => onStep( 'sentry-setup' ) }
								className="inline-flex w-full mt-4 justify-center rounded-md bg-sky-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
							>
								<p>
									Enable <b className="font-black">Sentry</b>
								</p>
							</button>
							<button
								type="button"
								onClick={ () => onStep( 'force-disconnect' ) }
								className="inline-flex w-full mt-4 justify-center rounded-md bg-pink-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-600"
							>
								<p>
									Disconnect from all{ ' ' }
									<b className="font-black">
										Web-Engine cloud
									</b>{ ' ' }
									services
								</p>
							</button>
						</>
					) }
					{ 'pin' === registrationStep && (
						<p className="mt-6 text-pretty text-lg/8 text-zinc-300">
							Check your email to verify your account to validate
							your account
						</p>
					) }
					{ 'verified' === registrationStep && (
						<p className="mt-6 text-pretty text-lg/8 text-zinc-300">
							Account registered
						</p>
					) }
				</div>
			</div>
			{ 'manage' === registrationStep && (
				<Manage
					registrationEmail={ registrationEmail }
					registrationName={ registrationName }
					commAdministrative={ commAdministrative }
					commNews={ commNews }
					commDeveloper={ commDeveloper }
					testMode={ testMode }
					onCommAdministrative={ ( opt: boolean ) => {
						onCommAdministrative( opt, true );
					} }
					onCommNews={ ( opt: boolean ) => {
						onCommNews( opt, true );
					} }
					onCommDeveloper={ ( opt: boolean ) => {
						onCommDeveloper( opt, true );
					} }
					onStep={ ( step: string ) => {
						onStep( step );
					} }
					logged={ logged }
					expires={ expires }
				/>
			) }
			{ ( 'register' === registrationStep ||
				'registering' === registrationStep ) &&
				showReg && (
					<Register
						setShowReg={ setShowReg }
						getPin={ getPin }
						registrationStep={ registrationStep }
						registrationEmail={ registrationEmail }
						registrationName={ registrationName }
						commAdministrative={ commAdministrative }
						commNews={ commNews }
						commDeveloper={ commDeveloper }
						onRegistrationEmail={ ( email: string ) => {
							onRegistrationEmail( email );
						} }
						onRegistrationName={ ( name: string ) => {
							onRegistrationName( name );
						} }
						onCommAdministrative={ ( opt: boolean ) => {
							onCommAdministrative( opt );
						} }
						onCommNews={ ( opt: boolean ) => {
							onCommNews( opt );
						} }
						onCommDeveloper={ ( opt: boolean ) => {
							onCommDeveloper( opt );
						} }
					/>
				) }
			{ ( registrationStep === 'pin sent' ||
				registrationStep === 'bad pin' ||
				registrationStep === 'error pin' ||
				registrationStep === 'pin check' ) && (
				<PinCheck
					registrationStep={ registrationStep }
					registrationEmail={ registrationEmail }
					// registrationName={ registrationName }
					pin={ pin }
					onPin={ ( val: string ) => {
						onPin( val );
					} }
					onStep={ ( step: string ) => {
						onStep( step );
					} }
				/>
			) }
			{ registrationStep === 'documentation' && (
				// these options could be handled within the component - may not need to be in App/Window at all!
				<Documentation
					registrationEmail={ registrationEmail }
					registrationName={ registrationName }
					testMode={ testMode }
					onStep={ ( step: string ) => {
						onStep( step );
					} }
					logged={ logged }
				/>
			) }
			{ registrationStep === 'authenticated' && (
				// these options could be handled within the component - may not need to be in App/Window at all!
				<Options
					registrationEmail={ registrationEmail }
					registrationName={ registrationName }
					testMode={ testMode }
					onStep={ ( step: string ) => {
						onStep( step );
					} }
					logged={ logged }
				/>
			) }
			{ registrationStep === 'welcome' && (
				<div className="text-white">
					<User
						registrationName={ registrationName }
						registrationEmail={ registrationEmail }
						testMode={ testMode }
						logged={ logged }
					/>
					<div>
						<p className="mt-6 text-pretty text-xl text-white">
							<>
								<p className="mb-2">
									Welcome to the Web-Engine cloud captcha
									service, your site is now connected.
								</p>
								{ newUser === true ? (
									<p className="mb-2">
										To use the optional{ ' ' }
										<b className="font-black">
											premium services
										</b>{ ' ' }
										you will need to complete setting up
										your account and login to the our cloud
										services, an email has been sent with
										instructions.
									</p>
								) : (
									<>
										{ Number( balance ) > 0 && (
											<span>
												{ ' ' }
												Your existing balance is{ ' ' }
												<b className="font-black">
													{ undefined === balance
														? '-'
														: Number(
																balance
														  ).toLocaleString() }
												</b>{ ' ' }
												credits
											</span>
										) }
									</>
								) }
							</>
						</p>
						<button
							type="button"
							onClick={ () => onStep( 'manage' ) }
							className="w-full mt-4 justify-center rounded-md bg-sky-900 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700"
						>
							Get started
						</button>
					</div>
					{ /* ) } */ }
				</div>
			) }
			{ ( registrationStep === 'unregister' ||
				registrationStep === 'force-disconnect' ) && (
				<div className="text-white">
					<User
						registrationName={ registrationName }
						registrationEmail={ registrationEmail }
						testMode={ testMode }
						logged={ logged }
					/>
					{ registrationStep === 'unregister' && (
						<p className="mt-6 text-pretty text-lg/8 text-white">
							<b>Are you sure?</b>
							<br />
							This action will disconnect this site from the{ ' ' }
							<b>Sentry</b> service, this site will no longer be
							protected
						</p>
					) }
					{ registrationStep === 'force-disconnect' && (
						<p className="mt-6 text-pretty text-lg/8 text-white">
							<b>Are you sure?</b>
							<br />
							This action will disconnect this site entirely from{ ' ' }
							<b className="text-nowrap">Web-Engine Cloud</b>.
						</p>
					) }
					<div className="grid grid-cols-2 gap-4">
						<button
							type="button"
							onClick={ () =>
								onStep(
									registrationStep === 'unregister'
										? 'unregister-confirmed'
										: 'force-disconnect-confirmed'
								)
							}
							className="inline-flex w-full mt-4 justify-center rounded-md bg-pink-700 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-pink-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-pink-600"
						>
							Yes
						</button>
						<button
							type="button"
							onClick={ () => onStep( 'manage' ) }
							className="inline-flex w-full mt-4 justify-center rounded-md bg-sky-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-sky-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-600"
						>
							No
						</button>
					</div>
				</div>
			) }
			<p className="text-center text-sm mt-8">
				<a
					href="https://www.web-engineer.co.uk/terms-conditions/privacy-policy"
					target="_blank"
					className="font-semibold text-white/80 hover:text-sky-300 mx-4"
					rel="noreferrer"
				>
					Privacy policy{ ' ' }
					<ArrowTopRightOnSquareIcon className="inline-flex h-4 w-4" />
				</a>
				<a
					rel="noopener noreferrer"
					target="_blank"
					href="https://www.we360.cloud"
					className="font-semibold text-white/80 hover:text-sky-300 mx-4"
				>
					Web-Engine cloud{ ' ' }
					<ArrowTopRightOnSquareIcon className="inline-flex h-4 w-4" />
				</a>
			</p>
		</div>
	);
}