import React from "react";
import { Formik } from "formik";
import * as Yup from "yup";
import axios from "axios";
import Head from "next/head";

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

import IntroForm from "../components/forms/eanfrageforms/introform.jsx";
import ContactPersonForm from "../components/forms/eanfrageforms/contactperson.jsx";
import PartForm from "../components/forms/eanfrageforms/partform.jsx";
import Summary from "../components/forms/eanfrageforms/summary.jsx";

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

    this._renderStepContent = this._renderStepContent.bind(this);
    this._handleForward = this._handleForward.bind(this);
    this._handleBackwards = this._handleBackwards.bind(this);

    this.state = {
      rescode: null,
      statustext: null,
      activeStep: 0,
      disabled: false,
    };
  }

  _renderStepContent(
    step,
    values,
    isSubmitting,
    handleChange,
    handleBlur,
    touched,
    errors,
    setFieldValue
  ) {
    switch (step) {
      case 0:
        return <IntroForm />;
      case 1:
        return (
          <ContactPersonForm
            values={values}
            isSubmitting={isSubmitting}
            handleChange={handleChange}
            handleBlur={handleBlur}
            touched={touched}
            errors={errors}
            disabled={this.state.disabled}
          />
        );
      case 2:
        return (
          <PartForm
            values={values}
            isSubmitting={isSubmitting}
            handleChange={handleChange}
            handleBlur={handleBlur}
            touched={touched}
            errors={errors}
            disabled={this.state.disabled}
            setFieldValue={setFieldValue}
          />
        );
      case 3:
        return <Summary values={values} />;
      default:
        return <div>Not Found</div>;
    }
  }

  _handleForward() {
    this.setState({
      activeStep: this.state.activeStep + 1,
    });
  }

  _handleBackwards() {
    this.setState({
      activeStep: this.state.activeStep - 1,
    });
  }

  render() {
    return (
      <>
        <Head>
          <meta
            name="description"
            content="Die Hans Prothmann GmbH ist Ihr Experte für Blechverarbeitung in München. Professionelles Laserschneiden, Stanzen, Biegen und Gravieren in München."
          />
          <meta
            name="keywords"
            content="Blechverarbeitung München, Blechverarbeitung Gröbenzell, Laserteile, Biegeteile, Stanzteile"
          />
          <meta name="robots" content="index, follow" />
          <title>eAnfrage - Prothmann GmbH</title>
        </Head>
        <div className="container background-image landing-img d-flex align-items-center minh-100vh navbar-spacing mb-5">
          <div className="col text-center">
            <Formik
              validationSchema={EanfrageSchema}
              initialValues={{
                firma: "",
                anrede: "",
                titel: "",
                vorname: "",
                nachname: "",
                email: "",
                telefon: "",
                invoiceadress: "",
                invoiceplz: "",
                diffrentshipping: false,
                shippingaddress: "",
                shippingplz: "",
                parts: [
                  {
                    name: "Teststeil",
                    description: "Dies ist eine total tolle Bschreibung",
                    material: "Sonstiges",
                    materialother: "Kupfer Beryllium",
                    finish: "Sonstiges",
                    finishother: "DLC",
                    amount: "1000",
                    files: [],
                    engraving: true,
                    comment:
                      "Dies hier sind zusätzliche Produktionsanweisungen",
                  },
                ],
                consent: true,
              }}
              onSubmit={async (values, errors) => {
                console.log(values, errors);
                // 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,
                //   });
                // }
              }}
            >
              {({
                values,
                errors,
                touched,
                handleChange,
                handleBlur,
                handleSubmit,
                isSubmitting,
                setFieldValue,
              }) => (
                <form onSubmit={handleSubmit} className="description">
                  {this._renderStepContent(
                    this.state.activeStep,
                    values,
                    isSubmitting,
                    handleChange,
                    handleBlur,
                    touched,
                    errors,
                    setFieldValue
                  )}

                  <div className="d-flex flex-row justify-content-between">
                    <button
                      type="button"
                      className={`btn btn-dark ${
                        this.state.activeStep <= 0 ? "disabled" : ""
                      }`}
                      onClick={this._handleBackwards}
                    >
                      Zurück
                    </button>

                    {this.state.activeStep !== 3 ? (
                      <button
                        type="button"
                        className={`btn btn-primary`}
                        onClick={this._handleForward}
                      >
                        Weiter
                      </button>
                    ) : (
                      <button
                        type="button"
                        className={`btn btn-success ${
                          values.consent === false ? "disabled" : ""
                        }`}
                        onClick={handleSubmit}
                      >
                        Abschicken
                      </button>
                    )}
                  </div>
                </form>
              )}
            </Formik>
          </div>
        </div>
      </>
    );
  }
}
