import React, { Component } from "react";
import axios from "axios";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import { slideInUp, slideInRight } from "react-animations";
import Radium, { StyleRoot } from "radium";
import CircularProgress from "@material-ui/core/CircularProgress";
import api from "./api/api";
import Drawer from "./drawer";
import cookie from "react-cookies";
class Connect extends Component {
  constructor(props) {
    super(props);
    console.log("connect");
    if (
      localStorage.getItem("current_state") !== "connect" ||
      cookie.load("user_id") == "" ||
      cookie.load("user_id") == "undefined" ||
      typeof cookie.load("user_id") == undefined
    ) {
      this.props.history.push("/");
    }
    this.state = {
      open: false,
      relative_email: "",
      relation_exist: false,
      add_new_relation: false,
      alertmsg: "",
      first_name: "",
      lastName: "",
      firstName: "",
      loader: false,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      relative_data: [],
      key: 0,
      length: 0,
      nocontest: false,
      value: "",
      push_contest: false
    };
    this.handleConnect.bind(this);
    this.handleDecline.bind(this);
    this.link_contest.bind(this);
  }

  //Decline Function
  handleDecline = () => {
    let family_relation = [];
    let relative_data = [];
    let self = this;
    console.log(
      "this.state.relation_data",
      JSON.parse(localStorage.getItem("relation_data"))
    );

    //self.setState({ loader: true });

    if (localStorage.getItem("user_email")) {
      let getUserInfo = {
        action: "get_information",
        user_id: this.state.relative_data[this.state.key].user_id
      };
      console.log("getUserInfo", getUserInfo);
      self.setState({ loader: true });
      axios
        .request({
          url: api.react_request,
          method: "POST",
          data: JSON.stringify(getUserInfo)
        })
        .then(function(getUserInfoResponse) {
          console.log("getUserInfoResponse", getUserInfoResponse);
          if (getUserInfoResponse.data) {
            console.log(
              "getUserInfoResponse.data.user_metadata.relation",
              getUserInfoResponse.data.user_metadata.relation
            );
            if (getUserInfoResponse.data.user_metadata.relation) {
              getUserInfoResponse.data.user_metadata.relation.forEach(
                element => {
                  if (
                    element.member_email === localStorage.getItem("user_email")
                  ) {
                    console.log("element.member_email", element.member_email);
                  } else {
                    let tempfamilymemberdata = {};
                    tempfamilymemberdata.firstName = element.firstName;
                    tempfamilymemberdata.lastName = element.lastName;
                    tempfamilymemberdata.relationship = element.relationship;
                    tempfamilymemberdata.member_email = element.member_email;
                    tempfamilymemberdata.user_verified = element.user_verified;
                    tempfamilymemberdata.user_id = element.user_id;
                    tempfamilymemberdata.is_verified = element.is_verified;
                    tempfamilymemberdata.added_by = element.added_by;
                    family_relation.push(tempfamilymemberdata);
                  }
                }
              );
              if (
                typeof localStorage.getItem("relation_data") !== undefined &&
                localStorage.getItem("relation_data") !== "undefined" &&
                localStorage.getItem("relation_data") !== "null" &&
                localStorage.getItem("relation_data") !== null
              ) {
                JSON.parse(localStorage.getItem("relation_data")).forEach(
                  element => {
                    if (
                      element.user_id !==
                      self.state.relative_data[self.state.key].user_id
                    ) {
                      let temprelativedata = {};
                      temprelativedata.firstName = element.firstName;
                      temprelativedata.lastName = element.lastName;
                      temprelativedata.relationship = element.relationship;
                      temprelativedata.member_email = element.member_email;
                      temprelativedata.user_verified = element.user_verified;
                      temprelativedata.user_id = element.user_id;
                      temprelativedata.is_verified = element.is_verified;
                      temprelativedata.added_by = element.added_by;
                      relative_data.push(temprelativedata);
                    }
                  }
                );
              }
              console.log("family_relation", family_relation);
              console.log("relative_data", relative_data);
              let updateJson = {
                action: "add_relation_update",
                update_info: {
                  user_id: cookie.load("user_id"),
                  user_metadata: {
                    relation: relative_data
                  }
                },
                relative_info_update: {
                  relative_user_id:
                    self.state.relative_data[self.state.key].user_id,

                  user_metadata: {
                    relation: family_relation
                  }
                }
              };
              console.log("updateJson", updateJson);
              axios
                .request({
                  method: "POST",
                  url: api.react_request,
                  data: JSON.stringify(updateJson)
                })
                .then(function(response) {
                  if (response.status === 200) {
                    if (response.data.update_response.user_metadata) {
                      localStorage.setItem(
                        "relation_data",
                        JSON.stringify(
                          response.data.update_response.user_metadata.relation
                        )
                      );
                    }

                    console.log("response", response);
                    if (
                      self.state.length > 0 &&
                      self.state.key < self.state.length - 1
                    ) {
                      let relative_data = [];
                      response.data.update_response.user_metadata.relation.forEach(
                        (element, index) => {
                          console.log("element", element);
                          console.log("index", index);

                          if (
                            element.user_verified === true &&
                            element.is_verified === 0 &&
                            element.added_by !== "me"
                          ) {
                            console.log("index", index);
                            relative_data.push(element);
                          } else {
                            console.log("index", index);
                          }
                        }
                      );

                      console.log("relative_data", relative_data);
                      self.setState({
                        relative_data: relative_data,
                        length: relative_data.length
                      });
                      self.setState({ loader: false });
                      console.log("here");
                    } else {
                      self.link_contest();
                    }
                  }
                })
                .catch(error => {
                  console.log("error", error);
                  //self.setState({ loader: false });
                  self.setState({
                    open: true,
                    alertmsg: "Something Wrong... Please try again later"
                  });
                });
            } else {
              localStorage.setItem("current_state", "set_relation");
              self.props.history.push("/set_relation");
            }
          }
        })
        .catch(error => {
          console.log("error", error);
          self.setState({
            open: true,
            loader: false,
            alertmsg: "Something Wrong... Please try again later"
          });
        });
    }
  };

