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'
class nocontest_screen extends Component {
  constructor(props) {
    super(props);
    if (
      localStorage.getItem("current_state") !== "no_freebie" )  {
        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: "",
      product_orientation: false,
      past_member:localStorage.getItem("past_member")=="yes"?true:false,
    };
    this.link_contest = this.link_contest.bind(this);
    this.handleClose.bind(this);
  }
  handleClose = () => {
    this.setState({ open: false });
  };
  link_contest = () => {
    var self = this;
    var get_contest = {
      action: "getcontest",
      user_id: cookie.load("user_id"),
      is_active: localStorage.getItem("login_is_active")
    };
    console.log("get_contest", get_contest);
    this.setState({ loader: true });
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(get_contest)
      })
      .then(response => {
        console.log("response", response);
        if (response.data) {
          if (response.data.length > 0) {
            
            let contest = [];
            response.data.forEach(element => {
              console.log("element", element);
              if (element.direct == 0) {
                localStorage.setItem(
                  "current_state",
                  "related_entrant_orientation"
                );
                self.props.history.push("/related_entrant_orientation");
              } else {
                self.setState({ push_contest: true });
              }
              if (element.is_contest == 1) {
                contest.push(element);
                self.setState({ is_contest: true, contest: contest });
              }
            });
            console.log("contest", contest);
            if (self.state.push_contest) {
              localStorage.setItem(
                "contest_array",
                JSON.stringify(response.data)
              );
              localStorage.setItem(
                "contest_detail",
                JSON.stringify(response.data[0])
              );
              console.log(JSON.parse(localStorage.getItem("contest_array")));
              localStorage.setItem("current_state", "contest");
              localStorage.setItem("contest_index", 0);

              if (
                typeof localStorage.getItem("need_to_claim") !== undefined &&
                localStorage.getItem("need_to_claim") !== "undefined" &&
                localStorage.getItem("need_to_claim") !== "null" &&
                localStorage.getItem("need_to_claim") !== null
              ) {
                console.log(JSON.parse(localStorage.getItem("need_to_claim")));

                localStorage.setItem(
                  "need_to_claim_detail",
                  JSON.stringify(
                    JSON.parse(localStorage.getItem("need_to_claim"))[0]
                  )
                );
                localStorage.setItem("current_state","won"),
                this.props.history.push("/won");
              } else {
                if (contest.length > 0) {
                  localStorage.setItem("current_state","contest"),
                  self.props.history.push(
                    "/Contest/" +
                      response.data[0]._id +
                      "/" +
                      cookie.load("user_id")
                  );
                } else {
                  localStorage.setItem("current_state","no_contest"),
                  self.props.history.push("/no_contest");
                }
              }
            }
          } else {
            self.setState({ loader: false });
            localStorage.setItem("current_state","no_contest"),
            self.props.history.push("/no_contest");
          }
        } else {
          self.setState({ loader: false });
          localStorage.setItem("current_state","no_contest"),
          self.props.history.push("/no_contest");
        }
      })
      .catch(error=>{
        console.log("error",error)
        self.setState({ loader: false });
        self.setState({
          alertmsg: true,
          open: "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_t20 text-center">
            <img
              src={api.image_path+"family_freebibes.jpg"}
              alt=""
              title=""
              className="freebie3_img"
            />
          </div>
        )}
        <div className="inner_container2 m_t20 ">
          <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 nocontest_white_container">
            <div className="new_member_orientation_contest_div">
              <div className=" text-center">
                <img
                  src={api.image_path+"new_member_freebies.jpg"}
                  alt=""
                  title=""
                  className="max-w-100 new_mamaber_contest_img"
                />
              </div>
             </div> 
             <div className="nocontest_freebietext_div">
               <div className="nocontest_txtdiv mt20">
                 <b>Freebies are curated for your family's needs.</b>
               </div>
               <p className="page-txt">
                If you see a Freebie and want it, press Redeem and you'll be auto-enrolled to receive it. 
               </p>
               <p className="page-txt nocontext_para2">
                Unfortunately there are no Freebies that match your family's needs right now.  
               </p>
               <p className="page-txt nocontext_para2">  
                Please check back later. We'll send you a message when some become available. 
               </p>
              </div> 
              <div
                  className="mainactive_later infobtn_div mt70 mb70 nocontest_btn"
                  style={{ cursor: "pointer" }}
                >
                  <a
                    onClick={() => this.link_contest()}
                    className="active_later active_later_info"
                  >
                    <span>
                      Next{" "}
                      <i>
                        <img
                          src={api.image_path+"next_arrowBkup.jpg"}
                          alt=""
                          title=""
                          width="30"
                          className="info_btnicon"
                        />
                      </i>
                  </span>
                  </a>
                </div>
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default nocontest_screen;
