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 { Elements, StripeProvider } from "react-stripe-elements";
import CheckoutForm from "./CheckoutForm";
import cookie from "react-cookies";
var base64 = require("base-64");
let user_encrypt_id = base64.encode(localStorage.getItem("user_id"));
// import {
//   PopupboxManager,
//   PopupboxContainer
// } from 'react-popupbox';

class Popup extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showPopup: false,
      loader: false,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      open: false,
      alertmsg: "",
      pay: false,
      product_price: "39.95",
      shipping_price: "8.99",
      total_price: "",
      product_name: "",
      tax: ""
    };

    if (
      // localStorage.getItem("current_state") !== "product_orientation1" ||
      cookie.load("user_id") == null ||
      cookie.load("user_id") == "null" ||
      cookie.load("user_id") == "" ||
      cookie.load("user_id") == "undefined" ||
      typeof cookie.load("user_id") == undefined
    ) {
      console.log("session", cookie.load("user_id"));
      this.props.history.push("/");
    }
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    // this.state = {
  }

  handleUpgrade = () => {
    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,
          expedited: response.data.product_data.expedited,
          original_prize: 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,
          temp_upgraded: response.data.product_data.upgraded
        });
        localStorage.setItem("expedited", response.data.product_data.expedited);
        localStorage.setItem(
          "product_id",
          response.data.product_data.product_id
        );
        localStorage.setItem(
          "product_name",
          response.data.product_data.product_name
        );
        localStorage.setItem(
          "product_price",
          response.data.product_data.product_price
        );
        localStorage.setItem(
          "shipping_price",
          response.data.product_data.shipping_price
        );
        localStorage.setItem(
          "temp_upgraded",
          response.data.product_data.upgraded
        );
        
        // parseFloat(localStorage.getItem("temp_upgraded"))+parseFloat(localStorage.getItem("expedited"))+parseFloat(localStorage.getItem("shipping_price"))+parseFloat(localStorage.getItem("product_price"))
        localStorage.setItem(
          "upgraded_price",
          parseInt(response.data.product_data.upgraded) +
            parseInt(response.data.product_data.expedited)
        );
        console.log(
          "upgraded",
          (
            parseFloat(localStorage.getItem("temp_upgraded")) +
            parseFloat(localStorage.getItem("expedited")) +
            parseFloat(localStorage.getItem("shipping_price")) +
            parseFloat(localStorage.getItem("product_price"))
          ).toFixed(2)
        );
        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)
        );
        this.props.push();
      })
      .catch(error=>{
        console.log("error",error)
        self.setState({ loader: false });
        self.setState({
          show_error: true,
          error: "Something Wrong... Please try Again"
        });
      })
  };

  render() {
    return (
      <div className="popup">
        {!this.state.pay && (
          <div className="popup_inner">
            <div className="popup_inner_first_div">
              <div className="popup_inner_first_div_1">
                <a
                  onClick={() => {
                    
                    this.props.push();
                  }}
                >
                  X
                </a>
              </div>
            </div>
            <div className="popup_inner_first_div_2">
              <p className="popup_para_one">UPGRADE</p>
              <p className="popup_para_two">Available:</p>
              <div className="popup_para_two_img_div1">
                <div className="popup_para_two_img_div2">
                  <img
                    src={api.image_path + "product_image.png"}
                    alt=""
                    title=""
                    className="product_orientation_popup_img"
                  />
                </div>
              </div>
              <p className="popup_para_three">
                Upgrade to get complete Baby Starter Pack.
              </p>
              <div className="popup_price_div">
                + {"$" + localStorage.getItem("temp_upgraded")}
              </div>
              <p>&</p>
              <p>Receive</p>
              <p>
                <span className="pupup_discount_price_span">Standard Mail</span>{" "}
                Expedited Parcel
              </p>
              <div className="popup_price_div popup_price_div1">
                + {"$" + localStorage.getItem("expedited")}
              </div>
              <div className="popup_para_two_button_div1">
                <div className="popup_para_two_img_div2">
                  <button
                    onClick={() => {
                      this.handleUpgrade();
                    }}
                    style={{ marginBottom: 15, width: "110%" }}
                  >
                    Upgrade-Add {"$" + localStorage.getItem("upgraded_price")}
                  </button>
                </div>
              </div>
            </div>
          </div>
        )}
      </div>
    );
  }
}

