import React from "react";
import { FormControl } from "react-bootstrap";
import FlatButton from "material-ui/FlatButton";
import CircularProgress from "@material-ui/core/CircularProgress";
import cookie from "react-cookies";
import axios from "axios";
import Dialog from "material-ui/Dialog";
import SelectField from "material-ui/SelectField";
import MenuItem from "material-ui/MenuItem";
import { slideInUp, slideInRight } from "react-animations";
import Radium from "radium";
import Drawer from "./drawer";
import { isMobile } from "react-device-detect";
import api from "./api/api";
let is_user_verified;
let path;
class Add_relation extends React.Component {
  constructor(props) {
    super(props);
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("is_active"));
    if (
      localStorage.getItem("current_state") !== "add_relation"
    ) {
      this.props.history.push("/menu_page");
    }
    path = window.location.protocol + "//" + window.location.host;
    console.log("access_token",cookie.load("access_token"))
if(cookie.load("access_token") !== "" &&
cookie.load("access_token") !== "undefined" &&
typeof cookie.load("access_token") !== undefined &&
cookie.load("access_token")
) {
  console.log("is_user_verified",is_user_verified)
  is_user_verified=1;
}
else{
  console.log("is_user_verified",is_user_verified)
  is_user_verified =0;
}
console.log("is_user_verified",is_user_verified)
    var user_email = localStorage.getItem("user_email");
    this.state = {
      email: "",
      user_email: user_email,
      loader: false,
      firstName: "",
      lastName: "",
      open: false,
      alertmsg: "",
      firstname_complete: false,
      lastname_complete: false,
      relative_data: [],
      email_complete: false,
      value: null,
      relation_exist: false,
      add_new_relation: false,
      relative_id: "",
      nocontest: false,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      check_existing_user: false,
      show_error: false,
      error: "",
      user_link_activated:""
    };
    this.handleChange = this.handleChange.bind(this);
  }
  //Handle the dialog box
  handleClose = () => {
    this.setState({ open: false });
    if (
      this.state.firstname_complete &&
      this.state.lastname_complete &&
      this.state.email.length > 8
    ) {
      this.setState({
        email: "",

        firstName: "",
        lastName: "",

        firstname_complete: false,
        lastname_complete: false,

        email_complete: false,
        value: null,

        relative_id: "",
        nocontest: false,
        is_active: localStorage.getItem("login_is_active") == 1 ? true : false
      });
    }
  };

  // sent mail to relative
  handleSent = () => {
    this.setState({ open: false });
    this.setState({ loader: true });
    var self = this;

    if (localStorage.getItem("user_email")) {
      self.setState({
        relative_data:
          typeof localStorage.getItem("relation_data") !== undefined
            ? []
            : JSON.parse(localStorage.getItem("relation_data"))
      });
      // console.log(
      //   "relative_data",
      //   JSON.parse(localStorage.getItem("relation_data"))
      // );
    let temprelativefamilymemberdata = {};
    let relative_relation = "";
    if (self.state.value === "uncle_aunt") {
      relative_relation = "nephew/niece";
    } else if (self.state.value === "parent") {
      relative_relation = "son/daughter";
    } else if (self.state.value === "grand_parent") {
      relative_relation = "grandson/granddaughter";
    } else if (self.state.value === "step_parent") {
      relative_relation = "stepson/stepdaughter";
    } else if (self.state.value === "child") {
      relative_relation = "mother/father";
    } else if (self.state.value === "surrogate") {
      relative_relation = "surrogateson/surrogatedaughter";
    } else if (self.state.value === "nephew/niece") {
      relative_relation = "uncle_aunt";
    } else if (self.state.value === "son/daughter") {
      relative_relation = "parent";
    } else if (self.state.value === "grandson/granddaughter") {
      relative_relation = "grandparent";
    } else if (self.state.value === "stepson/stepdaughter") {
      relative_relation = "stepparent";
    } else if (self.state.value === "mother/father") {
      relative_relation = "child";
    } else if (self.state.value === "surrogateson/surrogatedaughter") {
      relative_relation = "surrogate";
    } else {
      relative_relation = self.state.value;
    }
    
    console.log("relative_relation", relative_relation);
    let relativefamilymemberdata = [];

    console.log("this.satet", this.state);
    temprelativefamilymemberdata.firstName = localStorage.getItem("first_name");
    temprelativefamilymemberdata.lastName = localStorage.getItem("last_name");
    temprelativefamilymemberdata.relationship = relative_relation;
    temprelativefamilymemberdata.member_email = localStorage.getItem("user_email");
    temprelativefamilymemberdata.user_id = cookie.load("user_id");
    temprelativefamilymemberdata.is_verified = 0;
    temprelativefamilymemberdata.email_send = true;
    temprelativefamilymemberdata.user_verified = is_user_verified==1?true:false;
    temprelativefamilymemberdata.added_by = "other";
    relativefamilymemberdata.push(temprelativefamilymemberdata);
    // self.setState({ familymemberdata: familymemberdata });

    console.log("relativefamilymemberdata", relativefamilymemberdata);

      let tempfamilymemberdata = {};
      let familymemberdata = [];
      if (
        typeof localStorage.getItem("relation_data") !== undefined &&
        localStorage.getItem("relation_data") !== null &&
        localStorage.getItem("relation_data") !== "null" &&
        localStorage.getItem("relation_data") !== "undefined"
      ) {
        familymemberdata = JSON.parse(localStorage.getItem("relation_data"));
      } else {
        familymemberdata = [];
      }
      
      console.log("relative_data", familymemberdata);
      tempfamilymemberdata.firstName = this.state.firstName;
      tempfamilymemberdata.lastName = self.state.lastName;
      tempfamilymemberdata.relationship = self.state.value;
      tempfamilymemberdata.member_email = self.state.email;
      tempfamilymemberdata.user_id = self.state.relative_id;
      tempfamilymemberdata.is_verified = 0;
      tempfamilymemberdata.email_send = true;
      tempfamilymemberdata.added_by = "me";
      tempfamilymemberdata.user_verified = self.state.user_link_activated;
      familymemberdata.push(tempfamilymemberdata);
      self.setState({ relative_data: familymemberdata });
      console.log("relative_data", familymemberdata);
      let addRelativeJson = {
        action: "add_relation_update",
        update_info: {
          user_id: cookie.load("user_id"),
          user_metadata: {
            relation: familymemberdata
          }
        },
        relative_info_update: {
          relative_user_id: self.state.relative_id,

          user_metadata: {
            relation: temprelativefamilymemberdata
          }
        },
        is_user_verified:is_user_verified,
        send_data: {
          
          link:
            api.connect_mail_link+
            self.state.relative_id +
            "/relative_id=" +
            cookie.load("user_id"),
          subject:
            localStorage.getItem("name") +
            " " +
            "is waiting for you to connect on family.one",
          to_name: self.state.firstName,
          relative_email: self.state.email,
          is_user_exist: self.state.check_existing_user ? 1 : 0,
          sender_name: localStorage.getItem("name")
        }
      };

      console.log("addRelativeJson", addRelativeJson);
      axios
        .request({
          url: api.react_request,
          method: "POST",
          data: JSON.stringify(addRelativeJson)
        })
        .then(function(response) {
          self.setState({ loader: false });
          console.log("response", response);
          localStorage.setItem(
            "relation_data",
            JSON.stringify(response.data.update_response.user_metadata.relation)
          );
          console.log(
            "relation_data",
            JSON.parse(localStorage.getItem("relation_data"))
          );
          if (!self.state.relation_exist) {
            console.log("familymemberdata", familymemberdata);

            // contest condition appply here

            if (localStorage.getItem("someone_else_orientation") == 0) {
              localStorage.setItem(
                "current_state",
                "someone_orientation_screen"
              );
              localStorage.setItem("related_first_name", self.state.firstName);
              localStorage.setItem("related_last_name", self.state.lastName);
              self.props.history.push("/someone_orientation_screen");
            } else {
              localStorage.setItem("orientation", "1");
              localStorage.setItem("current_state", "family_share");
              self.props.history.push("/family_share");
            }
          }
        })
        .catch(error=>{
          console.log("error",error);
          self.setState({ loader: false,show_error: true,
            error: "Something Wrong... Please try again later" });
        })
    } else {
      self.setState({ show_error: true, error: "Session Expires..." });
    }
  };

  //navigate user to the contest page
  handleNext = () => {
    this.setState({ open: false });
    var self = this;

    localStorage.setItem("orientation", "1");
    localStorage.setItem("current_state", "family_share");
    self.props.history.push("/family_share");
  };

  handleChange = (event, index, value) => {
    this.setState({ value });
    var self = this;
    console.log("user_email", localStorage.getItem("user_email"));
    console.log("email", this.state.email);
    if (localStorage.getItem("user_email") == this.state.email) {
      self.setState({
        show_error: true,
        error: "You Can Not Be A Relation To Yourself"
      });
    } else {
      var getfinaljson = {
        action: "add_relation_signup",
        password:"bewnexus(123)",
        connection: "imported",
        name: this.state.firstName + " " + this.state.lastName,
        nickname: this.state.firstName + " " + this.state.lastName,
        email: this.state.email,
        user_metadata: {
          first_name: this.state.firstName,
          last_name: this.state.lastName,
          is_active: 0,
          link_activated: 0
        }
      };
      console.log("state", this.state);
      console.log("getfinaljson", getfinaljson);
      self.setState({ loader: true });
      axios
        .request({
          method: "POST",
          url: api.react_request,
          data: JSON.stringify(getfinaljson)
        })
        .then(response => {
          console.log("response", response);
          if (response.data) {
            self.setState({ user_link_activated:response.data.email_verified});
            if (response.data.existing === 1) {
              //relative exist
              
              self.setState({ check_existing_user: true });
              // if()
              // console.log(
              //   "json.data.user_metadata.relation",
              //   JSON.parse(localStorage.getItem("relation_data"))
              // );
              this.setState({ loader: false });
              if (JSON.parse(localStorage.getItem("relation_data")) !== null && localStorage.getItem("relation_data") == "" &&
              localStorage.getItem("relation_data") == "undefined" &&
              typeof localStorage.getItem("relation_data") == undefined) {
                console.log(
                  "JSON.parse(localStorage.getItem)",
                  JSON.parse(localStorage.getItem("relation_data"))
                );
                JSON.parse(localStorage.getItem("relation_data")).forEach(
                  element => {
                    if (element.member_email === this.state.email) {
                      console.log("else");
                      self.setState({ relation_exist: true });
                      self.setState({ loader: false });
                      self.setState({
                        show_error: true,
                        error:
                          this.state.firstName +
                          " " +
                          this.state.lastName +
                          " Is Already Connected With You"
                      });
                    } else {
                      console.log("else");
                      self.setState({ add_new_relation: true });
                    }
                  }
                );
                if (!self.state.relation_exist && self.state.add_new_relation) {
                  console.log("else");
                  self.setState({ loader: false });
                  self.setState({
                    user_email: localStorage.getItem("user_email"),
                    relative_id: response.data.user_id
                  });
                  self.handleSent();
                } else {
                  console.log("else");
                }
              } else {
                console.log("else");
                self.setState({ loader: false });
                self.setState({
                  user_email: localStorage.getItem("user_email"),
                  relation_exist: false,
                  add_new_relation: true,
                  relative_id: response.data.user_id
                });
                self.handleSent();
              }
            } else {
              console.log("else");
              console.log("response relation", response);
              self.setState({ loader: false });
              self.setState({
                user_email: localStorage.getItem("user_email"),
                relation_exist: false,
                add_new_relation: true,
                relative_id: response.data.user_id
              });
              self.handleSent();
            }
          } else {
            console.log("error");
          }
        })
        .catch(error => {
          console.log("error", error);
          self.setState({ loader: false });
          self.setState({
            nocontest: false,
            show_error: true,
            error: "Something Wrong... Please try again later"
          });
        });
    }
  };

  changeEmail = () => {
    if (this.state.firstName === "") {
      this.setState({ show_error: true, error: "Enter First Name" });
    } else if (!this.state.firstname_complete) {
      console.log("here");
      this.setState({ firstname_complete: true });
    } else if (this.state.lastName === "") {
      this.setState({ show_error: true, error: "Enter Last Name" });
    } else if (!this.state.lastname_complete) {
      console.log("here");
      this.setState({ lastname_complete: true });
    } else if (this.state.email === "") {
      this.setState({ show_error: true, error: "Enter Email" });
    }
    if (this.state.email !== "") {
      if (
        !this.state.email.match(/^([a-zA-Z0-9_.-]+@([\w-]+\.)+[\w-]{2,10})?$/)
      ) {
        this.setState({ show_error: true, error: "Email is not valid" });
      } else if (this.state.email.length > 0) {
        this.setState({ email_complete: true });
      }
    }
    if (this.state.firstName !== "") {
      if (this.state.firstName.length > 0) {
        this.setState({ firstname_complete: true });
      }
    }
    if (this.state.lastName !== "") {
      if (this.state.lastName.length > 0) {
        this.setState({ lastname_complete: true });
      }
    }
  };

  render() {
    const { value } = this.state;
    return (
      <div className="bcd_header_div_margin">
      {this.state.is_active && <Drawer prop={this.props} />}
        <div className="allpages_desktop_boxes_div ">
          <center>
            
            <div className="container-fluid">
              {this.state.loader && (
                <CircularProgress
                  size={100}
                  style={{ color: "black", marginTop: "17%" }}
                />
              )}
              <Dialog
                style={{ textTransform: "capitalize" }}
                actions={
                  <div>
                    <FlatButton
                      label="Close"
                      labelStyle={{ color: "#000" }}
                      onClick={() =>
                        this.state.nocontest
                          ? (localStorage.setItem("current_state", "perks"),
                            this.props.history.push("/perks"))
                          : this.handleClose()
                      }
                    />
                    {!this.state.relation_exist &&
                      this.state.add_new_relation && (
                        <FlatButton
                          label="Yes"
                          labelStyle={{ color: "#000" }}
                          onClick={this.handleSent.bind(this)}
                        />
                      )}
                    {this.state.relation_exist && (
                      <FlatButton
                        label="Next"
                        labelStyle={{ color: "#000" }}
                        onClick={this.handleNext.bind(this)}
                      />
                    )}
                  </div>
                }
                modal={false}
                open={this.state.open}
                onRequestClose={this.handleClose}
              >
                {this.state.alertmsg}
              </Dialog>
              {!this.state.loader && (
                <div className="paddingtop70">
                  <div className="add_relation_tag">
                    <p>
                      Invite <span className="add_relation_tag_f">F</span>
                      <span className="add_relation_tag_a">A</span>
                      <span className="add_relation_tag_m">M</span>
                      <span className="add_relation_tag_i">I</span>
                      <span className="add_relation_tag_l">L</span>
                      <span className="add_relation_tag_y">Y</span> to join
                    </p>
                    <img
                      src={api.image_path+"family_one.png"}
                      className="family_logo"
                    />
                  </div>
                  <FormControl
                    className="email_text placeholder_color"
                    type="text"
                    value={this.state.firstName}
                    placeholder="Enter Their First Name"
                    autoFocus="true"
                    autoComplete="off"
                    maxLength={15}
                    style={{
                      fontSize:
                        this.state.firstName.length > 0
                          ? this.state.firstName.length < 15
                            ? this.state.firstName.length < 3
                              ? 330 -
                                this.state.firstName.length *
                                  (this.state.firstName.length * 30)
                              : 300 -
                                this.state.firstName.length *
                                  (this.state.firstName.length === 3
                                    ? 55
                                    : this.state.firstName.length === 4
                                      ? 50
                                      : this.state.firstName.length === 5
                                        ? 42
                                        : this.state.firstName.length === 6
                                          ? 38
                                          : this.state.firstName.length === 7
                                            ? 34
                                            : this.state.firstName.length === 8
                                              ? 31
                                              : this.state.firstName.length ===
                                                9
                                                ? 28
                                                : this.state.firstName
                                                    .length === 10
                                                  ? 25.5
                                                  : this.state.firstName
                                                      .length === 11
                                                    ? 23.6
                                                    : this.state.firstName
                                                        .length === 12
                                                      ? 22
                                                      : this.state.firstName
                                                          .length === 13
                                                        ? 20.5
                                                        : 19.2)
                            : 300 - this.state.firstName.length * 18.1
                          : 30,
                      textTransform: "uppercase",
                      fontWeight: "bold",
                      textAlign: "center",
                      color: "black",
                      height: "auto",
                      width: isMobile ? 315 : 400,
                      marginTop: 20,
                      background: "none"
                    }}
                    onKeyPress={event => {
                      if (event.key === "Enter") {
                        if (event.target.value) {
                          if (this.state.firstname_complete) {
                            this.changeEmail();
                          } else {
                            this.setState({ firstname_complete: true });
                          }
                        } else {
                          this.setState({
                            show_error: true,
                            error: "Enter first Name"
                          });
                        }
                      }
                    }}
                    onChange={event => {
                      this.setState({
                        firstName: event.target.value,
                        show_error: false
                      });
                    }}
                  />
                  {this.state.firstname_complete && (
                    <div className="test" style={styles.slideup}>
                      <input
                        className="autoscale_username bcd_secondname"
                        type="text"
                        value={this.state.lastName}
                        placeholder="Last Name"
                        autoFocus="true"
                        autoComplete="off"
                        maxLength={15}
                        style={{
                          fontSize:
                            this.state.lastName.length > 0
                              ? this.state.lastName.length < 15
                                ? this.state.lastName.length < 3
                                  ? 330 -
                                    this.state.lastName.length *
                                      (this.state.lastName.length * 30)
                                  : 300 -
                                    this.state.lastName.length *
                                      (this.state.lastName.length === 3
                                        ? 55
                                        : this.state.lastName.length === 4
                                          ? 50
                                          : this.state.lastName.length === 5
                                            ? 42
                                            : this.state.lastName.length === 6
                                              ? 38
                                              : this.state.lastName.length === 7
                                                ? 34
                                                : this.state.lastName.length ===
                                                  8
                                                  ? 31
                                                  : this.state.lastName
                                                      .length === 9
                                                    ? 28
                                                    : this.state.lastName
                                                        .length === 10
                                                      ? 25.5
                                                      : this.state.lastName
                                                          .length === 11
                                                        ? 23.6
                                                        : this.state.lastName
                                                            .length === 12
                                                          ? 22
                                                          : this.state.lastName
                                                              .length === 13
                                                            ? 20.5
                                                            : 19.2)
                                : 300 - this.state.lastName.length * 18.1
                              : 30,

                          textTransform: "uppercase",
                          backgroundColor:
                            this.state.lastName.length === 0
                              ? "black"
                              : "black",
                          raised: "true",
                          fontWeight: 200,
                          textAlign: "center",
                          fontFamily: "Lato",
                          color: "#ffffff"
                        }}
                        className="bcd_hr"
                        onKeyPress={event => {
                          if (event.key === "Enter") {
                            if (event.target.value) {
                              if (this.state.lastname_complete) {
                                this.changeEmail();
                              } else {
                                this.setState({ lastname_complete: true });
                              }
                            } else {
                              this.setState({
                                show_error: true,
                                error: "Enter Last Name"
                              });
                            }
                          }
                        }}
                        onChange={event =>
                          this.setState({
                            lastName: event.target.value,
                            show_error: false
                          })
                        }
                      />
                      <hr
                        style={{
                          backgroundColor:
                            this.state.lastName.length === 0
                              ? "black"
                              : "black",
                          height: 4,
                          //width: isMobile ? "100%":"400",
                          border: 0,
                          marginTop: 5
                        }}
                        className="bcd_hr"
                      />
                    </div>
                  )}
                  {this.state.lastname_complete && (
                    <div className="test" style={styles.slideup}>
                      <FormControl
                        className="email_text placeholder_capitalize"
                        type="text"
                        value={this.state.email}
                        autoFocus="true"
                        autoComplete="off"
                        onKeyPress={event => {
                          if (event.key === "Enter") {
                            this.changeEmail();
                          }
                        }}
                        style={{
                          textAlign: "center",
                          marginTop: 0,
                          width: isMobile ? 315 : 400,
                          background: "none"
                        }}
                        placeholder={`${this.state.firstName}'s Email Address`}
                        onChange={event =>
                          this.setState({
                            email: event.target.value,
                            show_error: false
                          })
                        }
                      />
                      <br />
                      <br />
                    </div>
                  )}

                  {this.state.firstname_complete &&
                    this.state.lastname_complete &&
                    this.state.email_complete && (
                      <div className="familyshare_relation add_relation_margin">
                        <label className="label label label-default ">
                          <span className="addrelation_fnamespan">
                            {this.state.firstName}
                          </span>
                          <span className="addrelation_fnamespan_second">
                            {" "}
                            is my
                          </span>:
                        </label>
                        <br />
                        <SelectField
                          hintText="Select Relation"
                          value={value}
                          onChange={this.handleChange}
                          style={styles.ddm}
                          className="ddm"
                        >
                          <MenuItem value={"spouse"} primaryText="Spouse" />
                          <MenuItem value={"parent"} primaryText="Parent" />
                          <MenuItem
                            value={"step_parent"}
                            primaryText="Stepparent"
                          />
                          <MenuItem value={"child"} primaryText="Child" />
                          <MenuItem value={"nephew/niece"} primaryText="Nephew/Niece" />
                          <MenuItem value={"son/daughter"} primaryText="Son/Daughter" />
                          <MenuItem value={"grandson/granddaughter"} primaryText="Grand Child" />
                          <MenuItem value={"stepson/stepdaughter"} primaryText="Step Child" />
                          <MenuItem value={"mother/father"} primaryText="Parent" />
                          <MenuItem value={"surrogateson/surrogatedaughter"} primaryText="Surrogate Child" />
                          <MenuItem value={"sibling"} primaryText="Sibling" />
                          <MenuItem
                            value={"uncle_aunt"}
                            primaryText="Uncle/Aunt"
                          />
                          <MenuItem
                            value={"grand_parent"}
                            primaryText="Grandparent"
                          />
                          <MenuItem
                            value={"family_friend"}
                            primaryText="Family Friend"
                          />
                          <MenuItem
                            value={"surrogate"}
                            primaryText="Surrogate"
                          />
                          <MenuItem value={"other"} primaryText="Other" />
                        </SelectField>
                      </div>
                    )}
                  {isMobile && (
                    <div className="button_next_continue_div">
                      {!this.state.email_complete && (
                        <div className="next_btn_div">
                          <button
                            onClick={() => this.changeEmail()}
                            className=""
                          >
                            Next
                          </button>
                        </div>
                      )}
                      {this.state.firstname_complete &&
                        this.state.lastname_complete &&
                        this.state.email_complete && (
                          <div className="continue_btn_div">
                            <button
                              onClick={() => this.handleChange()}
                              className=""
                            >
                              Continue
                            </button>
                          </div>
                        )}
                    </div>
                  )}
                </div>
              )}
              {this.state.show_error && (
                <div className="bcd_shownotification_div">
                  <img src={api.image_path+"error-msg-icon.png"} alt="notify img" />
                  <p className="notify_para">{this.state.error}</p>
                  <div className="bcd_shownotification_div1">
                    <a
                      onClick={() => {
                        this.setState({ show_error: false });
                      }}
                      className="notify_para1"
                    >
                      X
                    </a>
                  </div>
                </div>
              )}
              {!isMobile && (
                <div className="arrow_hidden">
                  <img
                    src={api.image_path+"prev_arrow_one.jpg"}
                    width="40"
                    className="next_icon next_left"
                    onClick={() => {
                      localStorage.setItem("current_state", "set_relation"),
                        this.props.history.push({ pathname: "/set_relation" });
                    }}
                  />
                  <img
                    src={api.image_path+"next_arrow_one.png"}
                    width="40"
                    className="next_icon next_right"
                    onClick={event => this.changeEmail()}
                  />
                </div>
              )}
            </div>
          </center>
        </div>
      </div>
    );
  }
}

const styles = {
  button: {
    margin: 12
  },
  ddm: {
    background: "white",
    height: 45,
    width: 150,
    fontSize: 16,
    display: "block",
    position: "relative",
    paddingLeft: 10
  },
  root: {
    textAlign: "center"
  },
  inputField: {
    width: 500,
    marginLeft: 10,
    marginRight: 10,
    color: "#f1eaea",
    flex: 1,
    characterWidth: 13,
    fontSize: 30,
    paddingTop: 10
  },
  underlineStyle: {
    borderColor: "#fff"
  },
  floatingLabelStyle: {
    color: "#fff",
    fontSize: 30
  },
  floatingLabelFocusStyle: {
    color: "#fff",
    fontSize: 14
  },
  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 Add_relation;
