import React, { Component } from "react";
import Drawer from "./drawer";
import Radium, { StyleRoot } from "radium";
import { fadeOutUp, fadeInUp, slideInUp, slideInRight } from "react-animations";
import $ from "jquery";
import cookie from "react-cookies";
import api from "./api/api";
class index extends Component {
  constructor(props) {
    super(props);
    // if (
    //   cookie.load("user_id") == "" ||
    //   cookie.load("user_id") == "undefined" ||
    //   typeof cookie.load("user_id") == undefined
    // ) {
    //   props.history.push("/");
    // }
    console.log("hey", cookie.load("userId"));
    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,
      index: true
    };
  }

  componentDidMount = () => {
    console.log("here");
    $("#title").css("padding-top", "150px");
    $("#para").hide();
    setTimeout(function() {
      $("#title").css("padding-top", "inherit");
      $("#para").show();
    }, 2000);
  };

  onclick = () => {
    if (
      localStorage.getItem("imported") === 1 ||
      localStorage.getItem("imported") === "1"
    ) {
      if (
        typeof cookie.load("relative_user_id") !== undefined &&
        cookie.load("relative_user_id") !== "undefined" &&
        cookie.load("relative_user_id") !== "null" &&
        cookie.load("relative_user_id") !== null &&
        cookie.load("relative_user_id")
      ) {
        cookie.save("relative_user_id", cookie.load("user_id"), { path: "/" });
        localStorage.setItem("current_state", "connect");
        this.setState({ loader: false });
        this.props.history.push(
          "/Connect/" +
            cookie.load("relative_user_id") +
            "/" +
            cookie.load("relative_refered_by_user_id")
        );
      }
    } else {
      localStorage.setItem("current_state", "full_mailing_address"),
        this.props.history.push("/signup_step-2");
    }
  };

  render() {
    return (
      <div className="bcd_header_div_margin index_page_header">
        <div className="allpages_desktop_boxes_div index_pt">
          {this.state.is_active && <Drawer prop={this.props} />}

          <StyleRoot id="title">
            <p style={styles.slideInUp} className="title3  text-center">
              Welcome to
            </p>
            <div style={styles.slideInUp} className="welcome_img text-center">
              <img
                src={api.image_path + "family_one.png"}
                alt=""
                title=""
                width="185px"
              />
            </div>
          </StyleRoot>
          <StyleRoot id="para">
            <div className="inner_container" style={styles.slideInRight}>
              <p className="mt70 subtitle" style={{ textAlign: "center" }}>
                We have sent you an email to log in and confirm your account
                activation.
              </p>
              <p className="page-txt mt40" style={{ textAlign: "center" }}>
                If you would like to activate your account later, you can get
                continue, but before your account is activated, any freebies,
                contests or family sharing will remain in pending status.
              </p>

              <div
                className="mainactive_later mt70"
                style={{ cursor: "pointer" }}
              >
                <a
                  onClick={() => {
                    this.onclick();
                  }}
                  className="active_later"
                >
                  <span>
                    Continue, I'll activate later{" "}
                    <i>
                      <img
                        src={api.image_path + "next_arrow.jpg"}
                        alt=""
                        title=""
                        width="30"
                      />
                    </i>
                  </span>
                </a>
              </div>
              <div className="mt70" />
            </div>
          </StyleRoot>
        </div>
      </div>
    );
  }
}
const styles = {
  slideInRight: {
    animation: "x 1s",
    animationName: Radium.keyframes(slideInRight, "slideInRight")
  },
  slideInUp: {
    animation: "x 1s",
    animationName: Radium.keyframes(slideInUp, "slideInUp")
  },
  fadeOutUp: {
    animation: "x 1s",
    animationName: Radium.keyframes(fadeOutUp, "fadeOutUp")
  },
  fadeInUp: {
    animation: "x 1s",
    animationName: Radium.keyframes(fadeInUp, "fadeInUp")
  }
};
export default index;
