import React, { Component } from "react";
import Drawer from "./drawer";

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 payment_failed extends Component {
  constructor(props) {
    super(props);
    if (
      localStorage.getItem("current_state") !== "payment_failed" )  {
        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
    };
    this.handleClose.bind(this);
  }
  handleClose = () => {
    this.setState({ open: false });
  };

  render() {
    return (
      <div className="page-bg">
        <center>{this.state.is_active && <Drawer prop={this.props} />}</center>
        
        {!this.state.loader && (
          <div className="welcome_img freebie1-p text-center">
            <img
              src={api.image_path+"familyone_logo.png"}
              alt=""
              title=""
              className="max-w-200 "
            />
          </div>
        )}
        <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 className="white_container">
              <div className="text-right next-arrow">
                <a onClick={() => (localStorage.setItem("current_state", "freebie3"),this.props.history.push("/freebie3"))}>
                  <img
                    src={api.image_path+"next_arrow.jpg"}
                    alt=""
                    title=""
                    width="30"
                  />
                </a>
              </div>
              <div className="text-right prev-arrow">
                <a onClick={() => (localStorage.setItem("current_state", "freebie1"),this.props.history.push("/freebie1"))}>
                  <img
                    src={api.image_path+"prev_arrow.jpg"}
                    alt=""
                    title=""
                    width="30"
                  />
                </a>
              </div>
              <div className="welcome_txt2 text-center mt20 pyment_compleated" style={{paddingTop:50}}> 
               <b>OOPS !</b><br />
                  Your order is <br/>
                  not processed 
              </div>
            </div> 
          )}
          {!this.state.loader && (
            <div className="freebie_footer_div text-center">
              <a 
              onClick={() => {
                  console.log("local", localStorage.getItem("activity"));
                  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")) {
                    localStorage.getItem("perks") == 0
                      ? localStorage.setItem("current_state", "perks")
                      : localStorage.setItem("current_state", "menu_page");
                    this.props.history.push({
                      pathname:
                        localStorage.getItem("perks") == 0
                          ? "/perks"
                          : "/menu_page"
                    });
                  } else {
                    if (localStorage.getItem("activity") === 1) {
                      console.log("activity done");
                      localStorage.setItem("current_state", "remind_user"),
                      this.props.history.push("/remind_user");
                    } else {
                      console.log("activity not done");
                      localStorage.setItem("current_state", "remind_user1"),
                      this.props.history.push("/remind_user1");
                    }
                  }
                }}
              className="skip_link">
                Skip
              </a>
            </div>
          )}
        </div>
      </div>
    );
  }
}
export default payment_failed;
