import {Trans} from '../i18n/trans';
import {Navbar} from '../ui/navigation/navbar/navbar';
import {Form} from '../ui/forms/form';
import {useForm} from 'react-hook-form';
import {
  ContactPagePayload,
  useSubmitContactForm,
} from './use-submit-contact-form';
import {FormTextField} from '../ui/forms/input-field/text-field/text-field';
import {Button} from '../ui/buttons/button';
import {useRecaptcha} from '../recaptcha/use-recaptcha';
import {StaticPageTitle} from '../seo/static-page-title';
import {Footer} from '@common/ui/footer/footer';

export function ContactUsPage() {
  const form = useForm<ContactPagePayload>();
  const submitForm = useSubmitContactForm(form);
  const {verify, isVerifying} = useRecaptcha('contact');

  return (
    <div className="flex flex-col bg-alt min-h-screen">
      <StaticPageTitle>
        <Trans message="Contact us" />
      </StaticPageTitle>
      <Navbar
        className="flex-shrink-0 sticky top-0"
        menuPosition="contact-us-page"
      />
      <div className="container p-24 md:p-40 mx-auto flex-auto flex items-center justify-center">
        <div className="border rounded bg-paper p-24 max-w-620">
          <h1 className="text-2xl">
            <Trans message="Contact us" />
          </h1>
          <p className="text-sm mt-4 mb-30">
            <Trans message="Please use the form below to send us a message and we'll get back to you as soon as possible." />
          </p>
          <Form
            form={form}
            onSubmit={async value => {
              const isValid = await verify();
              if (isValid) {
                submitForm.mutate(value);
              }
            }}
          >
            <FormTextField
              label={<Trans message="Name" />}
              name="name"
              required
              className="mb-20"
            />
            <FormTextField
              label={<Trans message="Email" />}
              name="email"
              required
              type="email"
              className="mb-20"
            />
            <FormTextField
              label={<Trans message="Message" />}
              name="message"
              required
              inputElementType="textarea"
              className="mb-20"
              rows={8}
            />
            <Button
              type="submit"
              variant="flat"
              color="primary"
              disabled={submitForm.isPending || isVerifying}
            >
              <Trans message="Send" />
            </Button>
          </Form>
        </div>
      </div>
      <Footer className="container mx-auto px-24 flex-shrink-0" />
    </div>
  );
}