import React, { Component } from "react";
import Drawer from "./drawer";

import axios from "axios";
import CircularProgress from "@material-ui/core/CircularProgress";
import FlatButton from "material-ui/FlatButton";
import Dialog from "material-ui/Dialog";
import api from "./api/api";
import cookie from "react-cookies";
class payment_compleated extends Component {
  constructor(props) {
    super(props);
    if (
      // localStorage.getItem("current_state") !== "freebie2" ||
      cookie.load("user_id") == "" ||
      cookie.load("user_id") == "undefined" ||
      typeof cookie.load("user_id") == undefined
    ) {
      this.props.history.push("/");
    }
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    this.state = {
      loader: false,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      open: false,
      alertmsg: "",
      product_orientation: false
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose.bind(this);
  }
  handleClose = () => {
    this.setState({ open: false });
  };
  handleClick = () => {
    var self = this;
    self.setState({ loader: true });

    let get_contest = {
      action: "update",
      user_id: cookie.load("user_id"),
      user_metadata: {
        offer_orientation: 1
      }
    };

    console.log("get_contest", get_contest);
    axios
      .request({
        url: api.react_request,
        method: "POST",
        data: JSON.stringify(get_contest)
      })
      .then(function(response) {
        self.setState({ loader: false });
        console.log("response", response);
        console.log(response.data);
        localStorage.setItem(
          "offer_orientation",
          response.data.user_metadata.offer_orientation
        );

        console.log(JSON.parse(localStorage.getItem("contest_array")));
        let contest_array = JSON.parse(localStorage.getItem("contest_array"));

        localStorage.setItem("current_state", "contest"),
          self.props.history.push(
            "/Contest/" +
              contest_array[localStorage.getItem("contest_index")]._id +
              "/" +
              cookie.load("user_id")
          );
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false });
        self.setState({
          open: true,
          alertmsg: "Something Wrong... Please try again later"
        });
      });
  };

  render() {
    return (
      <div className="page-bg">
        <center>{this.state.is_active && <Drawer prop={this.props} />}</center>

        {!this.state.loader && (
          <div className="welcome_img freebie1-p text-center">
            <img
              src={api.image_path + "familyone_logo.png"}
              alt=""
              title=""
              className="max-w-200 "
            />
          </div>
        )}
        <div className="inner_container2 m_t20 ">
          <div className="container-fluid">
            {this.state.loader && (
              <CircularProgress
                size={100}
                style={{ color: "black", marginTop: "17%" }}
              />
            )}
          </div>
          <Dialog
            style={{ textTransform: "capitalize" }}
            actions={
              <FlatButton
                label="Close"
                labelStyle={{ color: "#000" }}
                onClick={this.handleClose.bind(this)}
              />
            }
            modal={false}
            open={this.state.open}
            onRequestClose={this.handleClose}
          >
            {this.state.alertmsg}
          </Dialog>
          {!this.state.loader && (
            <div className="white_container">
              <div className="text-right next-arrow">
                {/* <a onClick={() => (localStorage.setItem("current_state", "freebie3"),this.props.history.push("/freebie3"))}>
                  <img
                    src="./images/next_arrow.jpg"
                    alt=""
                    title=""
                    width="30"
                  />
                </a> */}
              </div>
              <div className="text-right prev-arrow">
                {/* <a onClick={() => (localStorage.setItem("current_state", "freebie1"),this.props.history.push("/freebie1"))}>
                  <img
                    src="./images/prev_arrow.jpg"
                    alt=""
                    title=""
                    width="30"
                  />
                </a> */}
              </div>
              <div
                className="welcome_txt2 text-center mt20 pyment_compleated"
                style={{ paddingTop: 50 }}
              >
                <b>Congratulations !</b>
                <br />
                Your order is <br />
                being{" "}
                <b>
                  <span className="p">p</span>
                  <span className="r">r</span>
                  <span className="o">o</span>
                  <span className="c">c</span>
                  <span className="e">e</span>
                  <span className="sg">s</span>
                  <span className="s">s</span>
                  <span className="">e</span>
                  <span className="d">d</span>
                </b>
              </div>
              <p
                className="page-txt m_t20 payment_compleated_textdiv"
                style={{ paddingBottom: 50, fontSize: 18 }}
              >
                We've received your payment and we'll notify you when your order
                ships. Typically orders ship monthly, but may ship sooner.
              </p>
            </div>
          )}
          {!this.state.loader && (
            <div className="freebie_footer_div text-center">
              <a
                onClick={() => {
                  console.log("local", localStorage.getItem("activity"));

                  if (
                    typeof cookie.load("access_token") !== undefined &&
                    cookie.load("access_token") !== "undefined" &&
                    cookie.load("access_token") !== "null" &&
                    cookie.load("access_token") !== null &&
                    cookie.load("access_token")
                  ) {
                    localStorage.getItem("perks") !== "1"
                      ? localStorage.setItem("current_state", "perks")
                      : localStorage.setItem("current_state", "menu_page");
                    this.props.history.push({
                      pathname:
                        localStorage.getItem("perks") !=="1"
                          ? "/perks"
                          : "/menu_page"
                    });
                  } else {
                    if (localStorage.getItem("activity") === 1) {
                      console.log("activity done");
                      localStorage.setItem("current_state", "remind_user"),
                        this.props.history.push("/remind_user");
                    } else {
                      console.log("activity not done");
                      localStorage.setItem("current_state", "remind_user1"),
                        this.props.history.push("/remind_user1");
                    }
                  }
                }}
                className="skip_link"
                style={{ textTransform: "capitalize" }}
              >
                Done
              </a>
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default payment_compleated;
