import React, { Component } from "react";
import Drawer from "./drawer";
import Countdown from "react-countdown-now";
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 product_orientation3 extends Component {
  constructor(props) {
    super(props);
    if (localStorage.getItem("current_state") !== "product_orientation4") {
      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: "",
      contest: [],
      id: "",
      length: "",
      tax: "",
      refund: false,
      product_orientation: false,
      past_member: localStorage.getItem("past_member") == "yes" ? true : false
    };
    this.handleClose.bind(this);
    this.handleRefund.bind(this);
  }
  handleClose = () => {
    this.setState({ open: false });
  };

  componentDidMount() {
    let contest_detail = localStorage.getItem("need_to_claim_detail");
    // console.log("contest_detail", JSON.parse(contest_detail));
    // console.log(JSON.parse(localStorage.getItem("need_to_claim")).length);
    // this.setState({
    //   length: JSON.parse(localStorage.getItem("need_to_claim")).length
    // });
    this.setState({ contest: JSON.parse(contest_detail), id: 0 });
    let get_product_info = {
      action: "get_product_price",
      product_id: 1,
      claim_data: {
        user_id: cookie.load("user_id")
      }
    };
    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);
        console.log("contest_detail", response.data.need_to_claim);
        console.log(response.data.need_to_claim.length);
        this.setState({
          length: response.data.need_to_claim.length,
          contest: response.data.need_to_claim[0]
        });
        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", response.data.product_data.product_name);
        localStorage.setItem(
          "product_price",
          0
        );
        localStorage.setItem(
          "shipping_price",
          response.data.product_data.shipping_price
        );
        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("tax"))
        console.log("total_price",(total_price).toFixed(2))
        localStorage.setItem(
          "total_price",
          (total_price).toFixed(2)
        );
        // 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"
        });
      });
  }

  handleRefund = () => {
    this.setState({ loader: true });
    console.log("handleUserData");
    let self = this;

    let editJson = {
      action: "winner_prize_claim",
      user_id: cookie.load("user_id"),
      claim_for: cookie.load("claim_for"),
      product_id:localStorage.getItem("product_id"),
      refund_flag:1
    };
    console.log("editJson", editJson);
    axios
      .request({
        url: api.react_request,
        method: "POST",
        data: JSON.stringify(editJson)
      })
      .then(function(response) {
        if (response.status !=="failed") {
        self.setState({ loader: false });
        console.log("response", response);
        self.setState({ refund: true });
        }
        else{
          self.setState({ loader: false });
          self.setState({
            open: true,
            alertmsg: response.data.claim_response.message
          });
        }
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false });
        self.setState({
          open: true,
          alertmsg: "Something Wrong... Please try again"
        });
      });
  };

  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+"book-box-img5.jpg"}
                    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 style={{ textAlign: "center" }}>
                      <span className="discount_price_span">
                        {"$" + this.state.original_price}
                      </span>WON!
                    </p>
                  </div>
                  <div className="product_orientation_price_div_two product_orientation3_price_div2">
                    <p>Shipping:{"$" + this.state.shipping_price}</p>
                  </div>
                </div>
                <div className="product_orientation_orderbtn_div">
                  <button
                    onClick={() => {
                      !this.state.refund?localStorage.setItem("current_state", "billing_address"):localStorage.setItem("current_state", "product_orientation4"),
                      !this.state.refund
                        ? this.props.history.push("/billing_address")
                        : "";
                    }}
                    className="btnorder"
                  >
                    Redeem
                    <p style={{ textAlign: "center" }}>
                      <Countdown
                        date={
                          new Date(this.state.contest.end_prize_accept_date)
                        }
                      />
                    </p>
                  </button>
                </div>
                <div
                //style={{ display: "none" }}
                >
                {!this.state.refund && (
                    <div className="po4_infodiv">
                      <p>
                        Already bought?
                        <a
                          onClick={() => {
                            this.handleRefund();
                          }}
                          className="po4_infodiv_anchor"
                        >
                          Click here if you prefer a refund
                        </a>
                      </p>
                    </div>
                  )}
                  {this.state.refund && (
                    <div className="po4_infodiv po4_infoseconddiv">
                      <p>We've been notified and will contact you by email.</p>
                    </div>
                  )}
                </div>
              </div>
              
            </div>
          )}
          {!this.state.loader && (
            <div className="freebie_footer_div text-center">
              <a
                className="skip_link"
                onClick={() => {
                  localStorage.setItem("current_state", "menu_page"),
                  this.props.history.push("/menu_page");
                }}
              >
                {!this.state.refund ? "Skip" : "Next"}
              </a>
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default product_orientation3;
