import { Transition } from '@headlessui/react';
import User from '../panel/User';
import { Wordmark } from '../Wordmark';
import Features from './Features';
import { WebUiLogo } from '../WebUiLogo';
import { WpInlineScript } from '../../interfaces';
import queryString from 'query-string';
import { useState, useEffect, useCallback } from 'react';
import { CheckIcon } from '@heroicons/react/24/solid';
interface DocumentationArgs {
	registrationEmail?: string;
	registrationName?: string;
	testMode?: boolean;
	onStep: Function;
	logged: boolean;
}
interface wpPlugin {
	name: string;
	notes: string;
	version: string;
}
declare const webEngineCaptcha: WpInlineScript;
// TODO
// Link to page on our site for requesitng plugin support
// We need a list of plugins installed to make this documentation context relavent
export default function Documentation( {
	registrationEmail,
	registrationName,
	testMode,
	onStep,
	logged,
}: DocumentationArgs ) {
	// const [ showAdminWarn, setShowAdminWarn]  = useState( protectlogin && blockexpire );
	const [ loaded, setLoaded ] = useState( false );
	const [ plugins, setPlugins ] = useState( [] );
	const [ installed, setInstalled ] = useState( [ '' ] );
	const [ selected, setSelected ] = useState( '' );

	const init = useCallback( () => {
		if ( false === loaded ) {
			const data = {
				action: 'we360cloud_sentry',
				token: webEngineCaptcha.token,
				we360cloud_sentry_route: 'plugins',
			};
			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 === json.payload.we360cloud_sentry_plugins
					) {
						// undefined ?
					} else {
						setPlugins( json.payload.we360cloud_sentry_plugins );
						setInstalled(
							json.payload.we360cloud_sentry_installed
						);
						if ( json.payload.we360cloud_sentry_installed ) {
							setSelected(
								json.payload.we360cloud_sentry_installed[ 0 ]
							);
						}
					}
					setLoaded( true );
				} );
		}
	}, [ loaded ] );
	useEffect( () => {
		// Anything in here is fired on component mount.
		init();
		return () => {
			// Anything in here is fired on component unmount.
		};
	}, [ init ] );

	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-5xl 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"></div>

				<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"
							onClick={ () => onStep( 'authenticated' ) }
							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"
						>
							Configure
						</button>
						<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%)]"
						>
							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"
					>
						<Features />
						<div className="space-y-4 mt-8 max-w-screen-sm">
							<p className="font-black text-lg">
								Supported forms plugins
							</p>
							<p>
								Plugins are listed alphabetically; support for a
								plugin doesn’t imply endorsement of its
								functionality. We recommend choosing a form
								plugin that best suits your needs.
							</p>
							<p>
								<b>Captchas are enabled</b> and will appear for
								all forms. The following supported plugins
								appear to be installed. Plugin-specific notes
								are listed below each one.
							</p>
							{ loaded && selected === '' ? (
								<div>
									<p className="font-bold text-lg border-b border-white/20 pb-4">
										It looks like you don&apos;t have any of
										the supported form plugins installed or
										activated. See the list of supported
										plugins below. Contact us if you&apos;d
										like support for another form plugin.
									</p>
								</div>
							) : (
								<div>
									<div className="flex gap-4 border-b border-white/20 pb-4">
										<ul>
											{ plugins.map(
												( plugin: wpPlugin ) =>
													installed.includes(
														plugin.name
													) && (
														<li
															key={ plugin.name }
															className="py-2"
														>
															<p>
																<b>
																	{
																		plugin.name
																	}
																</b>
																<CheckIcon className="w-4 h-4 ml-2 align-top inline" />
																<br />
																{ plugin.notes }
															</p>
														</li>
													)
											) }
										</ul>
									</div>
								</div>
							) }
							<p>
								You can also toggle the protection of comments
								and logins. We recommend enabling these options,
								but you can choose to disable this protection if
								it doesn&rsquo;t suit your needs.
							</p>
							<p>Full list of officially supported plugins -</p>
							<ul>
								<ul className="list-disc ml-4">
									{ plugins.map( ( plugin: wpPlugin ) => (
										<li key={ plugin.name }>
											{ plugin.name +
												' ' +
												plugin.version }
										</li>
									) ) }
								</ul>
							</ul>
						</div>
					</Transition>
				</div>
			</div>
		</div>
	);
}