//export const Dialogue: React.FC<Props> = ({children, close, isVisible, title}: Props) => {
// import { useRef } from 'react'
import CheckOption from '../CheckOption';
import { Transition } from '@headlessui/react';
import { useState, useEffect } from 'react';
import { WpInlineScript } from '../../interfaces';
import queryString from 'query-string';
import User from '../panel/User';
import { CheckBadgeIcon } from '@heroicons/react/24/solid';
import { ArrowPathIcon } from '@heroicons/react/24/outline';

interface OptionsArgs {
	registrationEmail?: string;
	registrationName?: string;
	testMode?: boolean;
	onStep: Function;
	logged: boolean;
}

declare const webEngineCaptcha: WpInlineScript;

export default function Options( {
	registrationEmail,
	registrationName,
	testMode,
	onStep,
	logged,
}: OptionsArgs ) {
	const [ loaded, setLoaded ] = useState( false );

	const [ forms, setProtectForms ] = useState( true );
	const [ login, setProtectLogin ] = useState( true );
	const [ comments, setProtectComments ] = useState( true );
	const [ roles, setRoles ] = useState( [] );
	const [ exempt, setExempt ] = useState( [] );
	const [ roleLoading, setRoleloading ] = useState( false );
	const [ users, setUsers ] = useState( [] );
	const [ exemptUsers, setExemptUsers ] = useState( [] );
	const [ selectedUser, setSelectedUser ] = useState( '' );
	const [ modes, setModes ] = useState< string[] >( [] );
	const avaliableModes: string[] = [ 'puzzle', 'email' ];

	const [ wcCheckout, setWcCheckout ] = useState( true );
	const [ lostPassword, setLostPassword ] = useState( false );

	function updateOption( option: string, value: any, callback: Function ) {
		if ( option === 'we360cloud_sentry_exempt' ) {
			setRoleloading( true );
		}
		if ( ! loaded ) {
			return;
		}

		const data = {
			action: 'we360cloud_sentry',
			token: webEngineCaptcha.token,
			we360cloud_sentry_route: 'update_option',
			option,
			value,
		};
		fetch( webEngineCaptcha.url, {
			method: 'POST',
			headers: {
				'content-type': 'application/x-www-form-urlencoded',
				//'token': localize.token
			},
			// headers: { 'Content-Type': 'application/json' },
			body: queryString.stringify( data ),
		} )
			.then( ( response ) => response.json() )
			.then( ( json ) => {
				if ( 'applied' in json ) {
					callback( json.applied );
				}
				if ( option === 'we360cloud_sentry_exempt' ) {
					setRoleloading( false );
				}
			} );
	}

	function updateProtectForms( opt: boolean ) {
		updateOption( 'we360cloud_sentry_protectforms', opt, setProtectForms );
	}
	function updateProtectLogin( opt: boolean ) {
		updateOption( 'we360cloud_sentry_protectlogin', opt, setProtectLogin );
	}
	function updateWcCheckout( opt: boolean ) {
		updateOption( 'we360cloud_sentry_wccheckout', opt, setWcCheckout );
	}
	function updateLostPassword( opt: boolean ) {
		updateOption( 'we360cloud_sentry_lostpassword', opt, setLostPassword );
	}
	function updateProtectComments( opt: boolean ) {
		updateOption(
			'we360cloud_sentry_protectcomments',
			opt,
			setProtectComments
		);
	}
	function updateExempt( role: string ) {
		if ( ! roleLoading ) {
			updateOption( 'we360cloud_sentry_exempt', role, setExempt );
		}
	}
	function updateMode( mode: string ) {
		updateOption( 'we360cloud_sentry_modes', mode, setModes );
	}
	function updateExemptUser( user: string ) {
		if ( user !== '' ) {
			updateOption(
				'we360cloud_sentry_exempt_user',
				user,
				setExemptUsers
			);
		}
	}

	const init = () => {
		setLoaded( false );

		const data = {
			action: 'we360cloud_sentry',
			token: webEngineCaptcha.token,
			we360cloud_sentry_route: 'options',
		};
		fetch( webEngineCaptcha.url, {
			method: 'POST',
			headers: {
				'content-type': 'application/x-www-form-urlencoded',
			},
			body: queryString.stringify( data ),
		} )
			.then( ( response ) => response.json() )
			.then( ( json ) => {
				// const timeout = setTimeout(() => {
				if ( false === json || undefined === json.payload ) {
					// undefined ?
				} else {
					setProtectForms(
						json.payload.we360cloud_sentry_protectforms
					);
					setProtectLogin(
						json.payload.we360cloud_sentry_protectlogin
					);
					setProtectComments(
						json.payload.we360cloud_sentry_protectcomments
					);
					setRoles( json.payload.wp_roles );
					setExempt( json.payload.wp_roles_exempt );
					setUsers( json.payload.wp_users );
					setExemptUsers(
						json.payload.we360cloud_sentry_exempt_user
					);
					setWcCheckout( json.payload.we360cloud_sentry_wccheckout );
					setLostPassword(
						json.payload.we360cloud_sentry_lostpassword
					);
					setModes( json.payload.we360cloud_sentry_modes );
				}
				setLoaded( true );
			} );
	};
	useEffect( () => {
		// Anything in here is fired on component mount.
		init();
		return () => {
			// Anything in here is fired on component unmount.
		};
	}, [] );

	return (
		<div className="text-white text-left">
			<div className="grid grid-cols-3 gap-4 mb-4 relative max-w-[512px]">
				{ /* TODO - add confirm step here - */ }
				<button
					type="button"
					disabled={ true }
					className="inline-flex w-full mt-4 justify-center rounded-md bg-gradient-to-t from-black/10 to-transparent px-3 py-2 text-sm font-semibold [text-shadow:_0_1px_10px_rgb(0_0_0_/_50%)]"
				>
					Configure
				</button>
				<button
					type="button"
					className="inline-flex w-full mt-4 justify-center rounded-md bg-cyan-500 px-3 py-2 text-sm font-semibold text-white shadow-lg hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-500"
					onClick={ () => onStep( 'documentation' ) }
				>
					Documentation
				</button>
				{ ! testMode && (
					<button
						type="button"
						onClick={ () => onStep( 'manage' ) }
						className={
							'inline-flex w-full mt-4 justify-center rounded-md bg-cyan-500 px-3 py-2 text-sm font-semibold text-white shadow-lg hover:bg-cyan-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-cyan-500 '
						}
					>
						Manage account
					</button>
				) }
			</div>
			<User
				registrationName={ registrationName }
				registrationEmail={ registrationEmail }
				testMode={ testMode }
				logged={ logged }
			/>
			<Transition
				as="div"
				appear={ true }
				show={ true }
				enter="transform transition duration-300 ease-out"
				enterFrom="opacity-0"
				enterTo="opacity-100"
				leave="transform transition duration-300 transition ease-in"
				leaveFrom="opacity-100"
				leaveTo="opacity-0"
			>
				<div className="grid grid-cols-2 gap-4 mt-4">
					<fieldset className="max-w-sm">
						{ loaded && (
							<div className="space-y-5">
								<div>
									<p className="text-lg font-bold">
										Verification methods
									</p>
									<div
										className={
											'bg-black/20 px-1 py-1 my-1 text-sm rounded-md flex flex-wrap transition-opacity'
										}
									>
										{ modes.includes( 'free' ) ? (
											<div className="m-1">
												<p>
													Add credits to access{ ' ' }
													<b>puzzle</b> and{ ' ' }
													<b>email</b> verification
													methods.
													<br />
													<a
														className="text-sky-200 hover:text-sky-300 underline"
														href="https://docs.we360.cloud/sentry/verification_methods"
													>
														Learn more
													</a>
												</p>
											</div>
										) : (
											<div className="my-1">
												{ avaliableModes.map(
													( mode ) => (
														<button
															key={ mode }
															onClick={ () =>
																updateMode(
																	mode
																)
															}
															className={
																'transition-colors px-1 m-1 rounded-md ' +
																( modes.includes(
																	mode
																)
																	? 'bg-sky-200/40'
																	: 'bg-sky-200/10' )
															}
														>
															{ mode
																.charAt( 0 )
																.toUpperCase() +
																mode.slice(
																	1
																) }{ ' ' }
															{ modes.includes(
																mode
															) && (
																<CheckBadgeIcon
																	className={
																		'w-4 h-4 inline -translate-y-px'
																	}
																/>
															) }
														</button>
													)
												) }
											</div>
										) }
									</div>
								</div>

								<CheckOption
									checked={ forms }
									onChange={ updateProtectForms }
									name="forms"
									title="Protect forms"
									description="Supported forms will be protected by this plugin, please check the documentation for a detailed breakdown of supported form types"
								/>
								{  }
								<CheckOption
									checked={ comments }
									onChange={ updateProtectComments }
									name="comments"
									title="Protect comments"
								/>
								<CheckOption
									checked={ login }
									onChange={ updateProtectLogin }
									name="admin"
									title="Protect login"
								/>
								<CheckOption
									checked={ lostPassword }
									onChange={ updateLostPassword }
									name="lostpassword"
									title="Protect forgot password"
								/>
								{ wcCheckout !== undefined && (
									<CheckOption
										checked={ wcCheckout }
										onChange={ updateWcCheckout }
										name="wecheckout"
										title="Protect WooCommerce checkout"
									/>
								) }
							</div>
						) }
						{ ! loaded && (
							<div className="space-y-5 opacity-80">
								<div>
									<p className="text-lg font-bold">
										Verification methods
									</p>
									<div
										className={
											'bg-black/20 px-1 py-1 my-1 text-sm rounded-md flex flex-wrap transition-opacity'
										}
									>
										<div className="m-2">
											<p>-</p>
										</div>
									</div>
								</div>

								<CheckOption
									checked={ forms }
									loading={ true }
									onChange={ () => null }
									name="forms"
									title="Protect forms"
									description="Supported forms will be protected by this plugin, please check the documentation for a detailed breakdown of supported form types"
								/>
								<CheckOption
									checked={ comments }
									loading={ true }
									onChange={ () => null }
									name="comments"
									title="Protect comments"
								/>
								<CheckOption
									checked={ login }
									loading={ true }
									onChange={ () => null }
									name="admin"
									title="Protect login"
								/>
								<CheckOption
									checked={ lostPassword }
									loading={ true }
									onChange={ () => null }
									name="lostpassword"
									title="Protect forgot password"
								/>
							</div>
						) }
						{ testMode && (
							<p className="mt-4">
								<hr className="mb-4 opacity-50" />
								Test mode allows you to observe how the plugin
								functions in a test environment.
							</p>
						) }
					</fieldset>

					<div>
						<p className="text-lg font-bold">Secure roles</p>
						<p>
							Some roles require user validation to setup an
							account - those checked won’t be given challenges
							when logged in. Toggle this option for each role
							below.
						</p>
						<div
							className={
								'bg-black/20 my-2 px-1 py-1 text-sm rounded-md flex flex-wrap transition-opacity' +
								( roleLoading && 'opacity-50' )
							}
						>
							{ /* <button className='bg-sky-200/40 px-2 m-1 rounded-md'>Admin <CheckBadgeIcon className='w-4 h-4 inline -translate-y-px'/></button> */ }
							{ roles && roles.length > 0 ? (
								<div>
									{ exempt &&
										exempt.map( ( role: string ) => (
											<button
												key={ role }
												onClick={ () =>
													updateExempt( role )
												}
												className="bg-sky-200/40 px-1 m-1 rounded-md animate-fade"
											>
												{ role }{ ' ' }
												<CheckBadgeIcon className="w-4 h-4 inline -translate-y-px" />
											</button>
										) ) }

									{ roles.map(
										( role ) =>
											( exempt
												? ! exempt.includes( role )
												: true ) && (
												<button
													key={ role }
													onClick={ () =>
														updateExempt( role )
													}
													className="bg-sky-200/10 px-1 m-1 rounded-md animate-fade hover:bg-sky-200/50"
												>
													{ role }
												</button>
											)
									) }
								</div>
							) : (
								<div className="flex justify-center w-full opacity-50 p-2">
									<ArrowPathIcon className="w-8 h-8 animate-spin" />
								</div>
							) }
						</div>
						<div className="p-2 bg-black/10 rounded-md">
							<p className="text-lg font-bold">Secure users</p>
							<p>These users will bypass the checks on login.</p>
							{ users && users.length > 0 ? (
								<div className="bg-black/20 py-2 px-2 my-2 rounded-md">
									<div
										className={
											'bg-black/20 mb-2 px-1 text-sm rounded-md flex flex-wrap transition-opacity' +
											( loaded && 'opacity-50' )
										}
									>
										{ exemptUsers &&
										exemptUsers.length > 0 ? (
											<div className="my-1">
												{ exemptUsers.map( ( user ) => (
													<button
														key={ user }
														onClick={ () =>
															updateExemptUser(
																user
															)
														}
														className="bg-sky-200/40 px-1 m-1 rounded-md animate-fade"
													>
														{ user }{ ' ' }
														<CheckBadgeIcon className="w-4 h-4 inline -translate-y-px" />
													</button>
												) ) }
											</div>
										) : (
											<p className="p-1 my-1 italic text-gray-300">
												No users are exempt
											</p>
										) }
									</div>
									<div className="grid grid-cols-2 w-full">
										<select
											onChange={ ( e ) =>
												setSelectedUser(
													e.target.value
												)
											}
											defaultValue={ selectedUser }
											value={ selectedUser }
											className="col-start-1 w-full row-start-1 appearance-none w-full border-y border-l bg-black/10 border-black/10 focus:ring-none rounded-l-md px-2 text-white sm:text-sm/6"
										>
											<option value="" disabled selected>
												Select a user
											</option>
											{ users.map( ( user ) => (
												<option key={ user }>
													{ user }
												</option>
											) ) }
											;
										</select>
										{ exemptUsers &&
										exemptUsers.includes(
											selectedUser as never
										) ? (
											<button
												onClick={ () =>
													updateExemptUser(
														selectedUser
													)
												}
												className="inline w-fit rounded-r-md text-xs focus:ring-none px-2 border-y border-r border-black/10 bg-red-500/40 hover:bg-red-500/60"
											>
												Remove
											</button>
										) : (
											<button
												onClick={ () =>
													updateExemptUser(
														selectedUser
													)
												}
												className="inline w-fit rounded-r-md text-xs focus:ring-none border-y border-r border-black/10 px-2 bg-sky-500/40 hover:bg-sky-500/60"
											>
												Add
											</button>
										) }
									</div>
								</div>
							) : (
								<div className="flex justify-center w-full bg-black/10 py-2 px-2 mt-2 rounded-md">
									{ users }
									<ArrowPathIcon className="w-8 h-8 animate-spin" />
								</div>
							) }
							<p>
								Please make sure the user-name is not easily
								guessed and that your password is sufficiently
								secure; this account will otherwise be
								unprotected by Sentry.{ ' ' }
							</p>
							<p className="mt-2">
								This option is provided to facilitate the
								situation where some accounts are used via
								wp-cli or similar third-party integration.
							</p>
						</div>
					</div>
				</div>
			</Transition>
		</div>
	);
}