  //To accept invite from user
  handleConnect = () => {
    let user_id = this.props.match.params.user_id;
    let relative_user_id = this.props.match.params.relative_user_id;
    let relation_exist = false;
    let add_new_relation = false;
    let self = this;
    console.log("user_id", user_id);
    console.log("relative email", this.state.relative_email);
    console.log("relative_id", relative_user_id);
    self.setState({ loader: true });
    if (localStorage.getItem("user_email")) {
      console.log("user_id", JSON.parse(localStorage.getItem("relation_data")));
      if (
        localStorage.getItem("relation_data") &&
        typeof localStorage.getItem("relation_data") !== undefined &&
        localStorage.getItem("relation_data") !== "undefined"
      ) {
        let familymemberdata = [];
        JSON.parse(localStorage.getItem("relation_data")).forEach(element => {
          console.log("element", element);
          if (element.user_id === relative_user_id) {
            let tempfamilymemberdata = {};
            console.log("element.member_email", element.user_id);
            tempfamilymemberdata.firstName = element.firstName;
            tempfamilymemberdata.lastName = element.lastName;
            tempfamilymemberdata.relationship = element.relationship;
            tempfamilymemberdata.member_email = element.member_email;
            tempfamilymemberdata.user_id = element.user_id;
            tempfamilymemberdata.user_verified = element.user_verified;
            tempfamilymemberdata.is_verified = 1;
            tempfamilymemberdata.added_by = element.added_by;
            familymemberdata.push(tempfamilymemberdata);
            console.log("element.member_email", element.member_email);
          } else {
            let tempfamilymemberdata = {};
            tempfamilymemberdata.firstName = element.firstName;
            tempfamilymemberdata.lastName = element.lastName;
            tempfamilymemberdata.relationship = element.relationship;
            tempfamilymemberdata.member_email = element.member_email;
            tempfamilymemberdata.user_id = element.user_id;
            tempfamilymemberdata.is_verified = element.is_verified;
            tempfamilymemberdata.added_by = element.added_by;
            tempfamilymemberdata.user_verified = element.user_verified;
            familymemberdata.push(tempfamilymemberdata);
            console.log("element.member_email", element.member_email);
          }
        });
        console.log("user_id", relation_exist, add_new_relation);
        // if (!relation_exist && add_new_relation) {

        console.log("familymemberdata", familymemberdata);
        let updateUserJson = {
          action: "update_user_nd_relative",
          user_id: user_id,
          relative_userid: relative_user_id,
          user_metadata: {
            relation: familymemberdata
          },
          get_contest: {
            user_id: user_id,
            is_active: localStorage.getItem("login_is_active")
          }
        };

        console.log("updateUserJson", updateUserJson);
        axios
          .request({
            url: api.react_request,
            method: "POST",
            data: JSON.stringify(updateUserJson)
          })
          .then(function(updateUserJsonResponse) {
            cookie.remove("relative_user_id", { path: "/" });
            console.log("updateUserJsonResponse", updateUserJsonResponse);
            localStorage.setItem(
              "relation_data",
              JSON.stringify(
                updateUserJsonResponse.data.update_response.user_metadata
                  .relation
              )
            );
            cookie.remove("relative_user_id", { path: "/" });
            console.log("updateUserJsonResponse", updateUserJsonResponse);
            console.log("self.state.length", self.state.length);
            console.log("self.state.key", self.state.key);
            if (
              self.state.length > 0 &&
              self.state.key < self.state.length - 1
            ) {
              let relative_data = [];
              updateUserJsonResponse.data.update_response.user_metadata.relation.forEach(
                (element, index) => {
                  console.log("element", element);
                  console.log("index", index);

                  if (
                    element.user_verified === true &&
                    element.is_verified === 0 &&
                    element.added_by !== "me"
                  ) {
                    console.log("index", index);
                    relative_data.push(element);
                  } else {
                    console.log("index", index);
                  }
                }
              );

              console.log("relative_data", relative_data);
              self.setState({
                relative_data: relative_data,
                length: relative_data.length
              });
              self.setState({ loader: false });
              console.log("here");
            } else {
              if (
                updateUserJsonResponse.data.update_response.user_metadata
                  .address
              ) {
                if (updateUserJsonResponse.data.contest_response.length !== 0) {
                  updateUserJsonResponse.data.contest_response.forEach(
                    element => {
                      console.log("element", element);
                      if (element.direct == 0 || element.direct == "0") {
                        localStorage.setItem(
                          "current_state",
                          "related_entrant_orientation"
                        );
                        self.props.history.push("/related_entrant_orientation");
                      } else {
                        self.setState({ push_contest: true });
                      }
                    }
                  );
                  if (self.state.push_contest) {
                    localStorage.setItem(
                      "contest_array",
                      JSON.stringify(
                        updateUserJsonResponse.data.contest_response
                      )
                    );
                    console.log(
                      JSON.parse(localStorage.getItem("contest_array"))
                    );
                    localStorage.setItem(
                      "contest_detail",
                      JSON.stringify(
                        updateUserJsonResponse.data.contest_response[0]
                      )
                    );
                    localStorage.setItem("current_state", "contest");
                    localStorage.setItem("contest_index", 0);
                    if (
                      typeof localStorage.getItem("need_to_claim") !==
                        undefined &&
                      localStorage.getItem("need_to_claim") !== "undefined" &&
                      localStorage.getItem("need_to_claim") !== "null" &&
                      localStorage.getItem("need_to_claim") !== null
                    ) {
                      console.log(
                        JSON.parse(localStorage.getItem("need_to_claim"))
                      );

                      localStorage.setItem(
                        "need_to_claim_detail",
                        JSON.stringify(
                          JSON.parse(localStorage.getItem("need_to_claim"))[0]
                        )
                      );
                      localStorage.setItem("current_state", "won");
                      self.props.history.push("/won");
                    } else {
                      localStorage.setItem("current_state", "contest");
                      self.props.history.push(
                        "/Contest/" +
                          updateUserJsonResponse.data.contest_response[0]._id +
                          "/" +
                          cookie.load("user_id")
                      );
                    }
                  }
                } else {
                  self.setState({ loader: false });

                  if (
                    updateUserJsonResponse.data.update_response.user_metadata
                      .child_data
                  ) {
                    localStorage.setItem("current_state", "no_contest");
                    self.props.history.push("/no_contest");
                  } else {
                    self.setState({ loader: false });
                    localStorage.setItem("current_state", "set_relation");
                    self.props.history.push("/set_relation");
                  }
                }
              } else {
                localStorage.setItem("current_state", "full_mailing_address");
                self.props.history.push("/signup_step-2");
              }
            }
          })
          .catch(error => {
            console.log("error", error);
            self.setState({ loader: false });
            self.setState({
              open: true,
              alertmsg: "Something Wrong... Please try again later"
            });
          });
      } else {
        let tempfamilymemberdata = {};
        let familymemberdata = [];
        tempfamilymemberdata.firstName = this.state.firstName;
        tempfamilymemberdata.lastName = this.state.lastName;
        tempfamilymemberdata.relationship = self.state.value;
        tempfamilymemberdata.member_email = this.state.relative_email;
        tempfamilymemberdata.user_id = relative_user_id;
        tempfamilymemberdata.is_verified = 1;
        tempfamilymemberdata.user_verified = true;
        tempfamilymemberdata.added_by = "other";
        familymemberdata.push(tempfamilymemberdata);
        self.setState({ relative_data: familymemberdata });
        console.log("familymemberdata", familymemberdata);
        let updateUserJson = {
          action: "update_user_nd_relative",
          user_id: user_id,
          relative_userid: relative_user_id,
          user_metadata: {
            relation: familymemberdata
          },
          get_contest: {
            user_id: user_id,
            is_active: localStorage.getItem("login_is_active")
          }
        };
        console.log("updateUserJson", updateUserJson);
        axios
          .request({
            url: api.react_request,
            method: "POST",
            data: JSON.stringify(updateUserJson)
          })
          .then(function(updateUserJsonResponse) {
            localStorage.setItem(
              "relation_data",
              JSON.stringify(
                updateUserJsonResponse.data.update_response.user_metadata
                  .relation
              )
            );
            cookie.remove("relative_user_id", { path: "/" });
            console.log("updateUserJsonResponse", updateUserJsonResponse);
            if (
              self.state.length > 0 &&
              self.state.key < self.state.length - 1
            ) {
              let relative_data = [];
              updateUserJsonResponse.data.update_response.user_metadata.relation.forEach(
                (element, index) => {
                  console.log("element", element);
                  console.log("index", index);

                  if (
                    element.user_verified === true &&
                    element.is_verified === 0 &&
                    element.added_by !== "me"
                  ) {
                    relative_data.push(element);
                  }
                }
              );

              console.log("relative_data", relative_data);
              self.setState({
                relative_data: relative_data,
                length: relative_data.length
              });
              self.setState({ loader: false });
              console.log("here");
            } else {
              if (
                updateUserJsonResponse.data.update_response.user_metadata
                  .address
              ) {
                if (updateUserJsonResponse.data.contest_response.length !== 0) {
                  updateUserJsonResponse.data.contest_response.forEach(
                    element => {
                      console.log("element", element);
                      if (element.direct == 0 || element.direct == "0") {
                        localStorage.setItem(
                          "current_state",
                          "related_entrant_orientation"
                        );
                        self.props.history.push("/related_entrant_orientation");
                      } else {
                        self.setState({ push_contest: true });
                      }
                    }
                  );
                  if (self.state.push_contest) {
                    localStorage.setItem(
                      "contest_array",
                      JSON.stringify(
                        updateUserJsonResponse.data.contest_response
                      )
                    );
                    console.log(
                      JSON.parse(localStorage.getItem("contest_array"))
                    );
                    localStorage.setItem(
                      "contest_detail",
                      JSON.stringify(
                        updateUserJsonResponse.data.contest_response[0]
                      )
                    );
                    localStorage.setItem("current_state", "contest");
                    localStorage.setItem("contest_index", 0);
                    if (
                      typeof localStorage.getItem("need_to_claim") !==
                        undefined &&
                      localStorage.getItem("need_to_claim") !== "undefined" &&
                      localStorage.getItem("need_to_claim") !== "null" &&
                      localStorage.getItem("need_to_claim") !== null
                    ) {
                      console.log(
                        JSON.parse(localStorage.getItem("need_to_claim"))
                      );

                      localStorage.setItem(
                        "need_to_claim_detail",
                        JSON.stringify(
                          JSON.parse(localStorage.getItem("need_to_claim"))[0]
                        )
                      );
                      localStorage.setItem("current_state", "won");
                      self.props.history.push("/won");
                    } else {
                      localStorage.setItem("current_state", "contest");
                      self.props.history.push(
                        "/Contest/" +
                          updateUserJsonResponse.data.contest_response[0]._id +
                          "/" +
                          cookie.load("user_id")
                      );
                    }
                  }
                } else {
                  self.setState({ loader: false });

                  if (
                    updateUserJsonResponse.data.update_response.user_metadata
                      .child_data
                  ) {
                    localStorage.setItem("current_state", "no_contest");
                    self.props.history.push("/no_contest");
                  } else {
                    self.setState({ loader: false });
                    localStorage.setItem("current_state", "set_relation");
                    self.props.history.push("/set_relation");
                  }
                }
              } else {
                localStorage.setItem("current_state", "full_mailing_address");
                self.props.history.push("/signup_step-2");
              }
            }
          })
          .catch(error => {
            console.log("error", error);
            self.setState({ loader: false });
            self.setState({
              open: true,
              alertmsg: "Something Wrong... Please try again later"
            });
          });
      }
    }
  };

