import React from "react";
import { FormControl, Label } from "react-bootstrap";

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 SelectField from "material-ui/SelectField";
import MenuItem from "material-ui/MenuItem";
import { isMobile } from "react-device-detect";
import Drawer from "./drawer";
import CircularProgress from "@material-ui/core/CircularProgress";
import api from "./api/api";
import cookie from "react-cookies";
let path;
let is_user_verified;
class FamilyShare extends React.Component {
  constructor(props) {
    super(props);
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    if (localStorage.getItem("current_state") !== "family_share") {
      this.props.history.push("/menu_page");
    }
    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);
    console.log("is_user_verified", is_user_verified);
    path = window.location.protocol + "//" + window.location.host;
    console.log("is_edit", localStorage.getItem("is_edit"));
    let is_edit = localStorage.getItem("is_edit");
    localStorage.removeItem("is_edit");
    var contest_id = localStorage.getItem("contest_id");
    console.log("contest_id", localStorage.getItem("contest_id"));
    let user_id = cookie.load("user_id");
    this.state = {
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      check_existing_user: 0,
      loader: false,
      user_id: user_id,
      contest_id: contest_id,
      email: "",
      contactfirstName: "",
      firstName: "",
      contactlastName: "",
      open: false,
      alertmsg: "",
      firstname_complete: false,
      lastname_complete: false,
      email_complete: false,
      enterData: false,
      value: "",
      edit_delete: false,
      editData: false,
      editcontactfirstName: "",
      indexEdit: "",
      relationship: "",
      editcontactEmail: "",
      familymemberdata: [],
      relation_exist: false,
      add_new_relation: false,
      show_error: false,
      error: "",
      relation_id: "",
      is_edit:
        is_edit === "true" || localStorage.getItem("orientation") === "1"
          ? true
          : false,
      orientation: localStorage.getItem("orientation") === "1" ? true : false,
      delete_index: "",
      push_contest: false,
      family_member_user_id: "",
      user_link_activated: ""
    };
    this.handleSubmit = this.handleSubmit.bind(this);
    this.handleSubmitLast = this.handleSubmitLast.bind(this);
    this.submiteditting = this.submiteditting.bind(this);
    this.handleEdit = this.handleEdit.bind(this);
    this.handleContest = this.handleContest.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.handleSubmitEdit = this.handleSubmitEdit.bind(this);
    this.handleConnectMail = this.handleConnectMail.bind(this);
  }

  handleContest = () => {
    var self = this;
    var get_contest = {
      action: "getcontest",
      user_id: cookie.load("user_id"),
      is_active: localStorage.getItem("login_is_active")
    };
    console.log("get_contest", get_contest);
    this.setState({ loader: true });
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(get_contest)
      })
      .then(response => {
        console.log("response", response);
        if (response.data.length > 0) {
          response.data.forEach(element => {
            console.log("element", element);
            if (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) {
            self.setState({ loader: false });

            localStorage.setItem("current_state", "contest");
            localStorage.setItem(
              "contest_array",
              JSON.stringify(response.data)
            );
            localStorage.setItem(
              "contest_detail",
              JSON.stringify(response.data[0])
            );
            localStorage.setItem("contest_index", 0);
            console.log(JSON.parse(localStorage.getItem("contest_array")));
            localStorage.removeItem("orientation");
            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/" +
                    response.data[0]._id +
                    "/" +
                    cookie.load("user_id")
                );
            }
          }
        } 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({
          show_error: true,
          error: "Something Wrong... Please try Again"
        });
      });
  };

  handleSubmitEdit = (event, index, value) => {
    this.setState({
      relationship: value
    });
  };
  submiteditting = value => {
    let index = this.state.indexEdit;

    let tempfamilymemberdata = {};
    let cname = [];
    let tempname = this.state.editcontactfirstName.trim();
    cname = tempname.split(" ");
    console.log("this.state.familymemberdata", this.state.familymemberdata);
    let cfname = cname.slice(0, -1).join(" ");
    let clname = cname.slice(-1).join(" ");
    let familymemberdata = this.state.familymemberdata;
    tempfamilymemberdata.firstName = cfname;
    tempfamilymemberdata.lastName = clname;
    tempfamilymemberdata.relationship = value;
    tempfamilymemberdata.member_email = this.state.editcontactEmail;
    tempfamilymemberdata.email_send = this.state.editcontactEmailSend;
    tempfamilymemberdata.is_verified = this.state.editcontactIsVerified;
    tempfamilymemberdata.user_id = this.state.relation_id;
    tempfamilymemberdata.added_by = "me";
    familymemberdata[index] = tempfamilymemberdata;
    this.setState({
      editData: false,

      familymemberdata: familymemberdata
    });
    let user_id = cookie.load("user_id");
    let finalJson = {
      action: "update",
      user_id: user_id,
      user_metadata: {
        relation: familymemberdata
      }
    };
    var self = this;
    self.setState({ loader: true });
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(finalJson)
      })
      .then(function(response) {
        localStorage.setItem(
          "relation_data",
          JSON.stringify(response.data.user_metadata.relation)
        );
        console.log(JSON.parse(localStorage.getItem("relation_data")));
        self.setState({ loader: false });
      })
      .catch(error => {
        console.log(error);
        self.setState({ loader: false });
        self.setState({
          show_error: true,
          error: "Something Wrong... Please try again"
        });
      });
  };

  handleDelete = value => {
    this.setState({ open: false });
    console.log("value", value);
    var self = this;
    let item = this.state.familymemberdata;
    console.log("item", item);
    delete item[value];
    let familymemberdata = [];
    item.forEach((value, index) => {
      if (typeof value.member_email !== "undefined") {
        familymemberdata.push(item[index]);
      }
    });
    console.log("familymemberdata", familymemberdata);
    this.setState({ familymemberdata: familymemberdata });
    let user_id = cookie.load("user_id");

    let finalJson = {
      action: "update",
      user_id: user_id,
      user_metadata: {
        relation: familymemberdata
      }
    };
    console.log("finalJson", finalJson);
    self.setState({ loader: true });
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(finalJson)
      })
      .then(function(response) {
        localStorage.setItem(
          "relation_data",
          JSON.stringify(response.data.user_metadata.relation)
        );
        console.log(JSON.parse(localStorage.getItem("relation_data")));
        if (
          response.data.user_metadata.relation &&
          response.data.user_metadata.relation.length > 0
        ) {
          self.setState({ loader: false });
          localStorage.setItem(
            "relation_data",
            JSON.stringify(response.data.user_metadata.relation)
          );
          console.log(JSON.parse(localStorage.getItem("relation_data")));
        } else {
          self.setState({ loader: false, enterData: false });
        }
        console.log("response", response);
      })
      .catch(error => {
        console.log(error);
        this.setState({ loader: false });
        this.setState({
          show_error: true,
          error: "Something Wrong... Please try again"
        });
      });
  };

  handleEdit(value) {
    console.log("this.state.familymemberdata", this.state.familymemberdata);
    let item = this.state.familymemberdata[value];
    this.setState({
      editcontactfirstName: item.firstName + " " + item.lastName,
      editData: true,
      indexEdit: value,
      relationship: item.relationship,
      editcontactEmail: item.member_email,
      editcontactEmailSend: item.email_send,
      editcontactIsVerified: item.is_verified,
      relation_id: item.user_id
    });
  }

  handleChange = (event, index, value) => {
    console.log("value", value);
    this.setState({ value: value });
    this.handleSubmitLast(value);
  };

  handleSubmit = () => {
    if (this.state.contactfirstName && !this.state.firstname_complete) {
      if (this.state.contactfirstName.length > 0)
        this.setState({
          firstname_complete: true,
          focuslastNameInput: true,
          name: this.state.contactfirstName
        });
    }
    if (
      this.state.contactlastName &&
      this.state.firstname_complete &&
      !this.state.lastname_complete
    ) {
      let tempname = this.state.name;
      tempname = tempname + " " + this.state.contactlastName;
      if (this.state.contactlastName.length > 0)
        this.setState({
          lastname_complete: true,
          name: tempname,
          focusEmailInput: true
        });
    }
    if (this.state.contactEmail && this.state.lastname_complete) {
      if (this.state.contactEmail === "" || !this.state.contactEmail) {
        this.setState({ show_error: true, error: "Email should not be empty" });
      } else if (
        !this.state.contactEmail.match(
          /^([a-zA-Z0-9_.-]+@([\w-]+\.)+[\w-]{2,10})?$/
        )
      ) {
        this.setState({ show_error: true, error: "Email is not valid" });
      } else if (
        this.state.contactfirstName === "" ||
        !this.state.contactfirstName
      ) {
        this.setState({
          show_error: true,
          error: "First Name should not be empty"
        });
      } else if (!this.state.firstname_complete) {
        this.setState({
          firstname_complete: true
        });
      } else if (
        this.state.contactlastName === "" ||
        !this.state.contactlastName
      ) {
        this.setState({
          show_error: true,
          error: "Last Name should not be empty"
        });
      } else if (!this.state.lastname_complete) {
        this.setState({
          lastname_complete: true
        });
      } else {
        this.setState({
          member_email: this.state.contactEmail,
          email_complete: true
        });
      }
    }
  };

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

    var self = this;
    console.log("self.state.familymemberdata", self.state.familymemberdata);
    let tempfamilymemberdata = {};
    let temprelativefamilymemberdata = {};
    let relative_relation = "";
    if (self.state.favColor === "uncle_aunt") {
      relative_relation = "nephew/niece";
    } else if (self.state.favColor === "parent") {
      relative_relation = "son/daughter";
    } else if (self.state.favColor === "grand_parent") {
      relative_relation = "grandson/granddaughter";
    } else if (self.state.favColor === "step_parent") {
      relative_relation = "stepson/stepdaughter";
    } else if (self.state.favColor === "child") {
      relative_relation = "mother/father";
    } else if (self.state.favColor === "surrogate") {
      relative_relation = "surrogateson/surrogatedaughter";
    } else if (self.state.favColor === "nephew/niece") {
      relative_relation = "uncle_aunt";
    } else if (self.state.favColor === "son/daughter") {
      relative_relation = "parent";
    } else if (self.state.favColor === "grandson/granddaughter") {
      relative_relation = "grandparent";
    } else if (self.state.favColor === "stepson/stepdaughter") {
      relative_relation = "stepparent";
    } else if (self.state.favColor === "mother/father") {
      relative_relation = "child";
    } else if (self.state.favColor === "surrogateson/surrogatedaughter") {
      relative_relation = "surrogate";
    } else {
      relative_relation = self.state.favColor;
    }
    console.log("relative_relation", relative_relation);
    let relativefamilymemberdata = [];
    let familymemberdata = self.state.familymemberdata
    //   ? self.state.familymemberdata
    //   : [];
    tempfamilymemberdata.firstName = self.state.contactfirstName;
    tempfamilymemberdata.lastName = self.state.contactlastName;
    tempfamilymemberdata.relationship = self.state.favColor;
    tempfamilymemberdata.member_email = self.state.contactEmail;
    tempfamilymemberdata.user_id = self.state.family_member_user_id;
    tempfamilymemberdata.is_verified = 0;
    tempfamilymemberdata.email_send = true;
    tempfamilymemberdata.user_verified = self.state.user_link_activated;
    tempfamilymemberdata.added_by = "me";
    familymemberdata.push(tempfamilymemberdata);
    // self.setState({ familymemberdata: familymemberdata });

    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_verified =
      is_user_verified == 1 ? true : false;
    temprelativefamilymemberdata.user_id = cookie.load("user_id");
    temprelativefamilymemberdata.is_verified = 0;
    temprelativefamilymemberdata.email_send = true;
    temprelativefamilymemberdata.added_by = "other";
    relativefamilymemberdata.push(temprelativefamilymemberdata);
    // // self.setState({ familymemberdata: familymemberdata });

    console.log("relativefamilymemberdata", relativefamilymemberdata);

    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.family_member_user_id,

        user_metadata: {
          relation: temprelativefamilymemberdata
        }
      },
      is_user_verified: is_user_verified,
      send_combine_mail_for_contest_nd_relation: {
        user_id: cookie.load("user_id"),
        link:
        api.connect_mail_link +
          self.state.family_member_user_id +
          "/relative_id=" +
          cookie.load("user_id"),
        subject: "Add Relation In Familyone",
        to_name: self.state.contactfirstName,
        relative_email: self.state.contactEmail,
        is_user_exist: self.state.check_existing_user ? 1 : 0,
        sender_name: localStorage.getItem("first_name")
      }
    };
    console.log("addRelativeJson", addRelativeJson);
    self.setState({ loader: true });
    axios
      .request({
        url: api.react_request,
        method: "POST",
        data: JSON.stringify(addRelativeJson)
      })
      .then(function(response) {
        console.log("response", response);
        self.setState({
          relation_exist: true,
          family_member_user_id:""
        });
        if (response.data.update_response) {
          localStorage.setItem(
            "relation_data",
            JSON.stringify(response.data.update_response.user_metadata.relation)
          );
        }
        if (response.data.mail_response) {
          if (response.data.mail_response.message) {
            self.setState({ loader: false });
            localStorage.setItem("current_state", "set_relation");

            
          }
        }
        localStorage.setItem("family_share", "1");
        self.setState({
          enterData: true,
          contactfirstName: "",
          contactlastName: "",
          contactEmail: "",
          name: "",
          member_email: "",
          value:"",
          firstname_complete: false,
          lastname_complete: false,
          email_complete: false,
          focusfirstNameInput: false,
          focuslastNameInput: false,
          focusEmailInput: false,
          familymemberdata: familymemberdata
        });
        self.setState({ loader: false });
      })
      .catch(error => {
        console.log("error", error);
        self.setState({ loader: false });
        self.setState({
          nocontest: false,
          show_error: true,
          error: "Something Wrong... Please try again"
        });
      });
  };

  handleSubmitLast = value => {
    this.setState({
      favColor: value,
      enterData: false
    });
    if (this.state.contactEmail === "" || !this.state.contactEmail) {
      this.setState({ show_error: true, error: "Email should not be empty" });
    } else if (
      !this.state.contactEmail.match(
        /^([a-zA-Z0-9_.-]+@([\w-]+\.)+[\w-]{2,10})?$/
      )
    ) {
      this.setState({ show_error: true, error: "Email is not valid" });
    } else if (
      this.state.contactfirstName === "" ||
      !this.state.contactfirstName
    ) {
      this.setState({
        show_error: true,
        error: "First Name should not be empty"
      });
    } else if (
      this.state.contactlastName === "" ||
      !this.state.contactlastName
    ) {
      this.setState({
        show_error: true,
        error: "Last Name should not be empty"
      });
    } else if (this.state.contactEmail === localStorage.getItem("user_email")) {
      this.setState({ show_error: true, error: "You can not add yourself" });
    } else {
      let contactemail = this.state.contactEmail;
      let contactfirstName = this.state.contactfirstName;
      let contactlastName = this.state.contactlastName;

      if (contactemail !== null) {
        contactemail = contactemail.replace('"', "");
        contactemail.replace(/[`~!@#$%^&*()_|+\-=÷¿?;:'",.<>\\]/gi, "\\$&");
      }
      if (contactfirstName !== null) {
        contactfirstName = contactfirstName.replace('"', "");
        contactfirstName.replace(/[`~!@#$%^&*()_|+\-=÷¿?;:'",.<>\\]/gi, "\\$&");
      }
      if (contactlastName !== null) {
        contactlastName = contactlastName.replace('"', "");
        contactlastName.replace(/[`~!@#$%^&*()_|+\-=÷¿?;:'",.<>\\]/gi, "\\$&");
      }

      // Check existence of the relative user
      // Search the email id for existence
      let getfinaljson = {
        action: "add_relation_signup",
        password: "bewnexus(123)",
        connection: "imported",
        name: this.state.contactfirstName + " " + this.state.contactlastName,
        nickname:
          this.state.contactfirstName + " " + this.state.contactlastName,
        email: this.state.contactEmail,
        user_metadata: {
          first_name: this.state.contactfirstName,
          last_name: this.state.contactlastName,
          is_active: 0,
          link_activated: 0
        }
      };

      var self = this;
      self.setState({ loader: true });
      axios
        .request({
          method: "POST",
          url: api.react_request,
          data: JSON.stringify(getfinaljson)
        })
        .then(function(response) {
          self.setState({
            user_link_activated: response.data.email_verified
          });
          console.log("response", response);
          if (response.data.existing === 1) {
            console.log(
              "self.state.familymemberdata",
              self.state.familymemberdata
            );
            // user_id
            console.log("response.data.existing", response.data.existing);
            self.setState({ check_existing_user: 1 });
            self.setState({ loader: false });
            console.log(
              "self.state.familymemberdata",
              self.state.familymemberdata
            );
            if (self.state.familymemberdata.length !== 0) {
              console.log(
                "self.state.familymemberdata",
                self.state.familymemberdata
              );
              self.state.familymemberdata.forEach(element => {
                if (element.member_email === self.state.contactEmail) {
                  self.setState({ loader: false });
                  self.setState({
                    show_error: true,
                    error:
                      self.state.contactfirstName +
                      " " +
                      self.state.contactlastName +
                      " is already connected with you"
                  });
                  self.setState({
                    relation_exist: true,
                    enterData: true,
                    contactfirstName: "",
                    contactlastName: "",
                    contactEmail: "",
                    name: "",
                    member_email: "",
                    firstname_complete: false,
                    lastname_complete: false,
                    email_complete: false,
                    focusfirstNameInput: false,
                    focuslastNameInput: false,
                    focusEmailInput: false,
                    familymemberdata: self.state.familymemberdata
                  });
                } else {
                  console.log("here");
                  self.setState({ add_new_relation: true });
                  self.setState({ relation_exist: false });
                }
              });
              if (!self.state.relation_exist && self.state.add_new_relation) {
                console.log("else1");
                self.setState({ loader: false });
                var family_memeber_index = self.state.familymemberdata.length;
                let new_family_member = self.state.familymemberdata;
                console.log("new_family_member",new_family_member)
                console.log("family_memeber_index",new_family_member[family_memeber_index-1 ])
                console.log("family_memeber_index",family_memeber_index)
                // new_family_member[family_memeber_index-1 ].user_id =
                //   response.data.user_id;
                self.setState({
                  familymemberdata: new_family_member
                });
                self.setState({
                  loader: false,
                  family_member_user_id: response.data.user_id
                });
                console.log("state", self.state);
                self.handleConnectMail();
              }
            } else {
              console.log("first_member");
              self.setState({
                loader: false,
                family_member_user_id: response.data.user_id
              });
              // let temp_new_family_member={};
              // let new_family_member = [];
              // temp_new_family_member.firstName=self.state.contactfirstName,
              // temp_new_family_member.lastName=self.state.contactlastName,
              // temp_new_family_member.relationship=self.state.value,
              // temp_new_family_member.member_email=response.data.email,
              // temp_new_family_member.user_id=response.data.user_id,
              // temp_new_family_member.is_verified=0,
              // temp_new_family_member.email_send=true,
              // temp_new_family_member.user_verified=localStorage.getItem("login_is_active")==1?true:false,
              // temp_new_family_member.added_by="me",
              // new_family_member.push(temp_new_family_member)
              // console.log("new_family_member",new_family_member)
              // // console.log("family_memeber_index",new_family_member[family_memeber_index-1 ])
              self.setState({
                family_member_user_id:response.data.user_id
              });
              console.log("state", self.state);
              self.handleConnectMail();
            }
          } else {
            console.log("this.state.family_memebr",self.state.familymemberdata)
            // let temp_new_family_member={};
              // let new_family_member = [];
              // temp_new_family_member.firstName=self.state.contactfirstName,
              // temp_new_family_member.lastName=self.state.contactlastName,
              // temp_new_family_member.relationship=self.state.value,
              // temp_new_family_member.member_email=response.data.email,
              // temp_new_family_member.user_id=response.data.user_id,
              // temp_new_family_member.is_verified=0,
              // temp_new_family_member.email_send=true,
              // temp_new_family_member.user_verified=localStorage.getItem("login_is_active")==1?true:false,
              // temp_new_family_member.added_by="me",
              // new_family_member.push(temp_new_family_member)
              // console.log("new_family_member",new_family_member)
              // console.log("family_memeber_index",new_family_member[family_memeber_index-1 ])
              self.setState({
                family_member_user_id:response.data.user_id
              });
              // console.log("state", self.state);
              self.handleConnectMail();
          }
        })
        .catch(error => {
          console.log(error);
          self.setState({ loader: false });
          self.setState({
            show_error: true,
            error: "Something Wrong... Please try again"
          });
        });
    }
  };

  componentDidMount = () => {
    console.log(
      "relation_data",
      JSON.parse(localStorage.getItem("relation_data"))
    );
    
    if (
      typeof localStorage.getItem("relation_data") !== undefined &&
      localStorage.getItem("relation_data") !== null &&
      localStorage.getItem("relation_data") !== "undefined" &&
      JSON.parse(localStorage.getItem("relation_data")).length > 0
    ) {
      let relation_data = localStorage.getItem("relation_data");
      console.log("relation_data", JSON.parse(relation_data));
      this.setState({
        familymemberdata: JSON.parse(relation_data),
        enterData: true
      });
      console.log("state", this.state.familymemberdata);
    } else {
      console.log("here");
      this.setState({ enterData: false });
    }
  };

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

  render() {
    return (
      <div>
        {this.state.is_active && <Drawer prop={this.props} />}
        <div className="bcd_header_div_margin">
          <div className="allpages_desktop_boxes_div familyshare_header_div">
            {this.state.loader && (
              <CircularProgress
                size={100}
                style={{ color: "black", marginTop: "17%" }}
              />
            )}

            <div className="familyshare_divwidth">
              <StyleRoot>
                <div className="test">
                  <div className="container-fluid">
                    <Dialog
                      style={{ textTransform: "capitalize" }}
                      actions={
                        <div>
                          <FlatButton
                            label="Close"
                            labelStyle={{ color: "#000" }}
                            onClick={this.handleClose}
                          />
                          <FlatButton
                            label="Yes"
                            labelStyle={{ color: "#000" }}
                            onClick={() =>
                              this.handleDelete(this.state.delete_index)
                            }
                          />

                          {!this.state.relation_exist &&
                            this.state.add_new_relation && (
                              <FlatButton
                                label="Yes"
                                labelStyle={{ color: "#000" }}
                                onClick={this.handleConnectMail.bind(this)}
                              />
                            )}
                          {/* {this.state.relation_exist && (
                       <FlatButton
                         label="OK"
                         labelStyle={{ color: "#000" }}
                         onClick={this.handleClose}
                       />
                     )} */}
                        </div>
                      }
                      modal={false}
                      open={this.state.open}
                      onRequestClose={this.handleClose}
                    >
                      {this.state.alertmsg}
                    </Dialog>

                    {!this.state.loader &&
                      !this.state.enterData &&
                      !this.state.editData && (
                        <div className="family_share" style={{ paddingTop: 1 }}>
                          <p>Family Share</p>
                          <h3 className="family_share_h">
                            Share with family members.
                            <br />
                            For each family member that enters,
                            <br />
                            you’ll get 2 extra entry points.
                          </h3>
                          {!this.state.enterData && (
                            <div>
                              <FormControl
                                className="email_text first_Name placeholder_color"
                                type="text"
                                value={this.state.contactfirstName}
                                placeholder="First Name"
                                autoFocus="true"
                                autoComplete="off"
                                maxLength={15}
                                style={{
                                  fontSize:
                                    this.state.contactfirstName.length > 0
                                      ? this.state.contactfirstName.length < 15
                                        ? this.state.contactfirstName.length < 3
                                          ? 330 -
                                            this.state.contactfirstName.length *
                                              (this.state.contactfirstName
                                                .length *
                                                30)
                                          : 300 -
                                            this.state.contactfirstName.length *
                                              (this.state.contactfirstName
                                                .length === 3
                                                ? 55
                                                : this.state.contactfirstName
                                                    .length === 4
                                                  ? 50
                                                  : this.state.contactfirstName
                                                      .length === 5
                                                    ? 42
                                                    : this.state
                                                        .contactfirstName
                                                        .length === 6
                                                      ? 38
                                                      : this.state
                                                          .contactfirstName
                                                          .length === 7
                                                        ? 34
                                                        : this.state
                                                            .contactfirstName
                                                            .length === 8
                                                          ? 31
                                                          : this.state
                                                              .contactfirstName
                                                              .length === 9
                                                            ? 28
                                                            : this.state
                                                                .contactfirstName
                                                                .length === 10
                                                              ? 25.5
                                                              : this.state
                                                                  .contactfirstName
                                                                  .length === 11
                                                                ? 23.6
                                                                : this.state
                                                                    .contactfirstName
                                                                    .length ===
                                                                  12
                                                                  ? 22
                                                                  : this.state
                                                                      .contactfirstName
                                                                      .length ===
                                                                    13
                                                                    ? 20.5
                                                                    : 19.2)
                                        : 300 -
                                          this.state.contactfirstName.length *
                                            18.1
                                      : 30,
                                  textTransform: "uppercase",
                                  fontWeight: "bold",
                                  textAlign: "center",
                                  color: "black",
                                  width: isMobile ? "100%" : 400,
                                  marginTop: -17
                                }}
                                onKeyPress={event => {
                                  if (event.key === "Enter") {
                                    if (event.target.value.length > 0) {
                                      this.handleSubmit();
                                    } else {
                                      this.setState({
                                        show_error: true,
                                        error: "Enter First Name"
                                      });
                                    }
                                  }
                                }}
                                onChange={value => {
                                  this.setState({
                                    contactfirstName: value.target.value,
                                    show_error: false
                                  });
                                }}
                              />
                              <div>
                                {this.state.familymemberdata.length > 0 && (
                                  <img
                                    src={api.image_path + "prev_arrow.jpg"}
                                    width="40"
                                    className="next_icon next_left"
                                    onClick={() => {
                                      this.setState({
                                        enterData: true,
                                        contactfirstName: "",
                                        contactlastName: "",
                                        contactEmail: "",
                                        name: "",
                                        member_email: "",
                                        firstname_complete: false,
                                        lastname_complete: false,
                                        email_complete: false,
                                        focusfirstNameInput: false,
                                        focuslastNameInput: false,
                                        focusEmailInput: false
                                        //familymemberdata: this.state
                                        //  .familymemberdata
                                      });
                                    }}
                                  />
                                )}
                                <img
                                  src={api.image_path + "next_arrow_one.png"}
                                  width="40"
                                  className="next_icon next_right"
                                  onClick={event => this.handleSubmit()}
                                />
                              </div>
                            </div>
                          )}

                          {!this.state.enterData &&
                            this.state.firstname_complete && (
                              <div className=" lastname" style={styles.slideup}>
                                <FormControl
                                  className="autoscale_username bcd_secondname"
                                  type="text"
                                  value={this.state.contactlastName}
                                  placeholder="Last Name"
                                  autoFocus="true"
                                  autoComplete="off"
                                  maxLength={15}
                                  style={{
                                    fontSize:
                                      this.state.contactlastName.length > 0
                                        ? this.state.contactlastName.length < 15
                                          ? this.state.contactlastName.length <
                                            3
                                            ? 330 -
                                              this.state.contactlastName
                                                .length *
                                                (this.state.contactlastName
                                                  .length *
                                                  30)
                                            : 300 -
                                              this.state.contactlastName
                                                .length *
                                                (this.state.contactlastName
                                                  .length === 3
                                                  ? 55
                                                  : this.state.contactlastName
                                                      .length === 4
                                                    ? 50
                                                    : this.state.contactlastName
                                                        .length === 5
                                                      ? 42
                                                      : this.state
                                                          .contactlastName
                                                          .length === 6
                                                        ? 38
                                                        : this.state
                                                            .contactlastName
                                                            .length === 7
                                                          ? 34
                                                          : this.state
                                                              .contactlastName
                                                              .length === 8
                                                            ? 31
                                                            : this.state
                                                                .contactlastName
                                                                .length === 9
                                                              ? 28
                                                              : this.state
                                                                  .contactlastName
                                                                  .length === 10
                                                                ? 25.5
                                                                : this.state
                                                                    .contactlastName
                                                                    .length ===
                                                                  11
                                                                  ? 23.6
                                                                  : this.state
                                                                      .contactlastName
                                                                      .length ===
                                                                    12
                                                                    ? 22
                                                                    : this.state
                                                                        .contactlastName
                                                                        .length ===
                                                                      13
                                                                      ? 20.5
                                                                      : 19.2)
                                          : 300 -
                                            this.state.contactlastName.length *
                                              18.1
                                        : 30,

                                    textTransform: "uppercase",
                                    backgroundColor:
                                      this.state.contactlastName.length === 0
                                        ? "black"
                                        : "black",
                                    fontWeight: 100,
                                    textAlign: "center",
                                    fontFamily: "Lato",
                                    color: "#ffffff"
                                  }}
                                  onKeyPress={event => {
                                    if (event.key === "Enter") {
                                      if (event.target.value.length > 0) {
                                        this.handleSubmit();
                                      } else {
                                        this.setState({
                                          show_error: true,
                                          error: "Enter Last Name"
                                        });
                                      }
                                    }
                                  }}
                                  onChange={value => {
                                    this.setState({
                                      contactlastName: value.target.value,
                                      show_error: false
                                    });
                                  }}
                                />
                                <hr
                                  style={{
                                    backgroundColor: "black",
                                    height: 4,
                                    border: 0,
                                    marginTop: 0
                                  }}
                                  className="bcd_hr"
                                />
                              </div>
                            )}
                          <br />
                          {!this.state.enterData &&
                            this.state.firstname_complete &&
                            this.state.lastname_complete && (
                              <div
                                className="test email_class1"
                                style={styles.slideup}
                              >
                                <FormControl
                                  className="email_text email_detail placeholder_capitalize"
                                  type="text"
                                  name="contactEmail"
                                  autoFocus="true"
                                  autoComplete="off"
                                  value={this.state.contactEmail}
                                  placeholder={`${
                                    this.state.contactfirstName
                                  }'s Email Address`}
                                  style={{
                                    color: "black",
                                    textAlign: "center",
                                    width: isMobile ? "auto" : 400
                                  }}
                                  onKeyPress={event => {
                                    if (event.key === "Enter") {
                                      if (event.target.value.length > 0) {
                                        this.handleSubmit();
                                      } else {
                                        this.setState({
                                          show_error: true,
                                          error: "Enter Email"
                                        });
                                      }
                                    }
                                  }}
                                  onChange={value => {
                                    this.setState({
                                      contactEmail: value.target.value,
                                      show_error: false
                                    });
                                  }}
                                />
                              </div>
                            )}

                          {!this.state.enterData && (
                            <div>
                              {this.state.firstname_complete &&
                                this.state.lastname_complete &&
                                this.state.email_complete && (
                                  <div className="familyshare_relation">
                                    <label className="label">
                                      <span className="addrelation_fnamespan">
                                        {this.state.contactfirstName}
                                      </span>
                                      <span className="addrelation_fnamespan_second">
                                        {" "}
                                        is my
                                      </span>
                                      :
                                    </label>
                                    <br />
                                    <center>
                                      <SelectField
                                        hintText="Select Relation"
                                        value={this.state.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={"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={"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={
                                            "surrogateson/surrogatedaughter"
                                          }
                                          primaryText="Surrogate Child"
                                        />
                                        <MenuItem
                                          value={"other"}
                                          primaryText="Other"
                                        />
                                      </SelectField>
                                    </center>
                                    <br />
                                  </div>
                                )}
                              {isMobile && (
                                <div className="button_next_continue_div">
                                  {!this.state.email_complete && (
                                    <div className="next_btn_div">
                                      <button
                                        onClick={() => this.handleSubmit()}
                                        className=""
                                      >
                                        Next
                                      </button>
                                    </div>
                                  )}
                                  {this.state.firstname_complete &&
                                    this.state.lastname_complete &&
                                    this.state.email_complete && (
                                      <div className="continue_btn_div">
                                        <button
                                          onClick={() => this.handleSubmit()}
                                          className=""
                                        >
                                          Continue
                                        </button>
                                      </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",
                                        "share"
                                      ),
                                        this.props.history.push("/share");
                                    }}
                                  />
                                  {/* <img
                                    src={api.image_path + "next_arrow_one.png"}
                                    width="40"
                                    className="next_icon next_right"
                                    onClick={() => this.handleSubmit()}
                                  /> */}
                                </div>
                              )}
                            </div>
                          )}
                        </div>
                      )}
                    {!this.state.loader &&
                      this.state.enterData &&
                      !this.state.editData && (
                        <center>
                          <div className="familyshare_row paddingtop">
                            <div className="familyshare_row_first">
                              {this.state.familymemberdata &&
                                this.state.familymemberdata.length > 0 &&
                                this.state.familymemberdata.map(
                                  (members, indexs) => (
                                    <div
                                      className="col-md-12 col-sm-12  "
                                      style={{ display: "flex" }}
                                      key={"firstdiv" + indexs}
                                    >
                                      <div
                                        className="col-md-6 col-sm-6 col-xs-6"
                                        key={"sesconddiv" + indexs}
                                      >
                                        <div
                                          style={{
                                            backgroundColor: "#8862b9"
                                          }}
                                          key={"thirddiv" + indexs}
                                          className="familyshare_relation_name"
                                        >
                                          {members.relationship ===
                                            "grand_parent" && (
                                            <h4>Grand Parent</h4>
                                          )}
                                          {members.relationship ===
                                            "spouse" && <h4>Spouse</h4>}
                                          {members.relationship === "child" && (
                                            <h4>Child</h4>
                                          )}
                                          {members.relationship ===
                                            "nephew/niece" && (
                                            <h4>Nephew/Niece</h4>
                                          )}
                                          {members.relationship ===
                                            "son/daughter" && <h4>Child</h4>}
                                          {members.relationship ===
                                            "grandson/granddaughter" && (
                                            <h4>Grand Child</h4>
                                          )}
                                          
                                          {members.relationship ===
                                            "surrogateson/surrogatedaughter" && (
                                            <h4>Surrogate Child</h4>
                                          )}
                                          {members.relationship ===
                                            "parent" && <h4>Parent</h4>}
                                          {members.relationship ===
                                            "uncle_aunt" && (
                                            <h4>
                                              Uncle/
                                              <br />
                                              Aunt
                                            </h4>
                                          )}
                                          {members.relationship ===
                                            "surrogate" && <h4>Surrogate</h4>}
                                          {members.relationship ===
                                            "family_friend" && (
                                            <h4>
                                              Family
                                              <br />
                                              Friend
                                            </h4>
                                          )}
                                          {members.relationship ===
                                            "step_parent" && (
                                            <h4>Stepparent</h4>
                                          )}
                                          {members.relationship ===
                                            "sibling" && <h4>Sibling</h4>}
                                          {members.relationship === "other" && (
                                            <h4>Other</h4>
                                          )}
                                        </div>
                                      </div>
                                      <div className="col-lg-6 fshare_divwidth">
                                        <p className="familyshare_fullname">
                                          {members.firstName +
                                            " " +
                                            members.lastName}
                                        </p>
                                        <br />
                                        <br />
                                        <p className="familyshare_email">
                                          {members.member_email}
                                        </p>
                                      </div>
                                      <div style={{ display: "flex" }}>
                                        <img
                                          className="relation_delete"
                                          src={
                                            api.image_path + "deleteimage.jpg"
                                          }
                                          /* onClick={this.handleDelete.bind(
                                            this,
                                            {
                                              indexs
                                            }
                                          )} */
                                          onClick={() =>
                                            this.setState({
                                              open: true,
                                              alertmsg:
                                                "Do You Want To Delete This Relation",
                                              delete_index: indexs
                                            })
                                          }
                                          alt=""
                                        />
                                        &nbsp;
                                        <img
                                          src={api.image_path + "editimg.jpg"}
                                          onClick={this.handleEdit.bind(
                                            this,
                                            indexs
                                          )}
                                          className="relation_edit"
                                          alt=""
                                        />
                                      </div>
                                      <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",
                                              "share"
                                            ),
                                              this.props.history.push("/share");
                                          }}
                                        />
                                        <img
                                          src={
                                            api.image_path +
                                            "next_arrow_one.png"
                                          }
                                          width="40"
                                          className="next_icon next_right"
                                          onClick={() => this.handleSubmit()}
                                        />
                                      </div>
                                    </div>
                                  )
                                )}
                            </div>
                            <div className="familyshare_btnshare">
                              <button
                                style={{
                                  backgroundColor: "rgb(136, 98, 185)",
                                  marginTop: 30,
                                  border: 0,
                                  cursor: "pointer"
                                }}
                                className="btnyes"
                                onClick={() =>
                                  this.setState({ enterData: false })
                                }
                              >
                                +<br />
                                Family
                              </button>
                            </div>
                            {!this.state.orientation && (
                              <div className="familyshare_btndone_div">
                                <button
                                  className="donebtn familyshare_btndone"
                                  onClick={() => {
                                    localStorage.getItem("family_share") == "1"
                                      ? localStorage.setItem(
                                          "current_state",
                                          "share"
                                        )
                                      : localStorage.setItem(
                                          "current_state",
                                          "family_share_orientation"
                                        );

                                    localStorage.getItem("family_share") == "1"
                                      ? this.props.history.push("/share")
                                      : this.props.history.push(
                                          "/family_share_orientation"
                                        );
                                  }}
                                >
                                  Done
                                </button>
                              </div>
                            )}
                            {this.state.orientation && (
                              <div className="familyshare_btndone_div">
                                <button
                                  className="donebtn familyshare_btndone"
                                  onClick={() => this.handleContest()}
                                >
                                  Done
                                </button>
                              </div>
                            )}
                          </div>
                        </center>
                      )}
                    {!this.state.loader &&
                      /* !this.state.enterData && */
                      this.state.editData && (
                        <div className="paddingtop">
                          <FormControl
                            className="email_text"
                            type="text"
                            name="contactlastName "
                            value={this.state.editcontactfirstName}
                            placeholder="Name"
                            autoComplete="off"
                            autoFocus="true"
                            maxLength={15}
                            style={{
                              fontSize:
                                this.state.editcontactfirstName.length > 0
                                  ? this.state.editcontactfirstName.length < 15
                                    ? this.state.editcontactfirstName.length < 3
                                      ? 330 -
                                        this.state.editcontactfirstName.length *
                                          (this.state.editcontactfirstName
                                            .length *
                                            30)
                                      : 300 -
                                        this.state.editcontactfirstName.length *
                                          (this.state.editcontactfirstName
                                            .length === 3
                                            ? 55
                                            : this.state.editcontactfirstName
                                                .length === 4
                                              ? 50
                                              : this.state.editcontactfirstName
                                                  .length === 5
                                                ? 42
                                                : this.state
                                                    .editcontactfirstName
                                                    .length === 6
                                                  ? 38
                                                  : this.state
                                                      .editcontactfirstName
                                                      .length === 7
                                                    ? 34
                                                    : this.state
                                                        .editcontactfirstName
                                                        .length === 8
                                                      ? 31
                                                      : this.state
                                                          .editcontactfirstName
                                                          .length === 9
                                                        ? 28
                                                        : this.state
                                                            .editcontactfirstName
                                                            .length === 10
                                                          ? 25.5
                                                          : this.state
                                                              .editcontactfirstName
                                                              .length === 11
                                                            ? 23.6
                                                            : this.state
                                                                .editcontactfirstName
                                                                .length === 12
                                                              ? 22
                                                              : this.state
                                                                  .editcontactfirstName
                                                                  .length === 13
                                                                ? 20.5
                                                                : 19.2)
                                    : 300 -
                                      this.state.editcontactfirstName.length *
                                        18.1
                                  : 30,
                              textTransform: "uppercase",
                              fontWeight: "bold",
                              textAlign: "center",
                              color: "black",
                              background: "transparent"
                            }}
                            /* onKeyPress={event => {
                       if (event.key === "Enter") {
                         this.handleinputEdit("name");
                       }
                     }} */
                            onChange={value => {
                              this.setState({
                                editcontactfirstName: value.target.value,
                                show_error: false
                              });
                            }}
                          />

                          <br />

                          <FormControl
                            className="autoscale_username email_detail fshare_editmail"
                            type="text"
                            value={this.state.editcontactEmail}
                            placeholder="Email"
                            autoFocus="true"
                            autoComplete="off"
                            maxLength={30}
                            style={{
                              textAlign: "center"
                            }}
                            /*onKeyPress={event => {
                       if (event.key === "Enter") {
                         this.handleinputEdit("email");
                       }
                     }}*/
                            onChange={value => {
                              this.setState({
                                editcontactEmail: value.target.value,
                                show_error: false
                              });
                            }}
                          />

                          <br />
                          {this.state.editData && (
                            <div className="familyshare_relation">
                              <label className="label">
                                {this.state.contactfirstName} is my:
                              </label>
                              <br />
                              <center>
                                <SelectField
                                  hintText="Select Relation"
                                  value={this.state.relationship}
                                  onChange={this.handleSubmitEdit}
                                  style={styles.ddm}
                                  className="ddm"
                                >
                                  <MenuItem
                                    value={"parent"}
                                    primaryText="Parent"
                                  />
                                  <MenuItem
                                    value={"step_parent"}
                                    primaryText="Stepparent"
                                  />
                                  <MenuItem
                                    value={"child"}
                                    primaryText="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={"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={"surrogateson/surrogatedaughter"}
                                    primaryText="Surrogate Child"
                                  />
                                  <MenuItem
                                    value={"other"}
                                    primaryText="Other"
                                  />
                                </SelectField>
                              </center>
                              <br />
                              <div className="button_next_continue_div">
                                {/* {this.state.verify_code_complete && ( */}
                                <div className="next_btn_div">
                                  <button
                                    onClick={
                                      event =>
                                        this.submiteditting(
                                          this.state.relationship
                                        )
                                      /* : this.handleSubmitAddress() */
                                    }
                                    className=""
                                  >
                                    Update
                                  </button>
                                </div>
                                {/* )} */}
                              </div>
                              <div className="row">
                                <a
                                  onClick={() =>
                                    this.setState({
                                      editData: false,
                                      enterData: true
                                    })
                                  }
                                  style={{ color: "black" }}
                                >
                                  Cancel
                                </a>
                              </div>
                              {!isMobile && (
                                <div className="arrow_hidden">
                                  <div className="col-md-6 col-lg-6 ">
                                    <img
                                      src={
                                        api.image_path + "next_arrow_one.png"
                                      }
                                      width="40"
                                      className="next_icon next_right"
                                      onClick={
                                        event =>
                                          this.submiteditting(
                                            this.state.relationship
                                          )
                                        /* : this.handleSubmitAddress() */
                                      }
                                    />
                                  </div>
                                </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>
                    )}
                  </div>
                </div>
              </StyleRoot>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

const styles = {
  button: {
    margin: 12
  },
  ddm: {
    background: "white",
    height: 45,
    width: 150,
    fontSize: 16,
    display: "block",
    position: "relative",
    paddingLeft: 10,
    paddingRight: 0,
    marginTop: 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 FamilyShare;
