import React, { Component } from "react";
import Drawer from "./drawer";
import FlatButton from "material-ui/FlatButton";
import Dialog from "material-ui/Dialog";
import axios from "axios";
import CircularProgress from "@material-ui/core/CircularProgress";
import cookie from 'react-cookies'
import api from "./api/api";
// let freebies = [];
// let contest = [];
// let entered_contest = [];
// let lend_a_hand = [];
class menu_page extends Component {
  constructor(props) {
    super(props);
    if (
      // localStorage.getItem("current_state") !== "menu_page" ||
      cookie.load("user_id") == "" ||
      cookie.load("user_id") == "undefined" ||
      typeof cookie.load("user_id") == undefined ||
      !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 = {
      loader: false,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      open: false,
      alertmsg: "",
      is_perks: true,
      no_contest: false,
      is_contest: false,
      is_freebies: false,
      freebies: [],
      contest: [],
      lend_a_hand: [],
      entered_contest: [],
      is_packages: true,
      is_lend_a_hand: false,
      is_entered_contest: false,
      is_profile: true
    };
    this.handleClose.bind(this);
  }

  componentDidMount = () => {
    let self = this;
    this.setState({ loader: true });
    var get_contest = {
      action: "getcontest",
      user_id: cookie.load("user_id"),
      is_active: 1
    };
    console.log("get_contest", get_contest);

    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 freebies = [];
            let contest = [];
            let lend_a_hand = [];
            let entered_contest = [];

            response.data.forEach(element => {
              console.log("element", element);

              if (element.is_contest == 0) {
                freebies.push(element);
                self.setState({ is_freebies: true, freebies: freebies });
              } else {
                if (element.direct == 0) {
                  lend_a_hand.push(element);
                  self.setState({
                    is_lend_a_hand: true,
                    lend_a_hand: lend_a_hand
                  });
                }
                if (element.has_enter == 0) {
                } else {
                  entered_contest.push(element);
                  self.setState({
                    is_entered_contest: true,
                    entered_contest: entered_contest
                  });
                }
                contest.push(element);
                self.setState({ is_contest: true, contest: contest });
              }
            });
            console.log("freebies", freebies);
            console.log("contest", contest);
            console.log("entered_contest", entered_contest);
            console.log("lend_a_hand", lend_a_hand);
            self.setState({ loader: false });
          } else {
            self.setState({ loader: false });
          }
        } else {
          self.setState({ loader: false });
        }
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false,alertmsg:"Something Wrong. Please try again later...",open:true });
      });
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div className="page-bg">
        <center>{this.state.is_active && <Drawer prop={this.props} />}</center>
        <div className="inner_container2 m_t20 ">
          <div className="container-fluid">
            {this.state.loader && (
              <CircularProgress
                size={100}
                style={{ color: "black", marginTop: "17%" }}
              />
            )}
          </div>
          <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>
              <div className="manu_page_headerdiv">
                {this.state.is_contest && (
                  <div
                    className="mainactive_later mt70"
                    style={{ cursor: "pointer" }}
                  >
                    <a
                      onClick={() => {
                        localStorage.setItem(
                          "contest_array",
                          JSON.stringify(this.state.contest)
                        );
                        localStorage.setItem(
                          "contest_detail",
                          JSON.stringify(this.state.contest[0])
                        );
                        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 {
                          localStorage.setItem("current_state","contest"),
                          this.props.history.push(
                            "/Contest/" +
                              this.state.contest[0]._id +
                              "/" +
                              cookie.load("user_id")
                          );
                        }
                      }}
                      className="menu_page_active_later active_later_menu new_member_anchor"
                    >
                      <span>
                        <img
                          src={api.image_path+"menu-icon-contest.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Contests{" "}
                        <i>
                          <img
                            src={api.image_path+"next_arrowBkup.jpg"}
                            alt=""
                            title=""
                            width="25"
                            className="menupage_nextarrow"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {this.state.is_contest && (
                  <div className="menu_page_btndiv">
                    {this.state.is_entered_contest && (
                      <button
                        onClick={() => {
                          localStorage.setItem(
                            "contest_array",
                            JSON.stringify(this.state.entered_contest)
                          );
                          localStorage.setItem(
                            "contest_detail",
                            JSON.stringify(this.state.entered_contest[0])
                          );
                          localStorage.setItem("contest_index", 0);
                          localStorage.setItem("current_state","contest"),
                          this.props.history.push(
                            "/Contest/" +
                              this.state.entered_contest[0]._id +
                              "/" +
                              cookie.load("user_id")
                          );
                        }}
                        className="btn_enteredcontest"
                      >
                        Entered Contest
                      </button>
                    )}
                    {!this.state.is_entered_contest && (
                      <button className="btn_enteredcontest btn_enteredcontest_second">
                        Entered Contest
                      </button>
                    )}
                    &nbsp;&nbsp;
                    {this.state.is_lend_a_hand && (
                      <button
                        onClick={() => {
                          localStorage.setItem(
                            "contest_array",
                            JSON.stringify(this.state.lend_a_hand)
                          );
                          localStorage.setItem(
                            "contest_detail",
                            JSON.stringify(this.state.lend_a_hand[0])
                          );
                          localStorage.setItem("contest_index", 0);
                          localStorage.setItem("current_state","contest"),
                          this.props.history.push(
                            "/Contest/" +
                              this.state.lend_a_hand[0]._id +
                              "/" +
                              cookie.load("user_id")
                          );
                        }}
                        className="btn_lend"
                      >
                        Lend a Hand
                      </button>
                    )}
                    {!this.state.is_lend_a_hand && (
                      <button className="btn_lend btn_enteredcontest_second">
                        Lend a Hand
                      </button>
                    )}
                  </div>
                )}
                {!this.state.is_contest && (
                  <div
                    className="mainactive_later mt70"
                    style={{ cursor: "pointer" }}
                  >
                    <a className="menu_page_active_later active_later_menu new_member_anchor menupage_activelater_second">
                      <span>
                        <img
                          src={api.image_path+"menu-icon-gray-contest.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Contests{" "}
                        <i>
                          <img
                            src={api.image_path+"next_btngrey.png"}
                            alt=""
                            title=""
                            width="35"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {!this.state.is_contest && (
                  <div className="menu_page_btndiv">
                    {this.state.is_entered_contest && (
                      <button
                        onClick={() => {
                          localStorage.setItem(
                            "contest_array",
                            JSON.stringify(this.state.entered_contest)
                          );
                          localStorage.setItem(
                            "contest_detail",
                            JSON.stringify(this.state.entered_contest[0])
                          );
                          localStorage.setItem("contest_index", 0);
                          localStorage.setItem("current_state","contest"),
                          this.props.history.push(
                            "/Contest/" +
                              this.state.entered_contest[0]._id +
                              "/" +
                              cookie.load("user_id")
                          );
                        }}
                        className="btn_enteredcontest"
                      >
                        Entered Contest
                      </button>
                    )}
                    {!this.state.is_entered_contest && (
                      <button className="btn_enteredcontest btn_enteredcontest_second">
                        Entered Contest
                      </button>
                    )}
                    &nbsp;&nbsp;
                    {this.state.is_lend_a_hand && (
                      <button
                        onClick={() => {
                          localStorage.setItem(
                            "contest_array",
                            JSON.stringify(this.state.lend_a_hand)
                          );
                          localStorage.setItem(
                            "contest_detail",
                            JSON.stringify(this.state.lend_a_hand[0])
                          );
                          localStorage.setItem("contest_index", 0);
                          localStorage.setItem("current_state","contest"),
                          this.props.history.push(
                            "/Contest/" +
                              this.state.lend_a_hand[0]._id +
                              "/" +
                              cookie.load("user_id")
                          );
                        }}
                        className="btn_lend"
                      >
                        Lend a Hand
                      </button>
                    )}
                    {!this.state.is_lend_a_hand && (
                      <button className="btn_lend btn_enteredcontest_second">
                        Lend a Hand
                      </button>
                    )}
                  </div>
                )}
                {this.state.is_freebies && (
                  <div
                    className="mainactive_later mt35"
                    style={{ cursor: "pointer" }}
                  >
                    <a
                      onClick={() => {
                        localStorage.setItem(
                          "contest_array",
                          JSON.stringify(this.state.freebies)
                        );
                        localStorage.setItem(
                          "contest_detail",
                          JSON.stringify(this.state.freebies[0])
                        );
                        localStorage.setItem("contest_index", 0);
                        localStorage.setItem("current_state","contest"),
                        this.props.history.push(
                          "/Contest/" +
                            this.state.freebies[0]._id +
                            "/" +
                            cookie.load("user_id")
                        );
                      }}
                      className="menu_page_active_later active_later_menu new_member_anchor"
                    >
                      <span>
                        <img
                          src={api.image_path+"menu-icon-freebies.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Freebies{" "}
                        <i>
                          <img
                            src={api.image_path+"next_arrowBkup.jpg"}
                            alt=""
                            title=""
                            width="25"
                            className="menupage_nextarrow"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {!this.state.is_freebies && (
                  <div
                    className="mainactive_later mt35"
                    style={{ cursor: "pointer" }}
                  >
                    <a className="menu_page_active_later active_later_menu new_member_anchor menupage_activelater_second">
                      <span>
                        <img
                          src={api.image_path+"menu-icon-gray-freebies.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Freebies{" "}
                        <i>
                          <img
                            src={api.image_path+"next_btngrey.png"}
                            alt=""
                            title=""
                            width="25"
                            className="menupage_nextarrow"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {this.state.is_perks && (
                  <div
                    className="mainactive_later mt60"
                    style={{ cursor: "pointer" }}
                  >
                    <a
                      onClick={() => {
                        window.open("https://family.one/perks/", "_blank");
                      }}
                      className="menu_page_active_later active_later_menu  new_member_anchor"
                    >
                      <span>
                        <img
                          src={api.image_path+"menu-icon-perks.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Perks
                        {/* <span style={{ color: "white" }}>lml</span> */}{" "}
                        <i>
                          <img
                            src={api.image_path+"next_arrowBkup.jpg"}
                            alt=""
                            title=""
                            width="25"
                            className="menu_page_img_new"
                            
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {!this.state.is_perks && (
                  <div
                    className="mainactive_later mt60"
                    style={{ cursor: "pointer" }}
                  >
                    <a className="menu_page_active_later active_later_menu  new_member_anchor menupage_activelater_second">
                      <span>
                        <img
                          src={api.image_path+"menu-icon-gray-perks.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Perks
                        {/* <span style={{ color: "#cccccc" }}>lml</span> */}{" "}
                        <i>
                          <img
                            src={api.image_path+"next_btngrey.png"}
                            alt=""
                            title=""
                            width="35"
                            className="menu_page_img_new"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {this.state.is_profile && (
                  <div
                    className="mainactive_later mt60"
                    style={{ cursor: "pointer" }}
                  >
                    <a
                      onClick={() => {
                        localStorage.setItem("current_state","edit"),
                        this.props.history.push("/edit");
                      }}
                      className="menu_page_active_later active_later_menu new_member_anchor"
                    >
                      <span>
                        <img
                          src={api.image_path+"menu-icon-profile.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img1"
                        />&nbsp;&nbsp; Profile
                        {/* <span style={{ color: "white" }}>m</span> */}{" "}
                        <i>
                          <img
                            src={api.image_path+"next_arrowBkup.jpg"}
                            alt=""
                            title=""
                            width="25"
                            className="menu_page_img_new1"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {!this.state.is_profile && (
                  <div
                    className="mainactive_later mt60"
                    style={{ cursor: "pointer" }}
                  >
                    <a className="menu_page_active_later active_later_menu new_member_anchor menupage_activelater_second">
                      <span>
                        <img
                          src={api.image_path+"menu-icon-gray-profile.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img1"
                        />&nbsp;&nbsp; Profile
                        {/* <span style={{ color: "white" }}>m</span> */}{" "}
                        <i>
                          <img
                            src={api.image_path+"next_btngrey.png"}
                            alt=""
                            title=""
                            width="25"
                            className="menu_page_img_new1"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {this.state.is_packages && (
                  <div
                    className="mainactive_later mt85"
                    style={{ cursor: "pointer", marginBottom: 20 }}
                  >
                    <a
                      onClick={() => {
                        {
                          localStorage.setItem("current_state","product_orientation"),
                          this.props.history.push("/product_orientation");
                        }
                      }}
                      className="menu_page_active_later active_later_menu1 new_member_anchor"
                    >
                      <span>
                        <img
                          src={api.image_path+"menu-icon-packages.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Packages{" "}
                        <i>
                          <img
                            src={api.image_path+"next_arrowBkup.jpg"}
                            alt=""
                            title=""
                            width="25"
                            className="menupage_nextarrow"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
                {!this.state.is_packages && (
                  <div
                    className="mainactive_later mt85"
                    style={{ cursor: "pointer", marginBottom: 20 }}
                  >
                    <a className="menu_page_active_later active_later_menu1 new_member_anchor menupage_activelater_second">
                      <span>
                        <img
                          src={api.image_path+"menu-icon-gray-packages.jpg"}
                          alt=""
                          title=""
                          className="menu_page_img"
                        />&nbsp;&nbsp; Packages{" "}
                        <i>
                          <img
                            src={api.image_path+"next_btngrey.png"}
                            alt=""
                            title=""
                            width="35"
                          />
                        </i>
                      </span>
                    </a>
                  </div>
                )}
              </div>
              <br />
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default menu_page;
