import * as React from 'react';
import {Layouts} from '@tesseract-design/viewfinder-react';
import * as WebNavigationReact from '@tesseract-design/web-navigation-react';
import * as WebFreeformReact from '@tesseract-design/web-freeform-react';
import * as WebFormattedReact from '@tesseract-design/web-formatted-react';
import * as WebActionReact from '@tesseract-design/web-action-react';

export interface ContactCtaBannerProps {
	onSubmit?: React.FormEventHandler<HTMLFormElement>;
}

export const ContactCtaBanner: React.FC<ContactCtaBannerProps> = ({
	onSubmit,
}) => {
	const [visible, setVisible] = React.useState<boolean>();
	const autofocusRef = React.useRef<HTMLInputElement>(null);
	const messageRef = React.useRef<HTMLTextAreaElement>(null);

	const openContactForm: React.MouseEventHandler<HTMLAnchorElement> = (e) => {
		e.preventDefault();
		setVisible(true);
		window.setTimeout(() => {
			autofocusRef.current?.focus();
			if (messageRef.current && messageRef.current.style.height === '0px') {
				messageRef.current.style.height = '12rem';
			}
		});
	};

	React.useEffect(() => {
		setVisible(false);
	}, []);

	return (
		<div className="pt-8 sm:pt-16 pb-8 sm:pb-16 flex items-center relative">
			<div
				className="absolute top-0 left-0 w-full h-full bg-shade opacity-75"
			/>
			<Layouts.Basic.ContentContainer
				span="wide"
				className="relative"
			>
				<div className="flex flex-wrap flex-row items-center sm:justify-between gap-6 sm:gap-12">
					<p className="m-0">
						<strong
							className="font-extralight font-headings text-5xl lowercase"
						>
							Get in touch.
						</strong>
					</p>
					<p className="m-0">
						Your message will be received via email.
					</p>
					<div
						className={`grow sm:grow-0 text-right ${visible ? 'hidden' : ''}`}
					>
						<WebNavigationReact.LinkButton
							component="a"
							href="/contact"
							onClick={openContactForm}
						>
							Open Form
						</WebNavigationReact.LinkButton>
					</div>
				</div>
				{visible !== false && (
					<form
						className="mt-8"
						aria-label="Contact Form"
						onSubmit={onSubmit}
						method="post"
						action="/a/contact"
					>
						<fieldset className="contents">
							<legend className="sr-only">
								Contact Form
							</legend>
							<div
								className="flex flex-col xs:grid xs:grid-cols-2 gap-4"
							>
								<div>
									<WebFreeformReact.TextInput
										label="Name"
										name="name"
										block
										border
										ref={autofocusRef}
									/>
								</div>
								<div>
									<WebFormattedReact.EmailInput
										label="Email"
										name="email"
										block
										border
										required
									/>
								</div>
								<div className="col-span-2">
									<WebFreeformReact.MultilineTextInput
										ref={messageRef}
										label="Message"
										name="message"
										block
										border
										required
									/>
								</div>
								<div className="col-span-2 text-right">
									<WebActionReact.ActionButton
										type="submit"
										variant="filled"
									>
										Send Message
									</WebActionReact.ActionButton>
								</div>
							</div>
						</fieldset>
					</form>
				)}
			</Layouts.Basic.ContentContainer>
		</div>
	);
}
