import React, { useRef, useState } from "react";
import {
  Button,
  ContactButton,
  Grid,
  Header,
  Icon,
  IconWithText,
  InputField,
  Interrupt,
  Label,
  Layout,
  Link,
  Map,
  Section,
  Select,
  Text,
} from "@components/index";
import { getGoogleAPIKey } from "../lib/env";
import { CheckCircleSvg, EnvelopeSvg, MobileSvg, TeamSvg } from "../icons";
import bannerImg from "../images/banner_bathroom.jpg";

export default function About({ apikey }) {
  const formRef = useRef();
  const [formState, setFormState] = useState();

  const handleSubmit = (e) => {
    e.preventDefault();
    setFormState("submitting");
    const body = new FormData(formRef.current);
    fetch("/contact", { method: "POST", body })
      .then((res) => {
        if (res.status !== 200) {
          setFormState("error");
        } else {
          setFormState("success");
        }
      })
      .catch(() => setFormState("error"));
  };

  return (
    <Layout title="Contact us">
      <Header image={bannerImg} position="br">
        <Text size="xl" weight="bold" noMargin>
          <em>Get in</em> touch
        </Text>
      </Header>
      <Section>
        <Text size="xl">
          Are you planning a new bathroom? Are you looking for inspiration? Our
          team are ready to help you through every step of the journey.
        </Text>
        <Text>
          A typical bathroom refurbishment starts from £3,500, increasing up to
          £20,000. Our quotes include stripping out the old bathroom, disposal
          of rubbish, fitting the new bathroom, labour and building materials
          for tiling, plastering, painting and decorating. It does not include
          bathroom suites or tiles.
        </Text>
        <Grid md={2}>
          <div style={{ position: "relative" }}>
            {formState === "success" && (
              <>
                <IconWithText
                  icon={
                    <Icon color="dark" size="lg">
                      <CheckCircleSvg />
                    </Icon>
                  }
                >
                  <Text size="lg" color="dark" noMargin>
                    Thank you for contacting us!
                  </Text>
                </IconWithText>
                <Text>
                  We will get back to you in the next two working days.
                </Text>
              </>
            )}

            {formState !== "success" && (
              <>
                {formState === "submitting" && <Interrupt />}
                <IconWithText
                  icon={
                    <Icon size="lg" color="dark">
                      <EnvelopeSvg />
                    </Icon>
                  }
                >
                  <Text size="lg" color="dark" noMargin>
                    Contact us
                  </Text>
                </IconWithText>
                {formState === "error" && (
                  <>
                    <Text size="lg" color="primary" weight="bold">
                      There was an error submitting the form, please try again
                      later.
                    </Text>
                    <Text color="primary">
                      Alternatively, please feel free to email us at{" "}
                      <Link href="mailto:quotations@abcprojectdesign.com">
                        quotations@abcprojectdesign.com
                      </Link>
                      .
                    </Text>
                  </>
                )}
                <form
                  name="contact"
                  method="POST"
                  action="/contact"
                  onSubmit={(e) => handleSubmit(e, scroll)}
                  data-netlify="true"
                  data-netlify-honeypot="bot-field"
                  ref={formRef}
                >
                  <input type="hidden" name="form-name" value="contact" />
                  <Label htmlFor="contact-name">Name</Label>
                  <InputField id="contact-name" name="name" />
                  <Label htmlFor="contact-email">Email</Label>
                  <InputField id="contact-email" name="email" />
                  <Label htmlFor="contact-telephone">Telephone</Label>
                  <InputField id="contact-telephone" name="telephone" />
                  <Label htmlFor="contact-stage">
                    What stage of planning are you at?
                  </Label>
                  <Select
                    id="contact-stage"
                    name="stage"
                    options={[
                      { value: "", label: "" },
                      { value: "ready to hire", label: "I'm ready to hire" },
                      {
                        value: "budgeting and planning",
                        label: "I'm planning and budgeting",
                      },
                      {
                        value: "quote for insurance",
                        label: "I need a quote for insurance",
                      },
                    ]}
                  />
                  <Label htmlFor="contact-start">
                    When would you like the job to start?
                  </Label>
                  <Select
                    id="contact-start"
                    name="start"
                    options={[
                      { value: "", label: "" },
                      { value: "urgently", label: "Urgently" },
                      { value: "within 1 week", label: "Within 1 week" },
                      { value: "within 2 weeks", label: "Within 2 weeks" },
                      { value: "within 1 month", label: "Within 1 month" },
                      { value: "within 2 months", label: "Within 2 months" },
                      { value: "not sure", label: "Not sure" },
                    ]}
                  />
                  <Label htmlFor="contact-status">
                    Are you the owner of the property?
                  </Label>
                  <Select
                    id="contact-status"
                    name="status"
                    options={[
                      { value: "", label: "" },
                      { value: "owner", label: "I own the property" },
                      { value: "landlord", label: "I am the landlord" },
                      { value: "tenant", label: "I am a tenant" },
                      {
                        value: "council property",
                        label: "It's a council property",
                      },
                    ]}
                  />
                  <Label htmlFor="contact-budget">What is your budget?</Label>
                  <Select
                    id="contact-budget"
                    name="budget"
                    options={[
                      { value: "under £2,000", label: "Under £2,000" },
                      { value: "under £3,000", label: "Under £3,000" },
                      { value: "under £4,000", label: "Under £4,000" },
                      { value: "under £5,000", label: "Under £5,000" },
                      { value: "under £6,000", label: "Under £6,000" },
                      { value: "under £7,000", label: "Under £7,000" },
                      { value: "under £8,000", label: "Under £8,000" },
                      { value: "under £9,000", label: "Under £9,000" },
                      { value: "under £10,000", label: "Under £10,000" },
                      { value: "under £15,000", label: "Under £15,000" },
                      { value: "under £20,000", label: "Under £20,000" },
                    ]}
                  />
                  <Label htmlFor="contact-message">
                    Describe what needs to be done
                  </Label>
                  <InputField id="contact-message" name="message" textArea />
                  <Button type="submit">
                    {formState === "submitting" ? "Submitting..." : "Submit"}
                  </Button>
                </form>
              </>
            )}
          </div>
          <div>
            <IconWithText
              icon={
                <Icon color="dark" size="lg">
                  <TeamSvg />
                </Icon>
              }
            >
              <Text size="lg" color="dark" noMargin>
                The Team
              </Text>
            </IconWithText>
            <div>
              <Text noMargin>
                <strong>Daniel Costea</strong> &ndash; Project Director
              </Text>
              <ContactButton href="tel:+447378839358" size="sm">
                <Icon size="sm">
                  <MobileSvg />
                </Icon>
                07378839358
              </ContactButton>
              <ContactButton
                href="mailto:quotations@abcprojectdesign.com"
                size="sm"
              >
                <Icon size="sm">
                  <EnvelopeSvg />
                </Icon>
                quotations@abcprojectdesign.com
              </ContactButton>
            </div>
          </div>
        </Grid>
      </Section>
      <Map apikey={apikey} zoom={10} showMarker />
    </Layout>
  );
}

export async function getStaticProps() {
  return {
    props: {
      apikey: getGoogleAPIKey(),
    },
  };
}