  componentDidMount = () => {
    let self = this;
    console.log(
      "this.props.match.params.relative_user_id",
      this.props.match.params.relative_user_id
    );
    console.log(
      "this.props.match.params.user_id",
      this.props.match.params.user_id
    );
    console.log("localStorage.getItem", cookie.load("user_id"));
    if (this.props.match.params.user_id !== cookie.load("user_id")) {
      cookie.save(
        "relative_refered_by_user_id",
        this.props.match.params.relative_user_id,
        { path: "/" }
      );
      cookie.save("relative_user_id", this.props.match.params.user_id, {
        path: "/"
      });
      console.log(
        cookie.load("relative_refered_by_user_id") +
          "  " +
          cookie.load("relative_user_id")
      );

      this.props.history.push("/");
    } else {
      console.log("localStorage.getItem", cookie.load("user_id"));

      var getfinaljson = {
        action: "get_information",
        user_id: cookie.load("user_id")
      };
      console.log("getfinaljson", getfinaljson);
      self.setState({ loader: true });
      axios
        .request({
          method: "POST",
          url: api.react_request,
          data: JSON.stringify(getfinaljson)
        })
        .then(response => {
          self.setState({ loader: false });
          console.log("response", response);
          if (response.status === 200) {
            let relative_data = [];
            localStorage.setItem(
              "relation_data",
              JSON.stringify(response.data.user_metadata.relation)
            );
            if (this.props.match.params.relative_user_id) {
              response.data.user_metadata.relation.forEach((element, index) => {
                console.log("element", element);

                if (
                  element.user_verified === true &&
                  element.is_verified === 0 &&
                  element.user_id ===
                    this.props.match.params.relative_user_id &&
                  element.added_by === "other" &&
                  element.user_id !== this.props.match.params.user_id
                ) {
                  console.log("index", index);
                  relative_data.push(element);
                }
                if (
                  element.user_verified === true &&
                  element.is_verified === 1 &&
                  element.user_id ===
                    this.props.match.params.relative_user_id &&
                  element.added_by === "other" &&
                  element.user_id !== this.props.match.params.user_id
                ) {
                  console.log("index", index);
                  self.setState({
                    nocontest: false,
                    open: true,
                    alertmsg: "Already Connected"
                  });
                }
                if (
                  element.user_verified === true &&
                  element.is_verified === 0 &&
                  element.added_by === "other" &&
                  element.user_id !== this.props.match.params.relative_user_id
                ) {
                  console.log("index", index);
                  relative_data.push(element);
                }
              });
            }
            console.log("relative_data", relative_data);
            console.log("relative_data_length", relative_data.length);
            self.setState({
              relative_data: relative_data,
              length: relative_data.length
            });
          }
        })
        .catch(error => {
          console.log("error", error);
          self.setState({
            nocontest: false,
            open: true,
            alertmsg: "Something Wrong..."
          });
        });
    }
  };

