import React from "react";
// import { Button, Image } from "react-bootstrap";
import axios from "axios";
import CircularProgress from "@material-ui/core/CircularProgress";
import Countdown from "react-countdown-now";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import Drawer from "./drawer";
import api from "./api/api";
import cookie from "react-cookies";
import { isMobile, isIE, isEdge } from "react-device-detect";
import ReactHtmlParser, {
  processNodes,
  convertNodeToElement,
  htmlparser2
} from "react-html-parser";
let nextid;
class Contest extends React.Component {
  constructor(props) {
    super(props);
    console.log("this", this.props.match.params);
    console.log(cookie.load("user"));
    if (localStorage.getItem("current_state") !== "contest") {
      this.props.history.push("/menu_page");
    }
    var id = props.match.params.contest_id;
    console.log("id_", id);

    let social_user_id = [];
    let temp_id = cookie.load("user_id");
    social_user_id = temp_id.split("|");

    var userid = props.match.params.user_id;
    this.state = {
      user_id: userid,
      id: localStorage.getItem("contest_index"),
      contestId: id,
      contest: [],
      loader: false,
      open: false,
      alertmsg: "",
      social_user_id: social_user_id,
      googleplus_url: "",
      share_link: "",
      fb_url: "",
      twiter_url: "",
      arrows: true,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      contest_orientation: false,
      offer_orientation: false,
      two_weeks: false,
      two_days: false,
      days_left: "",
      contest_index:
        localStorage.getItem("contest_index") == null
          ? 0
          : localStorage.getItem("contest_index")
    };
    localStorage.setItem("contest_id", this.state.contestId);
    this.lastContest = this.lastContest.bind();
    this.changeContest = this.changeContest.bind();
    this.linkchange = this.linkchange.bind();
    this.prevContest = this.prevContest.bind();
    this.firstContest = this.firstContest.bind();
    this.getContest = this.getContest.bind();
    this.handleFb = this.handleFb.bind();
    this.handleTwitter = this.handleTwitter.bind();
    this.handleGPlus = this.handleGPlus.bind();
    this.handleContest = this.handleContest.bind();
    this.handleFreebie = this.handleFreebie.bind();
  }


