import React from "react";
import styled from "styled-components";
import axios from "axios";
import { withRouter } from "react-router-dom";
import { errorMessage } from "../../actions";
import { connect } from "react-redux";
import { Formik } from "formik";
import BillingFields from "../AddressFields/BillingFields";
import ShippingFields from "../AddressFields/ShippingFields";
import Button from "../../components/Button/Button";
import Title from "../../components/Title/Title";
import AddressCheckbox from "./components/AddressCheckbox";
import Input from "../../components/Input/Input";
import WrapperButton from "./components/ButtonWrapper";
import AddressCheckboxWrapper from "./components/AddressCheckboxWrapper";
import inputsConfig from "./assets/data";
import InputWrapper from "../../components/Input/InputWrapper";
import Regulations from "./components/Regulations";
import Newsletter from "./components/Newsletter";
import {
  addressValidationSchema,
  billingValidationSchema
} from "../AddressFields/assets/validationSchema";
import viewGtm from "../../helpers/gtm";

const RegistrationWrapper = styled.div`
  width: 100%;
  max-width: 400px;
  margin-top: 40px;
`;

const ShippingWrapper = styled.div`
  margin-top: 40px;
`;

const WrapperRegulations = styled.div`
  margin-top: 10px;
`;

const WrapperNewsletter = styled.div`
  margin-top: 30px;
`;

const stepNumber = '2';

class Registration extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      shippingSameBilling: true
    };

    this.onChangeShippingSameBilling = this.onChangeShippingSameBilling.bind(this);
  }

  onChangeShippingSameBilling() {
    this.setState({
      shippingSameBilling: !this.state.shippingSameBilling
    });
  }

  async registerUser(values) {
    window.mainSpinner(true);
    const formKey = document.getElementById("form-key").value;
    const url = "/subscription/api_customer/register";

    const data = {
      created_in: "Deutsch",
      prefix: "Herr",
      firstname: values.billingFirstname,
      lastname: values.billingLastname,
      email: values.registerEmail,
      company: values.billingCompany,
      street: [values.billingStreet1],
      city: values.billingCity,
      country_id: "DE",
      postcode: values.billingPostcode,
      vat_id: "1",
      password: values.registerPassword,
      create_address: "1",
      default_billing: 1,
      default_shipping: this.state.shippingSameBilling ? 1 : 0,
      create_shipping_address: this.state.shippingSameBilling ? 0 : 1,
      shipping_firstname: values.shippingFirstname,
      shipping_lastname: values.shippingLastname,
      shipping_company: values.shippingCompany,
      shipping_street: [values.shippingStreet1],
      shipping_city: values.shippingCity,
      shipping_country_id: "DE",
      shipping_postcode: values.shippingPostcode,
      shipping_default_billing: 0,
      shipping_default_shipping: 1,
      is_subscribed: values.is_subscribed ? 1 : 0
    };

    try {
      const res = await axios({
        method: "post",
        headers: { "X-Requested-With": "XMLHttpRequest" },
        params: {
          form_key: formKey
        },
        url,
        data
      });

      window.mainSpinner(false);
      document.getElementById("form-key").value = res.data.token;

      return res.data;
    } catch (err) {
      console.log(err);

      window.mainSpinner(false);
      return err;
    }
  }

  render() {
    const { userLogged, userFormKey, errorMessage, history, products } = this.props;
    return (
      <RegistrationWrapper>
        <Title text="Ich bin Neukunde" />
        <Formik
          validateOnChange={false}
          validateOnBlur={false}
          onSubmit={async (values, { setSubmitting }) => {
            setSubmitting(false);
            const data = await this.registerUser(values);

            if (data.status === "ok") {
              const formKey = document.getElementById("form-key").value;
              userLogged(true);
              userFormKey(formKey);
              errorMessage("");
              history.push("/subscription/cart/checkout/address");
            } else {
              errorMessage(data.message);
            }
          }}
          initialValues={{
            registerEmail: "",
            registerPassword: "",
            billingFirstname: "",
            billingLastname: "",
            billingStreet1: "",
            billingCompany: "",
            billingPostcode: "",
            billingCity: "",
            billingPrefix: "Herr",
            billingAddressId: "",
            shippingFirstname: "",
            shippingLastname: "",
            shippingStreet1: "",
            shippingCompany: "",
            shippingPostcode: "",
            shippingCity: "",
            shippingPrefix: "Herr",
            shippingAddressId: "",
            is_subscribed: false,
            regulations: ""
          }}
          validationSchema={
            this.state.shippingSameBilling ? billingValidationSchema : addressValidationSchema
          }
        >
          {({ values, errors, handleChange, handleSubmit, isSubmitting }) => (
            <form onSubmit={handleSubmit}>
              <BillingFields values={values} handleChange={handleChange} errors={errors} />

              <AddressCheckboxWrapper>
                <AddressCheckbox
                  checked={this.state.shippingSameBilling}
                  handleCheck={this.onChangeShippingSameBilling}
                  inputRef={el => (this.inputElement = el)}
                />
              </AddressCheckboxWrapper>

              {inputsConfig.map(input => (
                <InputWrapper key={input.id}>
                  <Input
                    id={input.id}
                    type={input.type}
                    label={input.label}
                    value={values[input.id]}
                    error={errors[input.id]}
                    handleChange={handleChange}
                  />
                </InputWrapper>
              ))}

              {this.state.shippingSameBilling ? null : (
                <ShippingWrapper>
                  <Title text="Lieferadresse" />
                  <ShippingFields values={values} handleChange={handleChange} errors={errors} />
                </ShippingWrapper>
              )}

              <WrapperNewsletter>
                <Newsletter
                    id="is_subscribed"
                    value={values.is_subscribed}
                    handleChange={handleChange}
                />
              </WrapperNewsletter>

              <WrapperRegulations>
                <Regulations
                  id="regulations"
                  value={values.regulations}
                  handleChange={handleChange}
                  error={errors.regulations}
                />
              </WrapperRegulations>

              <WrapperButton>
                <Button type="submit" onClick={viewGtm.bind(this,products,stepNumber)} disabled={isSubmitting} action={() => console.log("click")}>
                  Weiter
                </Button>
              </WrapperButton>
            </form>
          )}
        </Formik>
      </RegistrationWrapper>
    );
  }
}

const mapStateToProps = (state) => {
  return {
    products: state.products
  }
};

const mapDispatchToProps = { errorMessage };

Registration = connect(
  mapStateToProps,
  mapDispatchToProps
)(Registration);

export default withRouter(Registration);