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";
import { Elements, StripeProvider } from "react-stripe-elements";
import CheckoutForm from "./CheckoutForm";
var base64 = require("base-64");
let user_encrypt_id = base64.encode(cookie.load("user_id"));
class product_orientation2 extends Component {
  constructor(props) {
    super(props);
    if (localStorage.getItem("current_state") !== "product_orientation2") {
      this.props.history.push("/menu_page");
    }
    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: "",
      expedited: "",
      original_price: "",
      product_id: "",
      product_name: "Books And Boxes",
      product_price: "",
      shipping_price: "",
      temp_upgraded: "",
      total_upgraded_price: "",
      tax: ""
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose.bind(this);
  }

  componentDidMount = () => {
    let get_product_info = {
      action: "get_product_price",
      product_id: 1
    };
    console.log("get_product_info", get_product_info);
    let self = this;
    self.setState({ loader: true });
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(get_product_info)
      })
      .then(response => {
        console.log("response", response);
        self.setState({
          loader: false,
          original_price: response.data.product_data.original_prize,
          product_id: response.data.product_data.product_id,
          product_name: response.data.product_data.product_name,
          product_price: response.data.product_data.product_price,
          shipping_price: response.data.product_data.shipping_price,
          tax: response.data.product_data.tax
        });
        localStorage.setItem(
          "product_id",
          response.data.product_data.product_id
        );
        localStorage.setItem("product_name", "Baby Starter Pack");
        localStorage.setItem(
          "product_price",
          response.data.product_data.product_price
        );
        localStorage.setItem(
          "shipping_price",
          response.data.product_data.shipping_price
        );
        localStorage.setItem("tax", response.data.product_data.tax);
        // console.log("upgraded",(parseFloat(localStorage.getItem("temp_upgraded"))+parseFloat(localStorage.getItem("expedited"))+parseFloat(localStorage.getItem("shipping_price"))+parseFloat(localStorage.getItem("product_price"))).toFixed(2))
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false });
        self.setState({
          show_error: true,
          error: "Something Wrong... Please try Again"
        });
      });
  };

  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(
        //   "offer_orientation_index",
        //   index
        // );
        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.loader && (
            <div>
              <CircularProgress
                size={100}
                style={{ color: "black", marginTop: "17%" }}
              />
            </div>
          )}
          {this.state.is_active && <Drawer prop={this.props} />}
        </center>
        {/* {this.state.is_active && <Drawer prop={this.props} />} */}
        {!this.state.loader && (
          <div className="welcome_img m_t10 text-center">
            <img
              src={api.image_path + "familyone_logo.png"}
              alt=""
              title=""
              className="product_orientation_images"
            />
          </div>
        )}
        <div className="inner_container2 po_innercontainer product_orientation1_container m_t10 ">
          <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 wc_fixheightdiv">
              <div className="product_orientation_div">
                <div className="text-center product_orientation_img_div">
                  <img
                    src={api.image_path + "product_image.png"}
                    alt=""
                    title=""
                    className="product_orientation_img1"
                  />
                </div>
              </div>
              <div className="product_orientation_footer_div">
                <p className="product_orientation1_para">BABY STARTER PACK</p>
                <p className="page-txt product_orientation_footer_para po2_para">
                  We've disigned these products right down to the thread to be
                  as premium as it gets. Only the finest for Canada's babies. +
                  Bonus full-size product(s) from leading brand(s).
                </p>
                <ul className="product_orientation_ul po2_ul">
                  <li>Hard cover Book- 48 full colour pages.</li>
                  <li>Softest Baby Romper. 100% Cotton, 3-6 months.</li>
                  <li>Designer Canvas Backpack 100% Cotton.</li>
                  <li>+ Added bonus Dove Baby Rich Moisture Tip to Toe</li>
                </ul>
                <div className="product_orientation_price_div">
                  <div className="product_orientation_price_div_one">
                    <p>
                      Price:
                      <span className="discount_price_span">
                        {"$" + this.state.original_price}
                      </span>{" "}
                      {"$" + this.state.product_price}
                    </p>
                  </div>
                  <div className="product_orientation_price_div_two">
                    <p>
                      Shipping:
                      {"$" + this.state.shipping_price}
                    </p>
                  </div>
                </div>
                <div className="product_orientation_orderbtn_div">
                  <button
                    onClick={() => {
                      let tax_price =
                        parseFloat(localStorage.getItem("shipping_price")) +
                        parseFloat(localStorage.getItem("product_price"));
                      console.log("tax_price", (tax_price * 0.13).toFixed(2));
                      localStorage.setItem(
                        "tax",
                        (tax_price * 0.13).toFixed(2)
                      );
                      let total_price =
                        parseFloat(localStorage.getItem("shipping_price")) +
                        parseFloat(localStorage.getItem("product_price")) +
                        parseFloat(localStorage.getItem("tax"));
                      console.log("total_price", total_price.toFixed(2));
                      localStorage.setItem(
                        "total_price",
                        total_price.toFixed(2)
                      );
                      localStorage.setItem("upgraded", "0");
                      localStorage.setItem("current_state", "billing_address"),
                        this.props.history.push("/billing_address");
                    }}
                    className="btnorder"
                    type="submit"
                  >
                    Order Now
                  </button>
                </div>
              </div>
              <div className="m_t10 m_t40 ">
                <ul className="dot_ul m-auto">
                  <li>
                    <a
                      onClick={() => {
                        localStorage.setItem(
                          "current_state",
                          "product_orientation1"
                        ),
                          this.props.history.push("/product_orientation1");
                      }}
                    />
                  </li>
                  <li>
                    <a
                      onClick={() => {
                        localStorage.setItem(
                          "current_state",
                          "product_orientation1"
                        ),
                          this.props.history.push("/product_orientation1");
                      }}
                    />
                  </li>
                  <li className="active">
                    <a
                      onClick={() => {
                        localStorage.setItem(
                          "current_state",
                          "product_orientation2"
                        ),
                          this.props.history.push("/product_orientation2");
                      }}
                    />
                  </li>
                </ul>
              </div>
              <div className="text-right prev-arrow">
                <a
                  onClick={() => {
                    localStorage.setItem(
                      "current_state",
                      "product_orientation1"
                    ),
                      this.props.history.push("/product_orientation1");
                  }}
                >
                  <img
                    src={api.image_path + "prev_arrow.jpg"}
                    alt=""
                    title=""
                    width="30"
                  />
                </a>
              </div>
              <div className="text-right next-arrow">
                <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") == 0
                        ? localStorage.setItem("current_state", "perks")
                        : localStorage.setItem("current_state", "menu_page");
                      this.props.history.push({
                        pathname:
                          localStorage.getItem("perks") == 0
                            ? "/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");
                      }
                    }
                  }}
                >
                  <img
                    src={api.image_path + "next_arrow.jpg"}
                    alt=""
                    title=""
                    width="30"
                  />
                </a>
              </div>
            </div>
          )}
          {!this.state.loader && (
            <div className="freebie_footer_div text-center">
              <a
                className="skip_link"
                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") == 0
                      ? localStorage.setItem("current_state", "perks")
                      : localStorage.setItem("current_state", "menu_page");
                    this.props.history.push({
                      pathname:
                        localStorage.getItem("perks") == 0
                          ? "/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");
                    }
                  }
                }}
              >
                Skip
              </a>
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default product_orientation2;
