import React, { Component } from "react";
import Drawer from "./drawer";
import api from './api/api'
import CircularProgress from "@material-ui/core/CircularProgress";
import cookie from 'react-cookies'
class informationAddress extends Component {
  constructor(props) {
    super(props);
    if (
      localStorage.getItem("current_state") !== "information" )  {
        this.props.history.push("/menu_page");
      }
    console.log("this", this.props);
    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,
      prev_page: localStorage.getItem("info")
    };
    this.handleClose.bind(this);
  }
  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div className="page-bg">
        <center>
          {this.state.is_active && <Drawer prop={this.props} />}
          {this.state.loader && (
            <CircularProgress
              size={100}
              style={{ color: "black", marginTop: "17%" }}
            />
          )}
        </center>
        {!this.state.loader && (
          <div className="fac_btn_arrrow">
          </div>
        )}
        <div className="inner_container_info m_t20_info">
          {!this.state.loader && (
            <div className="white_container_info">
              <div className="welcome_txt_info m_t10">
                <p>How is this information used?</p>
              </div>
              
                <p className="page-txt  page-txt_info mt_10">
                  <span className="subtitle_info">
                    Your mailing address helps us in several ways:
                    <br /> 1. To know which offers, deals and other programs are
                    relevant for you.
                    <br />2. Where relevant, for freebies, contest and other
                    programs to ensure an accurate full mailing address is on
                    file so that this information will not need to be collected
                    repeatedly.
                    <br />3. So that when you place orders or redeem prizes, an
                    address will already be on file.
                    <br />4. Where participation in programs are geo-restricted,
                    to ensure your qualification for them.
                  </span>{" "}
                </p>
              
              
              <div className="welcome_img text-center info_footerdiv">
                <img
                  src={api.image_path+"info_img.png"}
                  alt=""
                  title=""
                  className="freebie2_img info_logo_img"
                />
                <div
                  className="mainactive_later infobtn_div mt70"
                  style={{ cursor: "pointer" }}
                >
                  <a
                    onClick={() => {
                      localStorage.getItem("info")==="address"?localStorage.setItem("current_state", "full_mailing_address"):localStorage.setItem("current_state", "edit_address")
                      localStorage.getItem("info")==="address"? this.props.history.push("/signup_step-2"): this.props.history.push("/edit_address")}}
                    className="active_later active_later_info"
                  >
                    <span>
                       <i>
                        <img
                          src={api.image_path+"prev_arrowBkup.jpg"}
                          alt=""
                          title=""
                          width="30"
                          className="info_btnicon"
                        />
                       </i>
                       <span className="btn_infoi">
                      Back{" "}
                     </span>
                    </span>
                  </a>
                </div>
              </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default informationAddress;
