//export const Dialogue: React.FC<Props> = ({children, close, isVisible, title}: Props) => {
// import { useRef } from 'react'
import { ArrowPathIcon } from '@heroicons/react/24/outline';
import Communications from './Communications';
import { useState } from 'react';
interface RegisterArgs {
	setShowReg: Function;
	getPin: Function;
	registrationStep?: string;
	registrationEmail?: string;
	onRegistrationEmail: Function;
	registrationName?: string;
	onRegistrationName: Function;
	commAdministrative?: boolean;
	commNews?: boolean;
	commDeveloper?: boolean;
	onCommNews: Function;
	onCommAdministrative: Function;
	onCommDeveloper: Function;
}

export default function Register( {
	setShowReg,
	getPin,
	registrationStep,
	registrationEmail,
	onRegistrationEmail,
	registrationName,
	onRegistrationName,
	commAdministrative,
	commNews,
	commDeveloper,
	onCommAdministrative,
	onCommNews,
	onCommDeveloper,
}: RegisterArgs ) {
	const [ emailError, setEmailError ] = useState< boolean >( false );
	const [ nameError, setNameError ] = useState< boolean >( false );

	const handleRegisterClick = (
		e: React.MouseEvent< HTMLButtonElement >
	) => {
		e.preventDefault();
		setEmailError( false );
		setNameError( false );

		const nameRegex = /^[A-Za-zÀ-ÖØ-öø-ÿ0-9\s]+$/;
		if (
			undefined === registrationName ||
			! nameRegex.test( registrationName )
		) {
			setNameError( true );
			return;
		}

		const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
		if (
			undefined === registrationEmail ||
			! emailRegex.test( registrationEmail )
		) {
			setEmailError( true );
			return;
		}

		getPin();
	};

	return (
		<form action="#" className="space-y-6">
			<div>
				<label
					htmlFor="email"
					className="block text-sm/6 font-medium text-white"
				>
					Name
				</label>
				<div className="mt-2 relative">
					<input
						// ref={nameRef}
						disabled={ 'register' !== registrationStep }
						id="name"
						name="name"
						// autoFocus={ true } accessability?
						defaultValue={ registrationName }
						onChange={ ( e ) =>
							onRegistrationName( e.target.value )
						}
						onBlur={ ( e ) => onRegistrationName( e.target.value ) }
						required
						autoComplete="email"
						className="block w-full rounded-md border-0 bg-white/5 p-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring--500 sm:text-sm/6"
					/>
					<div
						className={
							'absolute top-full mt-1 right-0 bg-red-500 text-white text-xs rounded-md px-2 py-1 shadow-lg transition-opacity duration-300 ' +
							( nameError ? 'opacity-100' : 'opacity-0' )
						}
					>
						Name must be alphanumeric and spaces only.
					</div>
				</div>
			</div>
			<div>
				<label
					htmlFor="email"
					className="block text-sm/6 font-medium text-white"
				>
					Email address
				</label>
				<div className="mt-2 relative">
					<input
						// ref={emailRef}
						id="email"
						name="email"
						type="email"
						disabled={ 'register' !== registrationStep }
						defaultValue={ registrationEmail }
						onChange={ ( e ) =>
							onRegistrationEmail( e.target.value )
						}
						onBlur={ ( e ) =>
							onRegistrationEmail( e.target.value )
						}
						required
						autoComplete="email"
						className="block w-full rounded-md border-0 bg-white/5 p-1.5 text-white shadow-sm ring-1 ring-inset ring-white/10 focus:ring-2 focus:ring-inset focus:ring--500 sm:text-sm/6"
					/>
					<div
						className={
							'absolute top-full mt-1 right-0 bg-red-500 text-white text-xs rounded-md px-2 py-1 shadow-lg transition-opacity duration-300 ' +
							( emailError ? 'opacity-100' : 'opacity-0' )
						}
					>
						Please enter a valid email address.
					</div>
				</div>
				<p className="mt-8 mb-3 text-pretty text-md text-zinc-100">
					We will send a &ldquo;pin&rdquo; to this email address which
					you will need on the next step to complete the registration
					process - this must be a valid email address to progress.
				</p>
			</div>
			<Communications
				registrationStep={ registrationStep }
				commAdministrative={ commAdministrative }
				commNews={ commNews }
				commDeveloper={ commDeveloper }
				onCommAdministrative={ ( opt: boolean ) => {
					onCommAdministrative( opt );
				} }
				onCommNews={ ( opt: boolean ) => {
					onCommNews( opt );
				} }
				onCommDeveloper={ ( opt: boolean ) => {
					onCommDeveloper( opt );
				} }
			/>

			<div className="grid grid-cols-2 gap-4">
				<button
					type="submit"
					disabled={ 'registering' === registrationStep }
					className={
						'inline-flex w-full justify-center rounded-md bg-sky-700 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm ' +
						( 'register' === registrationStep
							? 'hover:bg-sky-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-700'
							: 'opacity-80' )
					}
					onClick={ () => setShowReg( false ) }
				>
					Back
				</button>
				{ 'registering' === registrationStep && (
					<div 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 ">
						Registering{ ' ' }
						<ArrowPathIcon className="w-4 h-4 ml-4 animate-spin inline" />
					</div>
				) }
				{ 'register' === registrationStep && (
					<button
						type="submit"
						className="inline-flex w-full justify-center rounded-md bg-sky-500 px-3 py-1.5 text-sm/6 font-semibold text-white shadow-sm hover:bg-sky-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-sky-500"
						onClick={ handleRegisterClick }
					>
						Register
					</button>
				) }
				<div>
					{ /* <button
								type="button"
								// onClick={() => onClose()}
								className="inline-flex w-full justify-center rounded-md bg-sky-700 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"
							>
								Cancel
							</button> */ }
				</div>
			</div>
		</form>
	);
}