import React from "react";
import styled from "styled-components";
import { withRouter } from "react-router-dom";
import { errorMessage } from "../../actions";
import { connect } from "react-redux";
import { compose } from "redux";
import axios from "axios";
import PropTypes from "prop-types";
import { Formik } from "formik";
import Input from "../../components/Input/Input";
import Title from "../../components/Title/Title";
import Button from "../../components/Button/Button";
import Link from "../../components/Link/Link";
import InputWrapper from "../../components/Input/InputWrapper";
import inputsConfig from "./assets/data";
import loginFormSchema from "./assets/validationSchema";
import viewGtm from "../../helpers/gtm";


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

const LinkWrapper = styled.div`
  margin-top: 10px;
  margin-bottom: 20px;
  text-align: right;
`;

const FormWrapper = styled.form`
  margin-top: 68px;
`;
const stepNumber = '2';

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

  logInUser = async ({ loginEmail, loginPassword }) => {
    window.mainSpinner(true);
    const formKey = document.getElementById("form-key").value;
    const url = "/subscription/api_customer/loginCustomer";
    const data = {
      username: loginEmail,
      password: loginPassword
    };

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

      if (res.data && res.data.token) {
        document.getElementById("form-key").value = res.data.token;
      }

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

  render() {
    const { history, userLogged, userFormKey, errorMessage, products } = this.props;

    return (
      <LogInWrapper>
        <Title text="Ich habe bereits ein Kundenkonto" />
        <Formik
          validateOnChange={false}
          validateOnBlur={false}
          onSubmit={async (values, { setSubmitting }) => {
            setSubmitting(false);
            const data = await this.logInUser(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={{ loginEmail: "", loginPassword: "" }}
          validationSchema={loginFormSchema}
        >
          {({ values, errors, handleChange, handleSubmit, isSubmitting, handleBlur }) => (
            <FormWrapper onSubmit={handleSubmit}>
              {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}
                    handleBlur={handleBlur}
                  />
                </InputWrapper>
              ))}
              <LinkWrapper>
                <Link url="/customer/account/forgotpassword/">Passwort vergessen?</Link>
              </LinkWrapper>

                <Button type="submit" onClick={viewGtm.bind(this,products,stepNumber)} disabled={isSubmitting} action={() => console.log(currency)}>
                Anmelden
              </Button>
            </FormWrapper>
          )}
        </Formik>
      </LogInWrapper>
    );
  }
}

LogIn.propTypes = {
  userLogged: PropTypes.func.isRequired,
  userFormKey: PropTypes.func.isRequired
};

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

const mapDispatchToProps = { errorMessage };

export default compose(
  withRouter,
  connect(
    mapStateToProps,
    mapDispatchToProps
  )
)(LogIn);