import React from "react";
import { Formik } from "formik";
import axios from "axios";
import Head from "next/head";

import {
  TextInput,
  TextareaInput,
  SelectInput,
} from "../components/forms/formfields.jsx";

import { ContactSchema } from "../components/forms/schemas.jsx";

export default class Kontakt extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      res: null,
      status: null,
    };
  }
  render() {
    return (
      <>
        <Head>
          <meta
            name="description"
            content="Sie haben Fragen? Treten Sie einfach mit uns in Kontakt."
          />
          <meta name="keywords" content="Prothmann, Kontakt, Kontaktformular" />
          <title>Kontakt - Prothmann GmbH</title>
        </Head>

        <div className="container-fluid products-container navbar-spacing">
          <div className="row align-items-center min-height-100">
            <div
              className={`align-self-stretchd-flex flex-column justify-content-center col-lg-6 p-0 p-5`}
            >
              <h1 className="mainheading">Kontakt</h1>
              <div className="description">
                <p>
                  Nutzen Sie einfach das Kontaktformular auf dieser Seite oder
                  eine der untern angegebenen Kontaktmöglichkeiten.
                  <br />
                  Telefonisch erreichen Sie uns Montag - Freitag von 9:00 Uhr
                  bis 16:00 Uhr.
                  <br />
                  <br />
                  E-Mail:{" "}
                  <a href="mailto:info@prothmann.com">info@prothmann.com</a>
                  <br />
                  Telefon: <a href="tel:+49814259951">+49 (0) 8142 59951</a>
                  <br />
                  Fax: <a href="fax:+49814259953">+49 (0) 8142 59953</a>
                  <br />
                  <br />
                  Anschrift:
                  <br />
                  Industriestraße 6<br />
                  82194 Gröbenzell (bei München)
                </p>
              </div>
            </div>

            <div
              className={`col-lg-6 pl-0 align-self-center p-5 mb-5 h-100 col-lg-6`}
            >
              <Formik
                validationSchema={ContactSchema}
                initialValues={{
                  firma: "",
                  anrede: "",
                  titel: "",
                  vorname: "",
                  nachname: "",
                  email: "",
                  telefon: "",
                  betreff: "",
                  nachricht: "",
                }}
                onSubmit={async (values) => {
                  console.log(values);
                  const data = values;
                  try {
                    const res = await axios({
                      method: "post",
                      url: "/api/contactsend",
                      headers: {
                        "Content-Type": "application/json",
                      },
                      data,
                    });
                    this.setState({
                      status: "Ihre Nachricht wurde erfolgreich versendet",
                      res: res.status,
                    });
                  } catch (error) {
                    this.setState({
                      status:
                        "Beim versenden ist ein Fehler aufgetreten! Bitte versuchen Sie es in einigen Minuten noch einmal oder schicken Sie und direkt eine e-Mail.",
                      res: res.status,
                    });
                  }
                  console.log("State: ", this.state);
                }}
              >
                {({
                  values,
                  errors,
                  touched,
                  handleChange,
                  handleBlur,
                  handleSubmit,
                  isSubmitting,
                }) => (
                  <form onSubmit={handleSubmit} className="description">
                    <div className="row g-2 mb-5">
                      <div className="col">
                        <TextInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.firma}
                          touched={touched.firma}
                          placeholder={"Musterfirma"}
                          onChange={handleChange("firma")}
                          onBlur={handleBlur("firma")}
                          value={values.firma}
                          label="Firma (optional)"
                          type="text"
                        />
                      </div>
                    </div>

                    <div className="row g-2 mb-3">
                      <div className="col">
                        <SelectInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.anrede}
                          touched={touched.anrede}
                          placeholder={"Anrede"}
                          onChange={handleChange("anrede")}
                          onBlur={handleBlur("anrede")}
                          value={values.anrede}
                          label="Anrede"
                          options={["Herr", "Frau", "Divers"]}
                        />
                      </div>
                      <div className="col">
                        <SelectInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.titel}
                          touched={touched.titel}
                          placeholder={"Titel"}
                          onChange={handleChange("titel")}
                          onBlur={handleBlur("titel")}
                          value={values.titel}
                          label="Titel"
                          options={["Dr.", "Prof.", "Dipl."]}
                        />
                      </div>
                    </div>

                    <div className="row g-2 mb-5">
                      <div className="col">
                        <TextInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.vorname}
                          touched={touched.vorname}
                          placeholder={"Max"}
                          onChange={handleChange("vorname")}
                          onBlur={handleBlur("vorname")}
                          value={values.vorname}
                          label="Vorname (optional)"
                          type="text"
                        />
                      </div>
                      <div className="col">
                        <TextInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.nachname}
                          touched={touched.nachname}
                          placeholder={"Max"}
                          onChange={handleChange("nachname")}
                          onBlur={handleBlur("nachname")}
                          value={values.nachname}
                          label="Nachname"
                          type="text"
                        />
                      </div>
                    </div>

                    <div className="row g-2 mb-5">
                      <div className="col">
                        <TextInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.email}
                          touched={touched.email}
                          placeholder={"max@mustermann.de"}
                          onChange={handleChange("email")}
                          onBlur={handleBlur("email")}
                          value={values.email}
                          label="eMail"
                          type="email"
                        />
                      </div>
                      <div className="col">
                        <TextInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.telefon}
                          touched={touched.telefon}
                          placeholder={"max@mustermann.de"}
                          onChange={handleChange("telefon")}
                          onBlur={handleBlur("telefon")}
                          value={values.telefon}
                          label="Telefon (optional)"
                          type="text"
                        />
                      </div>
                    </div>

                    <div className="row g-2 mb-3">
                      <div className="col-12">
                        <TextInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.betreff}
                          touched={touched.betreff}
                          placeholder={"Betreff"}
                          onChange={handleChange("betreff")}
                          onBlur={handleBlur("betreff")}
                          value={values.betreff}
                          label="Betreff"
                          type="text"
                        />
                      </div>
                      <div className="col-12">
                        <TextareaInput
                          isSubmitting={isSubmitting}
                          rescode={this.state.res}
                          error={errors.nachricht}
                          touched={touched.nachricht}
                          placeholder={"Nachricht"}
                          onChange={handleChange("nachricht")}
                          onBlur={handleBlur("nachricht")}
                          value={values.nachricht}
                          label="Nachricht"
                        />
                      </div>
                    </div>
                    <div className="row g-2 mb-3">
                      <div className="col">
                        <p>{this.state.status}</p>
                        {!isSubmitting && this.state.res != 200 && (
                          <button className="btn btn-dark" type="submit">
                            Abschicken
                          </button>
                        )}
                        {isSubmitting && (
                          <div className="spinner-border" role="status">
                            <span className="visually-hidden">Sende...</span>
                          </div>
                        )}
                      </div>
                    </div>
                  </form>
                )}
              </Formik>
            </div>
          </div>
        </div>
      </>
    );
  }
}
