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 perks extends Component {
  constructor(props) {
    super(props);
    if (
      localStorage.getItem("current_state") !== "perks" )  {
        this.props.history.push("/menu_page");
      }
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    this.state = {
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      loader: false,
      open: false,
      alertmsg: ""
    };
    this.handleClick = this.handleClick.bind(this);
    this.handleClose = this.handleClose.bind(this);
  }

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

    console.log("update", update);
    let self = this;
    self.setState({ loader: true });
    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("perks", response.data.user_metadata.perks);
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false });
        self.setState({
          open: true,
          alertmsg: "Something Wrong... Please try again"
        });
      });
  };

  handleClose = () => {
    this.setState({ open: false });
  };
  handleClick = () => {
    // console.log(JSON.parse(localStorage.getItem("contest_array")));
    // let contest_array = JSON.parse(localStorage.getItem("contest_array"));
    // localStorage.setItem("current_state", "contest"),
      window.open("https://family.one/perks/", "_blank");
    //   if(contest_array){
    //     this.props.history.push(
    //       "/Contest/" + contest_array[0]._id + "/" + localStorage.getItem("user_id")
    //     );
    //   }
    // else{
      // this.props.history.push("/menu_page")
    // }
  };

  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  text-center m_t20">
            <img
              src={api.image_path+"family_perk.jpg"}
              alt=""
              title=""
              className="o_max-w-200"
            />
          </div>
        )}
        {!this.state.loader && (
          <div className="perks_banner m_t10 ">
            <img
              src={api.image_path+"perk_img.jpg"}
              alt="perk_img"
              title=""
              className="w-100-m-h-350"
            />
          </div>
        )}
        <div className="inner_container2">
          <div className="container-fluid" />
          <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="orientation_txt m_t10 text-center">
              Ready for some <br />
              <span className="welcome_txt">
                <b>PERKS?</b>
              </span>
            </div>
          )}
          {!this.state.loader && (
            <p className="page-txt">
              Check out family.one Perks, Canada’s only Perks program designed
              specifically for families.
            </p>
          )}
          {!this.state.loader && (
            <div className="m_t20 perk_checkoutMain">
              <a
                onClick={() => this.handleClick()}
                className="perk_checkout white-btn px20 py20"
              >
                <span>
                  Check it Out{" "}
                  <i>
                    <img
                      src={api.image_path+"next_arrow.jpg"}
                      alt=""
                      title=""
                      width="30"
                    />
                  </i>
                </span>
              </a>
            </div>
          )}
          {!this.state.loader && (
            <div className="freebie_footer_div text-center">
              <a onClick={() => {localStorage.setItem("current_state", "menu_page"),this.props.history.push("/menu_page")}} className="skip_link">
                Menu
              </a>
            </div>
          )}
          <div className="m_t20" />
        </div>
      </div>
    );
  }
}
export default perks;