  componentDidMount=()=>{
    let self = this;
    // Social Share link from api
    console.log(JSON.parse(localStorage.getItem("contest_detail"))._id)
    let contest_detail = JSON.parse(localStorage.getItem("contest_detail"));
    // console.log(contest_detail._id);
    
    self.setState({ loader: true });
    var get_link = {
      action: "get_contest_sharelink",
      contest_id: contest_detail._id,
      enter_link:
        window.location.origin +
        localStorage.getItem("pathname") +
        "?Contest/" +
        contest_detail._id +
        "/"
    };
    console.log("get_link", get_link);
    // this.setState({ loader: true });
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(get_link)
      })
      .then(response => {
        console.log("response", response);
        var date1 = new Date(
          JSON.parse(localStorage.getItem("contest_detail")).expiry_date.replace(/-/g, "/")
        );
        console.log("date1", date1);
        // self.setState({ loader: true });
        var date2 = new Date();
        var timeDiff = Math.abs(date1.getTime() - date2.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        console.log("diff", diffDays);
        if (diffDays > 14) {
          let date = [];
          let temp_date = date1.toDateString();
          date = temp_date.split(" ");
          console.log("date1", date[1] + " " + date[2] + " " + date[3]);
          self.setState({
            two_weeks: true,
            days_left: date[1] + " " + date[2] + " " + date[3]
          });
          console.log("diff");
        } else if (diffDays > 2) {
          self.setState({ two_days: true, days_left: diffDays });
          console.log("diff");
        } else {
          self.setState({ days_left: diffDays });
          console.log("diff");
        }
        let contest_detail = localStorage.getItem("contest_detail");
        console.log("contest_detail", JSON.parse(contest_detail));

        // self.setState({ contest: JSON.parse(contest_detail) });
        
        self.setState({
          fb_url:
            "http://www.facebook.com/sharer.php?u=" +
            response.data.share_link.facebook +
            "?refered_by_id=" +
            this.state.social_user_id
        });
        self.setState({
          twiter_url:
            "https://twitter.com/share?url=" +
            response.data.share_link.twitter +
            "?refered_by_id=" +
            this.state.social_user_id
        });
        self.setState({
          googleplus_url:
            "https://plus.google.com/share?url=" +
            response.data.share_link.google +
            "?refered_by_id=" +
            this.state.social_user_id
        });
        self.setState({
          share_link: response.data.share_link + this.state.social_user_id,
          
        });
        this.onload();

      })
      .catch(error => {
        console.log("error",error)
        self.setState({ loader: false });
        self.setState({
          open: true,
          alertmsg: "Something Wrong... Please try again later"
        });
      });
  }

  onload() {
    let self = this;
    console.log("this.props.match.params.user_id",this.props.match.params.user_id)
    console.log("cookie.load(user_id)",cookie.load("user_id"))
    if (this.props.match.params.user_id !== cookie.load("user_id")) {
      console.log(
        "this.props.match.params.user_id",
        this.props.match.params.user_id
      );
      let cname = [];
      let tempname = this.props.location.hash.trim();
      cname = tempname.split("=");

      cookie.save("user_id", this.props.match.params.user_id);
      cookie.save("refered_by_id", cname[1]);
      console.log("user_id", cookie.load("user_id"));
      console.log("refered_by_id", cookie.load("refered_by_id"));
      cookie.save("refered_contest_id", this.props.match.params.contest_id);
      this.props.history.push("/");
    } else if (
      typeof cookie.load("refered_contest_id") !== undefined &&
      cookie.load("refered_contest_id") !== "undefined" &&
      cookie.load("refered_contest_id") !== "null" &&
      cookie.load("refered_contest_id") !== null &&
      cookie.load("refered_contest_id")
    ) {
      console.log("here", cookie.load("refered_contest_id"));
      var getcontestinfo = {
        action: "getcontest",
        user_id: cookie.load("user_id"),
        is_active: localStorage.getItem("login_is_active"),
        contest_id: cookie.load("refered_contest_id")
      };
      console.log("getcontestinfo", getcontestinfo);
      axios
        .request({
          method: "POST",
          url: api.react_request,
          data: JSON.stringify(getcontestinfo)
        })
        .then(response => {
          console.log("response", response);
          if (response.data) {
            console.log("user_id", cookie.load("user_id"));
            if (response.data.length !== 0) {
              localStorage.setItem("contest_index",0)
              localStorage.setItem("contest_array",JSON.stringify(response.data))
              localStorage.setItem("contest_detail",JSON.stringify(response.data[0]))
              self.setState({ contest: response.data, loader: false, id: 0 });
              console.log("contest", self.state.contest);
            }
          } else {
            self.setState({ open: true, alertmsg: "Something wrong" });
          }
        })
        .catch(error => {
          self.setState({ loader: false });
          self.setState({
            open: true,
            alertmsg: "Something Wrong... Please try again later"
          });
        });
    } else {
      this.setState({ loader: true });

      console.log("user_id", cookie.load("user_id"));
      if (cookie.load("user_id")) {
        self.setState({
          contest: JSON.parse(localStorage.getItem("contest_array")),
          loader: false
        });
        if (
          localStorage.getItem("offer_orientation") === "0" &&
          JSON.parse(localStorage.getItem("contest_array"))[this.state.id]
            .is_contest === "0"
        ) {
          console.log("user_id", cookie.load("user_id"));
          self.setState({ offer_orientation: true });
          localStorage.setItem("current_state", "freebie1");
          self.props.history.push("/freebie1");
        } else if (localStorage.getItem("contest_orientation") !== "1") {
          console.log("user_id", cookie.load("user_id"));
          self.setState({ contest_orientation: true });
          if (
            JSON.parse(localStorage.getItem("contest_array"))[this.state.id]
              .is_contest === "1"
          ) {
            localStorage.setItem("current_state", "contest1");
            this.props.history.push("/contest1");
          }
        } else {
          console.log("user_id", cookie.load("user_id"));
          self.setState({ contest_orientation: false });
        }
        console.log("user_id", cookie.load("user_id"));

        console.log("contest_index", self.state.contest_index);
        console.log("contest_index", self.state.contest);
        if (localStorage.getItem("contest_orientation_index")) {
          self.setState({
            id: localStorage.getItem("contest_orientation_index")
          });
          localStorage.removeItem("contest_orientation_index");
        }
      }
    }
  }

  // Link facebook button with link
  handleFb = () => {
    window.open(this.state.fb_url, "_blank");
  };

  // Link twitter button with link
  handleTwitter = () => {
    window.open(this.state.twiter_url, "_blank");
  };

  // Link google plus button with link
  handleGPlus = () => {
    window.open(this.state.googleplus_url, "_blank");
  };

  lastContest = () => {
    console.log("hi");
    console.log("index", this.state.id);
    console.log("id", this.state.contest[this.state.id]._id);
    localStorage.setItem("current_state", "product_orientation"),
      localStorage.setItem("contest_index", this.state.id);
    localStorage.setItem("contest_id", this.state.contest[this.state.id]._id);
    this.props.history.push("/product_orientation");
  };

  prevContest = () => {
    let self = this;
    console.log("prevContest");
    this.setState({ id: this.state.id - 1 });
    console.log("index", this.state.id - 1);
    console.log("contestid", this.state.contest[this.state.id - 1]._id);
    localStorage.setItem("current_state", "contest"),
      localStorage.setItem("contest_index", this.state.id - 1);
    localStorage.setItem(
      "contest_id",
      this.state.contest[this.state.id - 1]._id
    );
    var date1 = new Date(
      this.state.contest[this.state.id - 1].expiry_date.replace(/-/g, "/")
    );
    var date2 = new Date();
    var timeDiff = Math.abs(date1.getTime() - date2.getTime());
    var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
    console.log("diff", diffDays);
    if (diffDays > 14) {
      let date = [];
      let temp_date = date1.toDateString();
      date = temp_date.split(" ");
      console.log("date1", date[1] + " " + date[2] + " " + date[3]);
      self.setState({
        two_weeks: true,
        days_left: date[1] + " " + date[2] + " " + date[3]
      });
      console.log("diff");
    } else if (diffDays > 2) {
      self.setState({ two_days: true, days_left: diffDays });
      console.log("diff");
    } else {
      self.setState({ days_left: diffDays });
      console.log("diff");
    }
    localStorage.setItem("current_state", "contest");
    this.props.history.push({
      pathname:
        "/Contest/" +
        this.state.contest[this.state.id - 1]._id +
        "/" +
        this.state.user_id
    });
  };

  firstContest = () => {
    let self = this;
    console.log("firstContest");
    // this.setState({ id: this.state.contest.length - 1 });

    localStorage.setItem("contest_index", this.state.contest.length - 1);
    localStorage.setItem(
      "contest_id",
      this.state.contest[this.state.contest.length - 1]._id
    );
    console.log(
      "this.state.contest_orientation",
      this.state.contest_orientation
    );
    if (this.state.contest_orientation) {
      console.log(
        "contest_orientation",
        this.state.contest[this.state.contest.length - 1]
      );
      if (
        this.state.contest[this.state.contest.length - 1].is_contest === "1"
      ) {
        console.log("contest_orientation start");
        localStorage.setItem("current_state", "contest1");
        this.props.history.push("/contest1");
      } else {
        let contest_id = this.state.contest[this.state.contest.length - 1]._id;
        console.log("r _id", contest_id);
        var date1 = new Date(
          this.state.contest[this.state.contest.length - 1].expiry_date.replace(/-/g, "/")
        );
        var date2 = new Date();
        var timeDiff = Math.abs(date1.getTime() - date2.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        console.log("diff", diffDays);
        if (diffDays > 14) {
          let date = [];
          let temp_date = date1.toDateString();
          date = temp_date.split(" ");
          console.log("date1", date[1] + " " + date[2] + " " + date[3]);
          self.setState({
            two_weeks: true,
            days_left: date[1] + " " + date[2] + " " + date[3]
          });
          console.log("diff");
        } else if (diffDays > 2) {
          self.setState({ two_days: true, days_left: diffDays });
          console.log("diff");
        } else {
          self.setState({ days_left: diffDays });
          console.log("diff");
        }
        this.setState({
          id: this.state.contest.length - 1,
          contestId: contest_id
        });
        localStorage.setItem("current_state", "contest");
        this.props.history.push({
          pathname:
            "/Contest/" +
            this.state.contest[this.state.contest.length - 1]._id +
            "/" +
            this.state.user_id
        });
      }
    } else {
      let contest_id = this.state.contest[this.state.contest.length - 1]._id;
      console.log("r _id", contest_id);
      var date1 = new Date(
        this.state.contest[this.state.contest.length - 1].expiry_date.replace(/-/g, "/")
      );
      var date2 = new Date();
      var timeDiff = Math.abs(date1.getTime() - date2.getTime());
      var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
      console.log("diff", diffDays);
      if (diffDays > 14) {
        let date = [];
        let temp_date = date1.toDateString();
        date = temp_date.split(" ");
        console.log("date1", date[1] + " " + date[2] + " " + date[3]);
        self.setState({
          two_weeks: true,
          days_left: date[1] + " " + date[2] + " " + date[3]
        });
        console.log("diff");
      } else if (diffDays > 2) {
        self.setState({ two_days: true, days_left: diffDays });
        console.log("diff");
      } else {
        self.setState({ days_left: diffDays });
        console.log("diff");
      }
      this.setState({
        id: this.state.contest.length - 1,
        contestId: contest_id
      });
      localStorage.setItem("current_state", "contest");
      localStorage.setItem("current_state", "contest");
      this.props.history.push({
        pathname:
          "/Contest/" +
          this.state.contest[this.state.contest.length - 1]._id +
          "/" +
          this.state.user_id
      });
    }

    // // }
  };
  changeContest = () => {
    let self = this;
    this.setState({loader:true})
    // console.log("contest_id", this.state.contest[0].is_contest);
    nextid = this.state.id;
    nextid++;
    localStorage.setItem("contest_index", nextid);
    localStorage.setItem("contest_id", this.state.contest[nextid]._id);
    console.log(
      "this.state.contest_orientation",
      this.state.contest_orientation
    );
    
    if (this.state.contest_orientation) {
      console.log("contest_orientation", this.state.contest[nextid]);
      if (this.state.contest[nextid].is_contest === "1") {
        console.log("contest_orientation start");
        localStorage.setItem("current_state", "contest1");
        this.setState({loader:false})
        this.props.history.push("/contest1");
      } else {
        let contest_id = this.state.contest[nextid]._id;
        console.log("r _id", contest_id);
        var date1 = new Date(
          this.state.contest[nextid].expiry_date.replace(/-/g, "/")
        );
        var date2 = new Date();
        var timeDiff = Math.abs(date1.getTime() - date2.getTime());
        var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
        console.log("diff", diffDays);
        if (diffDays > 14) {
          let date = [];
          let temp_date = date1.toDateString();
          date = temp_date.split(" ");
          console.log("date1", date[1] + " " + date[2] + " " + date[3]);
          self.setState({
            two_weeks: true,
            days_left: date[1] + " " + date[2] + " " + date[3]
          });
          console.log("diff");
        } else if (diffDays > 2) {
          self.setState({ two_days: true, days_left: diffDays });
          console.log("diff");
        } else {
          self.setState({ days_left: diffDays });
          console.log("diff");
        }
        this.setState({ id: nextid, contestId: contest_id });
        localStorage.setItem("current_state", "contest");
        this.setState({loader:false})
        this.props.history.push({
          pathname: "/Contest/" + contest_id + "/" + this.state.user_id
        });
      }
    } else {
      let contest_id = this.state.contest[nextid]._id;
      console.log("r _id", contest_id);
      var date1 = new Date(
        this.state.contest[nextid].expiry_date.replace(/-/g, "/")
      );
      var date2 = new Date();
      var timeDiff = Math.abs(date1.getTime() - date2.getTime());
      var diffDays = Math.ceil(timeDiff / (1000 * 3600 * 24));
      console.log("diff", diffDays);
      if (diffDays > 14) {
        let date = [];
        let temp_date = date1.toDateString();
        date = temp_date.split(" ");
        console.log("date1", date[1] + " " + date[2] + " " + date[3]);
        self.setState({
          two_weeks: true,
          days_left: date[1] + " " + date[2] + " " + date[3]
        });
        console.log("diff");
      } else if (diffDays > 2) {
        self.setState({ two_days: true, days_left: diffDays });
        console.log("diff");
      } else {
        self.setState({ days_left: diffDays });
        console.log("diff");
      }
      this.setState({ id: nextid, contestId: contest_id });
      localStorage.setItem("current_state", "contest");
      this.setState({loader:false})
      this.props.history.push({
        pathname: "/Contest/" + contest_id + "/" + this.state.user_id
      });
    }
  };
  linkchange = () => {
    this.setState({ loader: true });
    localStorage.setItem(
      "contest_detail",
      JSON.stringify(this.state.contest[this.state.id])
    );
    console.log("contest_id", this.state.contest[this.state.id]._id);
    localStorage.setItem("contest_id", this.state.contest[this.state.id]._id);
    localStorage.setItem(
      "contest_title",
      this.state.contest[this.state.id].contest_title
    );
    console.log(
      "hello linkchange",
      this.state.contest[this.state.id].is_phone_required
    );

    if (this.state.contest[this.state.id].has_enter == "1") {
      this.setState({ loader: false });
      localStorage.setItem("current_state", "share");
      this.props.history.push("/share");
    } else if (this.state.contest[this.state.id].contest_id == "22") {
      this.props.history.push("/similac1");
    } else {
      let child_ids = [];

      var self = this;

      if (
        typeof localStorage.getItem("child_data") !== undefined &&
        localStorage.getItem("child_data") !== "undefined" &&
        localStorage.getItem("child_data") !== "null" &&
        localStorage.getItem("child_data") !== null
      ) {
        console.log(
          "child_ids",
          JSON.parse(localStorage.getItem("child_data"))
        );
        JSON.parse(localStorage.getItem("child_data")).forEach(element => {
          let child_id = {};
          child_id.child_id = element.child_id;
          child_ids.push(child_id);
        });
        console.log("child_ids", child_ids);
      }

      if (self.state.contest[self.state.id].is_contest == "1") {
        console.log(
          "self.state.contest[self.state.id].is_phone_required",
          self.state.contest[self.state.id].is_phone_required
        );
        if (self.state.contest[self.state.id].is_phone_required == "1") {
          console.log("here");
          if (
            localStorage.getItem("phone_number") &&
            localStorage.getItem("phone_number").length > 9
          ) {
            console.log("here");
            if (self.state.contest[self.state.id].is_skill_required === "1") {
              console.log("here");
              if (
                localStorage.getItem("skill_test_question") === true ||
                localStorage.getItem("skill_test_question") === "true"
              ) {
                console.log("here");
                if (
                  self.state.contest[self.state.id].is_user_age_required == "1"
                ) {
                  console.log("here");
                  if (
                    localStorage.getItem("user_age_required") == true ||
                    localStorage.getItem("user_age_required") == "true"
                  ) {
                    self.setState({ loader: false });
                    localStorage.setItem("current_state", "share"),
                      self.props.history.push({ pathname: "/share" });
                    console.log("here");
                  } else {
                    console.log("here");
                    localStorage.setItem("current_state", "user_birthdate");
                    self.setState({ loader: false });
                    self.props.history.push({
                      pathname: "/user_birthdate"
                    });
                  }
                } else {
                  console.log("here");
                  self.setState({ loader: false });
                  localStorage.setItem("current_state", "share"),
                    self.props.history.push({ pathname: "/share" });
                }
              } else {
                console.log("here");
                self.setState({ loader: false });
                localStorage.setItem("current_state", "skill_test_questions");
                self.props.history.push({
                  pathname: "/skill_test_questions"
                });
              }
            } else {
              console.log("here");
              self.setState({ loader: false });
              localStorage.setItem("current_state", "share"),
                self.props.history.push({ pathname: "/share" });
            }
          } else {
            console.log("here");
            self.setState({ loader: false });
            localStorage.setItem("current_state", "phone_number");
            self.props.history.push({
              pathname: "/phone_number"
            });
          }
        } else if (self.state.contest[self.state.id].is_skill_required == "1") {
          console.log("here");
          if (
            localStorage.getItem("skill_test_question") == true ||
            localStorage.getItem("skill_test_question") == "true"
          ) {
            console.log("here");
            if (self.state.contest[self.state.id].is_user_age_required == "1") {
              console.log("here");
              if (
                localStorage.getItem("user_age_required") == true ||
                localStorage.getItem("user_age_required") == "true"
              ) {
                self.setState({ loader: false });
                localStorage.setItem("current_state", "share"),
                  self.props.history.push({ pathname: "/share" });
                console.log("here");
              } else {
                console.log("here");
                self.setState({ loader: false });
                localStorage.setItem("current_state", "user_birthdate");
                self.props.history.push({
                  pathname: "/user_birthdate"
                });
              }
            } else {
              console.log("here");
              self.setState({ loader: false });
              localStorage.setItem("current_state", "share"),
                self.props.history.push({ pathname: "/share" });
            }
          } else {
            console.log("here");
            self.setState({ loader: false });
            localStorage.setItem("current_state", "skill_test_questions");
            self.props.history.push({
              pathname: "/skill_test_questions"
            });
          }
        } else if (
          self.state.contest[self.state.id].is_user_age_required == "1"
        ) {
          console.log("here");
          if (
            localStorage.getItem("user_age_required") == true ||
            localStorage.getItem("user_age_required") == "true"
          ) {
            self.setState({ loader: false });
            localStorage.setItem("current_state", "share"),
              self.props.history.push({ pathname: "/share" });
            console.log("here");
          } else {
            console.log("here");
            self.setState({ loader: false });
            localStorage.setItem("current_state", "user_birthdate");
            self.props.history.push({
              pathname: "/user_birthdate"
            });
          }
        } else {
          console.log("here");
          self.setState({ loader: false });
          localStorage.setItem("current_state", "share"),
            self.props.history.push({ pathname: "/share" });
        }
      } else {
        self.setState({ loader: true });
        console.log("contest_id", self.state.contestId);
        localStorage.setItem("contest_id", self.state.contestId);
        var joinContestJson = {
          action: "join_contest",
          perk_image: "perk_img.jpg",
          fname: localStorage.getItem("first_name"),
          is_contest: "0",
          to_email: localStorage.getItem("user_email"),
          user_id: cookie.load("user_id"),
          refered_user_id: "email|"+cookie.load("refered_by_id"),
          child_ids: child_ids,
          is_social: 0,
          contest_id: localStorage.getItem("contest_id")
        };
        console.log("joinContestJson", joinContestJson);
        axios
          .request({
            method: "POST",
            url: api.react_request,
            data: JSON.stringify(joinContestJson)
          })
          .then(response => {
            console.log("response", response);
            console.log("contest", self.state.contest);
            if (response.data.status == "OK") {
              cookie.remove("refered_by_id", { path: "/" });
              cookie.remove("refered_contest_id", { path: "/" });
              console.log("contest_id", self.state.contestId);
              localStorage.setItem("contest_id", self.state.contestId);
              self.setState({ loader: false });
              console.log(
                "self.state.contest[self.state.id].is_contest",
                self.state.contest[self.state.id].is_contest
              );
              console.log("contest_id", self.state.contestId);
              localStorage.setItem("contest_id", self.state.contestId);
              localStorage.setItem("current_state", "social_share"),
                self.props.history.push("/SocialShare");
            } else {
              self.setState({ loader: false });
              self.setState({
                open: true,
                alertmsg: "Something Wrong... Please Try Again Later"
              });
            }
          })
          .catch(error => {
            console.log("error", error);
            self.setState({ loader: false });
            self.setState({
              open: true,
              alertmsg: "Something Wrong... Please Try Again Later"
            });
          });
      }
    }
  };

  handleClick = () => {
    let self = this;
    localStorage.setItem(
      "contest_detail",
      JSON.stringify(this.state.contest[this.state.id])
    );
    // if (typeof cookie.load("access_token") !== undefined &&
    // cookie.load("access_token") !== "undefined" &&
    // cookie.load("access_token") !== "null" &&
    // cookie.load("access_token") !== null &&
    // cookie.load("access_token")) {
    //   console.log("activated");
    localStorage.setItem("current_state", "social_share"),
      self.props.history.push("/SocialShare");
    // } else {
    //   console.log("not activated");
    //   self.setState({
    //     open: true,
    //     alertmsg: "Please Check Your Email To Activate Your Account"
    //   });
    //   console.log("not activated");
    // }
  };
  handleClose = () => {
    this.setState({ open: false });
  };

  getContest = () => {
    let self = this;
    let finalJson = {
      action: "getcontest",
      user_id: cookie.load("user_id"),
      is_active: localStorage.getItem("login_is_active")
    };
    console.log("finalJOSn", finalJson);
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(finalJson)
      })
      .then(response => {
        console.log("response", response);
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false });
        self.setState({
          open: true,
          alertmsg: "Something Wrong... Please Try Again Later"
        });
      });
  };

  handleContest = () => {
    console.log("here handleContest");
    localStorage.setItem("current_state", "contest1");
    this.props.history.push("/contest1");
  };
  handleFreebie = () => {
    console.log("here handleFreebie");
    localStorage.setItem("current_state", "freebie1");
    this.props.history.push("/freebie1");
  };

  render() {
    return (
      <div className="contest_pagebg">
        <center className="effewe">
          {this.state.is_active && <Drawer prop={this.props} />}
          <Dialog
            className="ds"
            style={{ overflowY: "auto" }}
            actions={
              <FlatButton
                label="Close"
                labelStyle={{ color: "#000" }}
                onClick={() =>
                  this.state.nocontest
                    ? (localStorage.setItem("current_state", "set_relation"),
                      this.props.history.push("/set_relation"))
                    : this.handleClose()
                }
              />
            }
            modal={false}
            open={this.state.open}
          >
            {this.state.alertmsg}
          </Dialog>
          {this.state.loader && (
            <center className="effeffwe">
              <CircularProgress
                size={100}
                style={{ color: "black", marginTop: "17%" }}
              />
            </center>
          )}
          {!this.state.loader &&
            this.state.contest.length > 0 &&(
              <div className="rowContainerContest rowContainerContestExt contest_header_div">
                {this.state.contest[this.state.id].is_contest == "1" && this.state.days_left &&(
                  <div className="row">
                    <div className="col-md-12">
                      {!this.state.two_days &&
                        !this.state.two_weeks && (
                          <h4>
                            Ends in:&nbsp;<span>
                              <Countdown
                                daysInHours={true}
                                date={
                                  new Date(
                                    this.state.contest[
                                      this.state.id
                                    ].expiry_date.replace(/-/g, "/")
                                  )
                                }
                                onComplete={() => this.getContest()}
                              />
                            </span>
                          </h4>
                        )}
                      {this.state.two_days &&
                        !this.state.two_weeks && (
                          <h4>
                            Ends in:&nbsp;<span>
                              {this.state.days_left + " days"}
                            </span>
                          </h4>
                        )}
                      {!this.state.two_days &&
                        this.state.two_weeks && (
                          <h4>
                            Ends on:&nbsp;<span>{this.state.days_left}</span>
                          </h4>
                        )}
                    </div>
                  </div>
                )}
                <div className="row contest_row">
                  <div className="col-md-6 contest_row1 contest_logodiv">
                    <img
                      src={
                        api.image_path +
                        this.state.contest[this.state.id].logo
                      }
                      className="contest_logo_img"
                    />
                  </div>
                  <div
                    className="col-md-6 contest_row2"
                    style={{
                      backgroundColor: this.state.contest[this.state.id]
                        .contest_title_background_color
                    }}
                  >
                    <h4>
                      {ReactHtmlParser(
                        this.state.contest[this.state.id].contest_title
                      )}
                    </h4>
                  </div>
                </div>
                <div className="row">
                  <div className="contest_image_div">
                    <img
                      src={
                        api.image_path + this.state.contest[this.state.id].image
                      }
                      className="contest_image"
                    />
                    {this.state.contest[this.state.id].is_contest == "1" && (
                      <div
                        onClick={() => {
                          this.handleContest();
                        }}
                        className="contest_image_second_img_div"
                      >
                        {/* contest-side-floating.jpg */}
                        <img
                          src={api.image_path + "contest-side-floating.jpg"}
                        />
                      </div>
                    )}
                    {this.state.contest[this.state.id].is_contest !== "1" && (
                      <div
                        onClick={() => {
                          this.handleFreebie();
                        }}
                        className="contest_image_second_img_div"
                      >
                        <img
                          src={api.image_path + "freebie-side-floating.jpg"}
                        />
                      </div>
                    )}
                  </div>
                </div>
                {this.state.contest[this.state.id].direct === 0 && (
                  <div className="row">
                    <p className="contest_para">
                      Share these freebie's to your friends & family
                    </p>
                  </div>
                )}

                <div className="row">
                  {this.state.contest[this.state.id].direct === 1 && (
                    <h4 style={{ color: "black", lineHeight: "23px" }}>
                      {ReactHtmlParser(
                        this.state.contest[this.state.id].contest_description
                      )}
                    </h4>
                  )}
                  {this.state.contest[this.state.id].direct === 0 && (
                    <div className="row socialshare_btndiv">
                      <a
                        onClick={() => {
                          this.handleFb();
                        }}
                      >
                        <img src={api.image_path + "fb1.png"} width="100px" />
                      </a>
                      <a
                        onClick={() => {
                          this.handleTwitter();
                        }}
                      >
                        <img
                          src={api.image_path + "twitter.png"}
                          width="100px"
                          style={{ paddingLeft: 3 }}
                        />
                      </a>&nbsp;
                      <a
                        onClick={() => {
                          this.handleGPlus();
                        }}
                      >
                        <img
                          src={api.image_path + "googleplus.png"}
                          width="100px"
                        />
                      </a>&nbsp;
                    </div>
                  )}
                  {this.state.contest[this.state.id].direct === 1 && (
                    <div>
                      <div className="nxt_preMob">
                        <img
                          src={api.image_path + "prev_arrow.jpg"}
                          width="40"
                          className="prev_contestMob"
                          style={this.state.id == 0 ? { display: "none" } : {}}
                          onClick={() =>
                            this.state.id == 0
                              ? this.firstContest()
                              : this.prevContest()
                          }
                        />

                        {this.state.contest[this.state.id].has_enter == "0" && (
                          <button
                            className="btnenter"
                            onClick={() => {
                              {
                                this.setState({ loader: true });
                                this.linkchange();
                              }
                            }}
                            style={{
                              backgroundColor: this.state.contest[this.state.id]
                                .contest_title_background_color
                            }}
                          >
                            {this.state.contest[this.state.id].is_contest ===
                            "1"
                              ? "Enter"
                              : "Redeem"}
                            {/* {this.state.contest[this.state.id].is_contest !==
                          "1" && <label>Redeem</label>} */}
                          </button>
                        )}
                        <img
                          src={api.image_path + "next_arrow.jpg"}
                          width="40"
                          className="next_contestMob"
                          onClick={() =>
                            this.state.contest.length - 1 == this.state.id
                              ? this.lastContest()
                              : this.changeContest()
                          }
                        />
                      </div>
                      <div>
                        {this.state.contest[this.state.id].has_enter == "1" &&
                          this.state.contest[this.state.id].is_contest ==
                            "1" && (
                            <button
                              className="btnenter"
                              onClick={() => {
                                {
                                  localStorage.setItem(
                                    "contest_detail",
                                    JSON.stringify(
                                      this.state.contest[this.state.id]
                                    )
                                  );
                                  localStorage.setItem(
                                    "current_state",
                                    "share"
                                  ),
                                    this.props.history.push("/share");
                                }
                              }}
                              style={{
                                backgroundColor: this.state.contest[
                                  this.state.id
                                ].contest_title_background_color
                              }}
                            >
                              Gain Entry Points
                            </button>
                          )}
                        {this.state.contest[this.state.id].has_enter == "1" &&
                          this.state.contest[this.state.id].is_contest !==
                            "1" && (
                            <button
                              className="btnenter"
                              onClick={() => {
                                this.handleClick();
                              }}
                              style={{
                                backgroundColor: this.state.contest[
                                  this.state.id
                                ].contest_title_background_color
                              }}
                            >
                              Pay it forward! Spread the world
                            </button>
                          )}
                      </div>
                    </div>
                  )}
                  <div>
                    <h6 className="contest_h6">
                      {this.state.contest[this.state.id].consent_description}
                    </h6>
                  </div>
                </div>
                <br />
                {this.state.arrows && (
                  <div>
                    <img
                      src={api.image_path + "prev_arrow.jpg"}
                      width="40"
                      className="prev_contest"
                      style={this.state.id == 0 ? { display: "none" } : {}}
                      onClick={() =>
                        this.state.id == 0
                          ? this.firstContest()
                          : this.prevContest()
                      }
                    />
                    <img
                      src={api.image_path + "next_arrow.jpg"}
                      width="40"
                      className="next_contest"
                      onClick={() =>
                        this.state.contest.length - 1 == this.state.id
                          ? this.lastContest()
                          : this.changeContest()
                      }
                    />
                  </div>
                )}
                {/* )} */}
                <br />
                <div
                  onClick={() => {
                    if (isEdge || isIE) {
                      this.setState({
                        alertmsg: ReactHtmlParser(
                          this.state.contest[this.state.id].terms_and_condition
                        ),
                        open: true
                      });
                    }
                    if (!isEdge && !isIE) {
                      console.log("not_edge");
                    }
                  }}
                  className="row panel"
                >
                  <details
                    onClick={() => {
                      this.setState({ arrows: !this.state.arrows });
                    }}
                  >
                    <summary>
                      <ul>
                        <li className="titleValue">Terms & Conditions</li>
                      </ul>
                    </summary>
                    <div className="content panel_contant_div">
                      <div className="panel_contant">
                        {ReactHtmlParser(
                          this.state.contest[this.state.id].terms_and_condition
                        )}
                      </div>
                    </div>
                  </details>
                </div>
              </div>
            )}
        </center>
      </div>
    );
  }
}

export default Contest;
