import React, { Component } from "react";
import Drawer from "./drawer";
import cookie from "react-cookies";
import CircularProgress from "@material-ui/core/CircularProgress";
import api from './api/api'
class information extends Component {
  constructor(props) {
    super(props);
    if (
      localStorage.getItem("current_state") !== "info")  {
        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>
              {this.state.prev_page === "signup" && (
                <p className="  page-txt_info mt_10">
                  <span className="subtitle_info">
                    We collect your first name, last name and email address as
                    the most basic account identifiers and default means for you
                    to access your account and us to contact you.
                  </span>{" "}
                </p>
              )}
              
              {this.state.prev_page === "set_relation" && (
                <p className="  page-txt_info mt_10">
                  <span className="subtitle_info">
                    This determines which programs to present to you based on
                    your role in a family and as a precursor to formatting the
                    next stage in the registration process.
                  </span>{" "}
                </p>
              )}
              {this.state.prev_page === "user_birthdate" && (
                <p className=" page-txt_info mt_10">
                  <span className="subtitle_info">
                    Some contests, freebies and other programs are restricted
                    based on age, while some require age as a prerequisite for
                    participation.
                  </span>
                </p>
              )}
              {this.state.prev_page === "skill_test_questions" && (
                <p className=" page-txt_info mt_10">
                  <span className="subtitle_info">
                    Canadian Contest Law requires that winners not be selected
                    purely based on luck. To meet this requirement, we ask a
                    skill testing question. While some leave this for only the
                    winners to answer, we want to announce the winners as soon
                    as possible. The solution? We ask everyone a skill testing
                    question up front for all of our contests. We’ll record your
                    answer and when the winner(s) is drawn, we’ll make the
                    announcement with no delay.
                  </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={() => {
                      if (this.state.prev_page === "signup") {
                        localStorage.setItem("current_state", "signup");
                        this.props.history.push("/signup_step-1");
                      } else if (this.state.prev_page === "set_relation") {
                        localStorage.setItem("current_state", "set_relation");
                        this.props.history.push("/set_relation");
                      }else if (this.state.prev_page === "user_birthdate") {
                        localStorage.setItem("current_state", "user_birthdate");
                        this.props.history.push("/user_birthdate");
                      }
                      else{
                        localStorage.setItem("current_state", "skill_test_questions");
                        this.props.history.push("/skill_test_questions");
                      }
                    }}
                    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 information;