class product_orientation1 extends Component {
  constructor(props) {
    super(props);
    this.state = {
      showPopup: false,
      loader: false,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      open: false,
      alertmsg: "",
      pay: false,
      expedited: "",
      original_prize: "",
      product_id: "",
      product_name: "",
      product_price: "",
      shipping_price: "",
      temp_upgraded: "",
      total_upgraded_price: "",
      tax: ""
    };
    if (
      localStorage.getItem("current_state") !== "product_orientation1" ||
      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 = {

    // };
    this.handleClose.bind(this);
  }

  componentDidMount = () => {
    let get_product_info = {
      action: "get_product_price",
      product_id: 2
    };
    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,
          expedited: response.data.product_data.expedited,
          original_prize: 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,
          temp_upgraded: response.data.product_data.upgraded,
          tax: response.data.product_data.tax
        });
        localStorage.setItem("expedited", response.data.product_data.expedited);
        localStorage.setItem(
          "product_id",
          response.data.product_data.product_id
        );
        localStorage.setItem(
          "product_name",
          response.data.product_data.product_name
        );
        localStorage.setItem(
          "product_price",
          response.data.product_data.product_price
        );
        localStorage.setItem(
          "shipping_price",
          response.data.product_data.shipping_price
        );
        localStorage.setItem(
          "temp_upgraded",
          response.data.product_data.upgraded
        );
        // parseFloat(localStorage.getItem("temp_upgraded"))+parseFloat(localStorage.getItem("expedited"))+parseFloat(localStorage.getItem("shipping_price"))+parseFloat(localStorage.getItem("product_price"))
        localStorage.setItem(
          "upgraded_price",
          parseInt(response.data.product_data.upgraded) +
            parseInt(response.data.product_data.expedited)
        );
        // console.log(
        //   "upgraded",
        //   (
        //     parseFloat(localStorage.getItem("temp_upgraded")) +
        //     parseFloat(localStorage.getItem("expedited")) +
        //     parseFloat(localStorage.getItem("shipping_price")) +
        //     parseFloat(localStorage.getItem("product_price"))
        //   ).toFixed(2)
        // );
        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)
        );
      })
      .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 });
  };
  togglePopup() {
    this.setState({
      showPopup: !this.state.showPopup
    });
  }
  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 &&
            !this.state.pay && (
              <div className="white_container wc_fixheightdiv">
                <div className="product_orientation_div">
                  <div className="text-center product_orientation_img_div">
                    <img
                      src={api.image_path + "book-box-img2.jpg"}
                      alt=""
                      title=""
                      className="product_orientation_img1 "
                    />
                  </div>
                </div>
                <div className="product_orientation_footer_div">
                  <p className="product_orientation1_para">
                    BABY'S BOOK <span className="">of Firsts!</span>
                  </p>
                  <p className="page-txt product_orientation_footer_para">
                    We thought of all the most precious memories and moments
                    your baby is about to have, and made them into a beautiful
                    book for you to keep forever!
                  </p>
                  <ul className="product_orientation_ul">
                    <li>Hard cover</li>
                    <li>48 full colour pages</li>
                    <li>High quality print</li>
                    <li>Beautiful illustrations</li>
                    <li>
                      First ever to include "Baby's how-to's" infographics
                    </li>
                    <li>Easy to use</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_prize}
                        </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
                      className="btnorder"
                      onClick={this.togglePopup.bind(this)}
                    >
                      Order Now
                    </button>
                    {this.state.showPopup ? (
                      <Popup
                        text="Close Me"
                        closePopup={this.togglePopup.bind(this)}
                        push={() => {
                          localStorage.setItem(
                            "current_state",
                            "billing_address"
                          ),
                            this.props.history.push("/billing_address");
                        }}
                        /* payment={} */
                      />
                    ) : null}
                  </div>
                </div>
                <div className="m_t10">
                  <ul className="dot_ul m-auto">
                    <li>
                      <a
                        onClick={() => {
                          localStorage.setItem(
                            "current_state",
                            "product_orientation"
                          ),
                            this.props.history.push("/product_orientation");
                        }}
                      />
                    </li>
                    <li className="active">
                      <a
                        onClick={() => {
                          localStorage.setItem(
                            "current_state",
                            "product_orientation1"
                          ),
                            this.props.history.push("/product_orientation1");
                        }}
                      />
                    </li>
                    <li>
                      <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_orientation"
                      ),
                        this.props.history.push("/product_orientation");
                    }}
                  >
                    <img
                      src={api.image_path + "prev_arrow.jpg"}
                      alt=""
                      title=""
                      width="30"
                    />
                  </a>
                </div>
                <div className="text-right next-arrow">
                  <a
                    onClick={() => {
                      localStorage.setItem(
                        "current_state",
                        "product_orientation2"
                      ),
                        this.props.history.push("/product_orientation2");
                    }}
                  >
                    <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_orientation1;
