//export const Dialogue: React.FC<Props> = ({children, close, isVisible, title}: Props) => {
// import { useRef } from 'react'
import { ArrowPathIcon, InboxArrowDownIcon } from '@heroicons/react/24/outline';

interface PinCheckArgs {
	pin?: String;
	registrationStep?: string;
	registrationEmail?: string;
	registrationName?: string;
	onPin: Function;
	onStep: Function;
}

export default function PinCheck( {
	pin,
	registrationStep,
	registrationEmail,
	onPin,
	onStep,
}: PinCheckArgs ) {
	return (
		<form action="#" method="POST" className="space-y-6">
			<span className="isolate inline-flex rounded-md shadow-sm">
				<div className="relative inline-flex items-center gap-x-1.5 rounded-l-md bg-black/20 px-3 py-2 text-sm font-semibold text-zinc-100 ring-1 ring-inset ring-zinc-300/10">
					<InboxArrowDownIcon
						aria-hidden="true"
						className="-ml-0.5 size-5 text-white"
					/>
					To
				</div>
				<div className="relative -ml-px inline-flex items-center rounded-r-md bg-black/40 px-3 py-2 text-sm font-semibold text-white ring-1 ring-inset ring-zinc-300/10">
					{ registrationEmail }
				</div>
			</span>

			<>
				<p className="mt-2">
					<label
						htmlFor="pin"
						className="mt-6 mb-1 text-pretty text-lg/8 text-zinc-100"
					>
						An email has been sent from{ ' ' }
						<b className="text-nowrap font-black">
							Web-Engine cloud
						</b>{ ' ' }
						containing a pin, please enter below to continue -
					</label>
				</p>
				<div className="mt-2 inline-flex items-center">
					{ registrationStep !== 'bad pin' &&
						registrationStep !== 'error pin' && (
							<input
								// autoFocus={ true } usability issue
								disabled={ registrationStep === 'pin check' }
								name="pin"
								type="text"
								onChange={ ( e ) => onPin( e.target.value ) }
								onBlur={ ( e ) => onPin( e.target.value ) }
								size={ 6 }
								maxLength={ 6 }
								required
								className="text-center block w-[12rem] font-black rounded-md border-0 p-5 text-white shadow-sm ring-inset focus:ring-4 sm:text-3xl  bg-sky-950 ring-white ring-2"
							/>
						) }
					{ ( registrationStep === 'bad pin' ||
						registrationStep === 'error pin' ) && (
						<>
							<input
								name="pin"
								type="text"
								defaultValue=""
								// disabled
								onFocus={ ( e ) => onPin( e.target.value ) }
								onChange={ ( e ) => onPin( e.target.value ) }
								// onBlur={(e) => onStep('pin')}
								size={ 6 }
								maxLength={ 6 }
								required
								className="text-center block w-[12rem] font-black rounded-md border-0 p-5 text-white shadow-sm ring-inset focus:ring-4 sm:text-3xl  bg-sky-950/50 ring-white ring-2"
							/>
							{ registrationStep === 'bad pin' && (
								<p className="ml-2 inline text-pretty text-lg/8 text-zinc-100 font-black">
									{ ' ' }
									that didn&apos;t work, please try again
								</p>
							) }
							{ registrationStep === 'error pin' && (
								<p className="ml-2 inline text-pretty text-lg/8 text-zinc-100 font-black">
									{ ' ' }
									unable to connect to verify pin, please try
									later
								</p>
							) }
						</>
					) }
				</div>

				<p className="text-white">
					Please check Junk / Spam folders and the addressed used, the
					email should arrive within a few minuites and will expire
					after a short while. You can always refresh and try again if
					your having trouble.
				</p>
			</>

			<div className="grid grid-cols-3 gap-2">
				{ registrationStep === 'pin check' && (
					<>
						<button
							type="button"
							disabled={ true }
							onClick={ () => onStep( 'register' ) }
							className="inline-flex w-full justify-center rounded-md bg-sky-900/50 px-3 py-2 text-sm font-semibold text-white/50 shadow-sm  focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2"
						>
							Back
						</button>
						<div className="col-span-2">
							<button
								disabled={ true }
								className="inline-flex w-full justify-center items-center rounded-md bg-sky-300 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm "
							>
								Verifying{ ' ' }
								<ArrowPathIcon className="w-4 h-4 ml-4 animate-spin inline" />
							</button>
						</div>
					</>
				) }
				{ registrationStep !== 'pin check' && (
					<>
						<button
							type="button"
							onClick={ () => onStep( 'register' ) }
							className="inline-flex w-full justify-center rounded-md bg-sky-900 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-800"
						>
							Back
						</button>
						<div className="col-span-2">
							<button
								disabled={
									pin && pin.length === 6 ? false : true
								}
								className={
									'inline-flex w-full justify-center rounded-md px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500' +
									( pin && pin.length === 6
										? ' bg-sky-500 hover:bg-sky-400'
										: ' bg-sky-900' )
								}
								onClick={ () =>
									pin && pin.length === 6
										? onStep( 'pin check' )
										: onStep( 'bad pin' )
								}
							>
								Verify
							</button>
						</div>
					</>
				) }
			</div>
		</form>
	);
}