  handleClose = () => {
    this.setState({ open: false });
  };

  //To link contest with connect page
  link_contest = () => {
    var self = this;

    console.log("user_id", cookie.load("user_id"));
    if (
      typeof cookie.load("user_id") !== undefined &&
      cookie.load("user_id") !== "undefined" &&
      cookie.load("user_id") !== "null" &&
      cookie.load("user_id") !== null &&
      cookie.load("user_id")
    ) {
      console.log("user_id", localStorage.getItem("address"));
      if (
        typeof localStorage.getItem("address") !== undefined &&
        localStorage.getItem("address") !== "undefined" &&
        localStorage.getItem("address") !== null
      ) {
        console.log("child_data", localStorage.getItem("child_data"));

        if (
          typeof localStorage.getItem("child_data") !== undefined &&
          localStorage.getItem("child_data") !== "undefined" &&
          localStorage.getItem("child_data") !== "null" &&
          localStorage.getItem("child_data") !== null &&
          localStorage.getItem("child_data")
        ) {
          //contest link

          var get_contest = {
            action: "getcontest",
            user_id: cookie.load("user_id"),
            is_active: localStorage.getItem("login_is_active")
          };
          console.log("get_contest", get_contest);
          self.setState({ loader: true });
          axios
            .request({
              method: "POST",
              url: api.react_request,
              data: JSON.stringify(get_contest)
            })
            .then(response => {
              console.log("response", response);
              if (response.status === 200) {
                let freebies = [];
                let contest = [];
                if (response.data.length !== 0) {
                  response.data.forEach(element => {
                    console.log("element", element);
                    if (element.direct == 0 || element.direct == "0") {
                      localStorage.setItem(
                        "current_state",
                        "related_entrant_orientation"
                      );
                      self.props.history.push("/related_entrant_orientation");
                    } else {
                      self.setState({ push_contest: true });
                    }
                    if (element.is_contest == 0) {
                      freebies.push(element);
                      self.setState({ is_freebies: true, freebies: freebies });
                    } else {
                      contest.push(element);
                      self.setState({ is_contest: true, contest: contest });
                    }
                  });
                  console.log("freebies", freebies);
                  console.log("contest", contest);

                  if (self.state.push_contest) {
                    localStorage.setItem(
                      "contest_array",
                      JSON.stringify(response.data)
                    );
                    console.log(
                      JSON.parse(localStorage.getItem("contest_array"))
                    );
                    localStorage.setItem(
                      "contest_detail",
                      JSON.stringify(response.data[0])
                    );
                    localStorage.setItem("contest_index", 0);
                    if (
                      typeof localStorage.getItem("need_to_claim") !==
                        undefined &&
                      localStorage.getItem("need_to_claim") !== "undefined" &&
                      localStorage.getItem("need_to_claim") !== "null" &&
                      localStorage.getItem("need_to_claim") !== null
                    ) {
                      console.log(
                        JSON.parse(localStorage.getItem("need_to_claim"))
                      );
                      localStorage.setItem("current_state", "won");
                      cookie.save(
                        "winner_contest_id",
                        JSON.parse(localStorage.getItem("need_to_claim_detail"))
                          .contest_id,
                        { path: "/" }
                      );
                      cookie.save(
                        "claim_for",
                        JSON.parse(localStorage.getItem("need_to_claim_detail"))
                          .id,
                        { path: "/" }
                      );
                      localStorage.setItem(
                        "need_to_claim_detail",
                        JSON.stringify(
                          JSON.parse(localStorage.getItem("need_to_claim"))[0]
                        )
                      );
                      self.props.history.push("/won");
                    } else {
                      if (freebies.length > 0) {
                        localStorage.setItem("current_state", "contest");
                        self.props.history.push(
                          "/Contest/" +
                            response.data[0]._id +
                            "/" +
                            cookie.load("user_id")
                        );
                      } else {
                        localStorage.setItem("current_state", "no_freebie");
                        self.props.history.push("/no_freebie");
                      }
                    }
                  }
                } else {
                  self.setState({ loader: false });

                  // localStorage.setItem("current_state", "no_contest");
                  // self.props.history.push("/no_contest");
                }
              }
            })
            .catch(error => {
              console.log("error", error);
              self.setState({ loader: false });
              self.setState({
                open: true,
                alertmsg: "Something Wrong... Please Try Again Later"
              });
            });
        } else {
          self.setState({ loader: false });
          localStorage.setItem("current_state", "set_relation");
          self.props.history.push("/set_relation");
        }
      } else {
        self.setState({ loader: false });
        localStorage.setItem("current_state", "full_mailing_address");
        self.props.history.push("/signup_step-2");
      }
    } else {
      self.setState({ loader: false });
      localStorage.setItem("current_state", "home");
      self.props.history.push("/");
    }
  };

