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 contest1 extends Component {
  constructor(props) {
    super(props);
    if (
      localStorage.getItem("current_state") !== "contest1" ) {
        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: "",
      user_id:cookie.load("user_id"),
      product_orientation: false,
      contest_index: localStorage.getItem("contest_index")
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose.bind(this);
  }
  handleClose = () => {
    this.setState({ open: false });
  };
  handleClick = () => {
    var self = this;
    self.setState({ loader: true });
    // let index = localStorage.getItem("contest_index");

    let update = {
      action: "update",
      user_id: cookie.load("user_id"),
      user_metadata: {
        contest_orientation: 1
      }
    };

    console.log("update", update);
    axios
      .request({
        url: api.react_request,
        method: "POST",
        data: JSON.stringify(update)
      })
      .then(function(response) {
        self.setState({ loader: false });
        console.log("response", response);
        console.log(response.data);
        localStorage.setItem(
          "contest_orientation",
          response.data.user_metadata.contest_orientation
        );
        console.log(JSON.parse(localStorage.getItem("contest_array")));
        let contest_array = JSON.parse(localStorage.getItem("contest_array"));
        // console.log("index", index);
        console.log("user_id", cookie.load("user_id"));
        // console.log("contest_array[index]._id",contest_array[index]._id)
        self.setState({ loader: false });
        localStorage.setItem("current_state","contest")
        self.props.history.push(
          "/Contest/" +
            contest_array[localStorage.getItem("contest_index")]._id +
            "/" +
            cookie.load("user_id")
        );
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false });
        self.setState({
          open: true,
          alertmsg: "Something Wrong... Please try again later"
        });
      });
  };
  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="welcome_img freebie1-p  text-center">
          <img
            src={api.image_path+"familyoneContest.png"}
            alt=""
            title=""
            className="max-w-150"
          />
        </div>
        )}
        <div className="inner_container2 m_t20">
          
           
         
          {!this.state.loader && (
            <div className="white_container newwhite_container allo_pagewhitediv">
              <div className="text-right next-arrow">
                <a onClick={() => {localStorage.setItem("current_state", "contest2"),this.props.history.push("/contest2")}}>
                  <img
                    src={api.image_path+"next_arrow.jpg"}
                    alt=""
                    title=""
                    width="30"
                  />
                </a>
              </div>
              <div className="welcome_img text-center">
                <img src={api.image_path+"contest-orientation-1.jpg"} alt="" title="" className="freebie2_img" />
              </div>
              <div className="welcome_txt contest1_txtdiv m_t10">
              <b>Win Prizes</b>
                <br />
                tailored to your needs
              </div>
              <p className="page-txt mt_10">
                <span className="subtitle">
                We're focussed on making your life better. Our contests are designed for you and they're frequent. Every month we're giving away a minimum of $50,000 in prizes exclusively to Canadian families.
                </span>{" "}
              </p>
              <div className="m_t20">
                <ul className="dot_ul m-auto">
                  <li className="active">
                    <a onClick={() => {localStorage.setItem("current_state", "contest2"),this.props.history.push("/contest2")}} />
                  </li>
                  <li>
                    <a onClick={() => {localStorage.setItem("current_state", "contest2"),this.props.history.push("/contest2")}} />
                  </li>
                  <li>
                    <a onClick={() => {localStorage.setItem("current_state", "contest2"),this.props.history.push("/contest2")}} />
                  </li>
                  <li>
                    <a onClick={() => {localStorage.setItem("current_state", "contest2"),this.props.history.push("/contest2")}} />
                  </li>
                </ul>
              </div>
            </div>
          )}
          {!this.state.loader && (
            <div className="freebie_footer_div text-center">
              <a onClick={() => this.handleClick()} className="skip_link">
                Skip
              </a>
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default contest1;