  render() {
    return (
      <center>
        {this.state.is_active && <Drawer prop={this.props} />}
        <StyleRoot>
          <div className="home_btn home_width" style={styles.slideInRight}>
            <div className="container-fluid">
              {this.state.loader && (
                <CircularProgress
                  size={100}
                  style={{ color: "black", marginTop: "17%" }}
                />
              )}
              <Dialog
                style={{ textTransform: "capitalize" }}
                actions={
                  <FlatButton
                    label="Close"
                    labelStyle={{ color: "#000" }}
                    onClick={() => this.handleClose()}
                  />
                }
                modal={false}
                open={this.state.open}
                //onRequestClose={this.handleClose}
              >
                {this.state.alertmsg}
              </Dialog>
              {!this.state.loader && (
                <div>
                  <center>
                    <div className="connect">
                      {this.state.relative_data &&
                        this.state.relative_data.length > 0 && (
                          <label>
                            Do you want to connect with{" "}
                            {this.state.relative_data[this.state.key]
                              .firstName +
                              " " +
                              this.state.relative_data[this.state.key].lastName}
                            ?
                          </label>
                        )}
                    </div>
                    <div className="home_btn">
                      <button
                        className="btn_signup btn_connect"
                        onClick={this.handleConnect}
                      >
                        Connect
                      </button>
                    </div>
                    <div className="home_btn">
                      <a
                        className="btn_decline"
                        onClick={() => this.handleDecline()}
                      >
                        Decline
                      </a>
                    </div>
                  </center>
                  <div className="row">
                    {this.state.key > 0 && (
                      <div className="col-md-6 col-lg-6 ">
                        <img
                          src={api.image_path + "prev_arrow_one.jpg"}
                          width="40"
                          className="next_icon next_left"
                          onClick={() => {
                            if (this.state.key > 0) {
                              this.setState({ key: this.state.key - 1 });
                              localStorage.setItem("current_state", "connect");
                              this.props.history.push({
                                pathname:
                                  "/Connect/" +
                                  cookie.load("user_id") +
                                  "/" +
                                  this.state.relative_data[this.state.key - 1]
                                    .user_id
                              });
                            }
                          }}
                        />
                      </div>
                    )}
                    <div className="col-md-6 col-lg-6 ">
                      <img
                        src={api.image_path + "next_arrow.jpg"}
                        width="40"
                        className="next_icon next_right"
                        onClick={() => {
                          if (
                            this.state.length > 0 &&
                            this.state.key < this.state.length - 1
                          ) {
                            this.setState({ key: this.state.key + 1 });
                            localStorage.setItem("current_state", "connect");
                            this.props.history.push({
                              pathname:
                                "/Connect/" +
                                cookie.load("user_id") +
                                "/" +
                                this.state.relative_data[this.state.key + 1]
                                  .user_id
                            });
                          } else {
                            this.link_contest();
                          }
                        }}
                      />
                    </div>
                  </div>
                </div>
              )}
            </div>
          </div>
        </StyleRoot>
      </center>
    );
  }
}

const styles = {
  labelStyle: { color: "rgba(224, 214, 214, 0.87)", fontSize: 14 },
  slideup: {
    animation: "x 1s",
    animationName: Radium.keyframes(slideInUp, "slideup")
  },
  slideInRight: {
    animation: "x 1s",
    animationName: Radium.keyframes(slideInRight, "slideInRight")
  }
};

export default Connect;
