import React from "react";
import ButtonSelect from "./ButtonSelect";
import { FormControl } from "react-bootstrap";
import axios from "axios";
import CircularProgress from "@material-ui/core/CircularProgress";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import { isMobile } from "react-device-detect";
import DatePicker from "react-mobile-datepicker";
import DatePickerMaterial from "material-ui/DatePicker";
import MuiThemeProvider from "material-ui/styles/MuiThemeProvider";
import Drawer from "./drawer";
import { slideInRight } from "react-animations";
import Radium, { StyleRoot } from "radium";
import cookie from 'react-cookies'
import api from "./api/api";
const monthMap = {
  "01": "Jan",
  "02": "Feb",
  "03": "Mar",
  "04": "Apr",
  "05": "May",
  "06": "Jun",
  "07": "Jul",
  "08": "Aug",
  "09": "Sep",
  "10": "Oct",
  "11": "Nov",
  "12": "Dec"
};

class Family extends React.Component {
  constructor(props) {
    super(props);
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    console.log("is_signup", localStorage.getItem("is_signup"));
    if (
      localStorage.getItem("current_state") !== "family")  {
        this.props.history.push("/menu_page");
      }
sessionStorage.setItem("hey","hey")
    let is_edit = localStorage.getItem("is_edit");
    console.log("is_edit", is_edit);
    console.log("is_edit", is_edit);

    let secondMinDate = new Date();
    secondMinDate.setFullYear(secondMinDate.getFullYear() - 19);

    secondMinDate.setHours(0, 0, 0, 0);
    let secondMaxDate = new Date();
    // secondMaxDate.setDate(secondMaxDate.getDate()-1)
    console.log("secondMinDate", secondMinDate);
    let firstminDate = new Date();
    firstminDate.setMonth(firstminDate.getMonth());
    firstminDate.setDate(firstminDate.getDate() + 1);
    firstminDate.setHours(0, 0, 0, 0);
    let firstmaxDate = new Date();
    firstmaxDate.setMonth(firstmaxDate.getMonth() + 9);
    firstmaxDate.setHours(0, 0, 0, 0);

    this.state = {
      familychildren: [],
      time: new Date(),
      relationtochildren: "",
      isOpen: false,
      loader: false,
      is_next: 0,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      open: false,
      alertmsg: "",
      firstmaxDate: firstmaxDate,
      firstminDate: firstminDate,
      secondMinDate: secondMinDate,
      secondMaxDate: secondMaxDate,
      date: new Date(),
      nocontest: false,
      is_edit: is_edit,
      is_expecting:
        localStorage.getItem("relation_with_children1") == "expecting_child"
          ? true
          : false,
      both:
        localStorage.getItem("relation_with_children1") == "both"
          ? true
          : false,
      show_edit_delete: false,
      index: "",
      delete_index: "",
      delete:false,
      push_contest: false
    };
    this.handleClick = this.handleClick.bind(this);
    this.changeDate = this.changeDate.bind(this);
    this.handleDelete = this.handleDelete.bind(this);
    this.show_edit_delete = this.show_edit_delete.bind(this);
  }
  onDateChange = date => this.setState({ date });
  //slide for the button
  show_edit_delete = index => {
    console.log(index);
    this.setState({ index: index });
  };

  componentDidMount = () => {
    console.log("state edit", this.state.is_edit);
    console.log(
      "relation_with_children",
      localStorage.getItem("relation_with_children")
    );
    console.log(
      "relation_with_children1",
      localStorage.getItem("relation_with_children1")
    );
    let relationtochild = localStorage.getItem("relation_with_children");
    let expectingchild = localStorage.getItem("relation_with_children1");
    let e_child = "expecting_child";
    let have_a_children = "have_a_children";

    let getChildJson = {
      action: "get_information_wt_child",
      user_id: cookie.load("user_id")
    };
    let self = this;
    self.setState({ loader: true });
    axios
      .request({
        method: "POST",
        url: api.react_request,
        data: JSON.stringify(getChildJson)
      })
      .then(function(response) {
        console.log("response", response);
        let familychildren = [];
        if (response.data) {
          if (
            typeof response.data.user_metadata.child_data !== undefined &&
            response.data.user_metadata.child_data
          ) {
            localStorage.setItem(
              "child_data",
              JSON.stringify(response.data.user_metadata.child_data)
            );
            response.data.user_metadata.child_data.forEach(element => {
              let temp_family = {};

              console.log("element", element);
              let date = new Date();
              let year = date.getFullYear();
              let month = date.getMonth() + 1;
              month = month < 10 ? "0" + month : month;
              let day = date.getDate();
              
              let today = year + "-" + month + "-" + day;

              if (element.boy_or_girl == "Girl") {
                if (element.baby_birthday > today) {
                  temp_family["is_expecting"] = true;
                  temp_family["colorname"] = "rgb(247, 154, 201)";
                } else {
                  temp_family["is_expecting"] = false;
                  temp_family["colorname"] = "rgb(247, 57, 147)";
                }
              } else if (element.boy_or_girl == "Boy") {
                if (element.baby_birthday > today) {
                  temp_family["is_expecting"] = true;
                  temp_family["colorname"] = "rgb(141, 215, 224)";
                } else {
                  temp_family["is_expecting"] = false;
                  temp_family["colorname"] = "rgb(7, 217, 252)";
                }
              } else {
                if (element.baby_birthday > today) {
                  temp_family["is_expecting"] = true;
                  temp_family["colorname"] = "rgb(179, 179, 179)";
                }
              }
              temp_family["gender"] = element.boy_or_girl;
              temp_family["child_id"] = element.child_id;
              temp_family["date"] = element.baby_birthday;
              console.log("temp_family", temp_family);
              familychildren.push(temp_family);
            });
            console.log("familychildren", familychildren);
            self.setState({ loader: false });
            self.setState({ familychildren: familychildren });
          }
          self.setState({ loader: false });
        }
      })
      .catch(error=>{
        console.log("error",error);
        self.setState({ loader: false });
        self.setState({
          show_error: true,
          error: "Something Wrong... Please try Again"
        });
      })

    this.setState({
      relationtochildren: relationtochild
    });
  };

  expecting_click = () => {
    console.log("testing process is completae");
  };

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

  // Delete child from the list
  handleDelete = value => {
    console.log("value", value);
    this.setState({ open: false });
    let item = this.state.familychildren;
    if (isNaN(value)) {
      console.log("value", value);
      delete item[value.indexs];
    } else {
      console.log("value", value);
      delete item[value];
    }
    let familychildrendata = [];
    item.forEach((value, index) => {
      if (typeof value.gender !== "undefined") {
        familychildrendata.push(item[index]);
      }
    });

    this.setState({ familychildren: familychildrendata });
    console.log("familychildren", familychildrendata);
  };

  handleClick = indexs => {
    let familychildren = this.state.familychildren;
    if (isMobile) {
      let minDate;
      let maxDate;
      if (familychildren[indexs].is_expecting === false) {
        let secondMinDate = new Date();
        console.log("secondMinDate", secondMinDate);
        secondMinDate.setFullYear(secondMinDate.getFullYear() - 19);
        console.log("secondMinDate", secondMinDate);
        secondMinDate.setHours(0, 0, 0, 0);
        console.log("secondMinDate", secondMinDate);
        maxDate = new Date();
        minDate = secondMinDate;
      } else {
        let firstminDate = new Date();
        firstminDate.setMonth(firstminDate.getMonth());
        firstminDate.setDate(firstminDate.getDate() + 1);
        firstminDate.setHours(0, 0, 0, 0);
        let firstmaxDate = new Date();
        firstmaxDate.setMonth(firstmaxDate.getMonth() + 9);

        firstmaxDate.setHours(0, 0, 0, 0);
        minDate = firstminDate;
        maxDate = firstmaxDate;
      }
      this.setState({
        changeDateIndex: indexs,
        minDate: minDate,
        maxDate: maxDate
      });
      this._showDateTimePicker();
    }
  };
  _showDateTimePicker = () => this.setState({ isOpen: true });

  _hideDateTimePicker = () => this.setState({ isOpen: false });

  handleSelect = deadlineDate => {
    this.setState({ isOpen: false, is_next: 1 });
    let tempmonth = parseInt(deadlineDate.getMonth(), 10) + 1;
    let month = tempmonth < 10 ? "0" + tempmonth : tempmonth;
    let selectedDate =
      deadlineDate.getFullYear() + "-" + month + "-" + deadlineDate.getDate();

    let familychildren = this.state.familychildren;
    familychildren[this.state.changeDateIndex].date = selectedDate;

    this.setState({
      familychildren: familychildren
    });
  };

  handleCancel = () => {
    this.setState({ isOpen: false });
  };
  navigation = () => {
    // const child_data_result = JSON.parse(localStorage.getItem("child_data"));
    // console.log("child_data_result", child_data_result);
    // if (child_data_result) {
    //   this.setState({ is_next: 1 });
    // }
    // console.log("child_data_result", child_data_result);
    console.log("state", this.state);
    console.log("this.state.familychildren", this.state.familychildren);
    console.log("this.state.is_next", this.state.is_next);
    let date_empty = 1;
    this.state.familychildren.forEach(element => {
      if (element.date == "") {
        console.log("empty");
      } else {
        date_empty = 0;
        console.log("not empty");
      }
    });
    if (date_empty === 0 && this.state.familychildren.length > 0) {
      this.setState({ loader: true });

      let child_list = this.state.familychildren;
      let addchildren = [];
      let user_id = cookie.load("user_id");
      let familychildren = [];
      let children = [];

      child_list.forEach(value => {
        console.log("value", value);
        if (value.date !== "") {
          let tempfamilychild = {};
          let tempchild = {};
          tempfamilychild.gender = value.gender;
          tempfamilychild.date = value.date;
          tempfamilychild.colorname = value.colorname;
          tempfamilychild.is_expecting = value.is_expecting;
          tempfamilychild.child_id = value.child_id;
          var gender =
            value.gender === "Girl"
              ? "Girl"
              : value.gender === "Boy"
                ? "Boy"
                : "Unknown";

          (tempchild.baby_birthday = value.date),
            (tempchild.boy_or_girl = value.gender);
          (tempchild.enfamil_OptIn = "No"),
            (tempchild.child_first_name = ""),
            (tempchild.child_last_name = ""),
            (tempchild.child_id = value.child_id),
            (tempchild.relation = this.state.relationtochildren);
          children.push(tempchild);
        }
        // return [familychildren,children];
      });
      console.log("children", children);

      var finalJson = {
        action: "add_child_nd_getcontest",
        user_id: cookie.load("user_id"),
        child_info: children,
        get_contest: {
          user_id: cookie.load("user_id"),
          is_active: localStorage.getItem("login_is_active")
        }
      };
      let self = this;
      console.log("finalJson", finalJson);
      axios
        .request({
          method: "POST",
          url: api.react_request,
          data: JSON.stringify(finalJson)
        })
        .then(response => {
          console.log("response", response);
          if (response.data.update_response.user_metadata.child_data) {
            localStorage.setItem(
              "child_data",
              JSON.stringify(
                response.data.update_response.user_metadata.child_data
              )
            );
          }
          if (localStorage.getItem("is_edit") === "true") {
            localStorage.removeItem("is_edit");
            // localStorage.getItem("is_signup","false")
            localStorage.setItem("current_state", "edit");
            self.props.history.push("/edit");
          } else if (response.data.contest_response) {
            if (typeof cookie.load("refered_contest_id") !== undefined &&
            cookie.load("refered_contest_id") !== "undefined" &&
            cookie.load("refered_contest_id") !== "null" &&
            cookie.load("refered_contest_id") !== null &&
            cookie.load("refered_contest_id")) {
              console.log(
                "contest_id refered",
                cookie.load("refered_contest_id")
              );
              localStorage.setItem("current_state", "contest");
              
              response.data.contest_response.forEach(
                (element, index) => {
                  if (
                    element.contest_id ===
                    cookie.load("refered_contest_id")
                  ) {
                    localStorage.setItem(
                      "is_contest",
                      element.is_contest
                    );
                    console.log("index", index);
                    localStorage.setItem(
                      "contest_array",
                      JSON.stringify(response.data.contest_response)
                    );
                    localStorage.setItem(
                      "contest_detail",
                      JSON.stringify(element)
                    );
                    localStorage.setItem("contest_index", index);
                  }
                }
              );

              self.setState({ loader: false });
              self.props.history.push(
                "/Contest/" +
                cookie.load("refered_contest_id") +
                  "/" +
                  cookie.load("user_id")
              );
            } else {
              let contest =[];
                    let freebies =[];
              response.data.contest_response.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 (element.is_contest == 0) {
                  freebies.push(element);
                  self.setState({ is_freebies: true, freebies: freebies });
                } else {
                  contest.push(element);
                  self.setState({ is_contest: true, contest: contest });
                }
              });
              if (self.state.push_contest) {
                localStorage.setItem(
                  "contest_array",
                  JSON.stringify(response.data.contest_response)
                );
                localStorage.setItem(
                  "contest_detail",
                  JSON.stringify(response.data.contest_response[0])
                );
                localStorage.setItem("contest_index", 0);
                console.log(JSON.parse(localStorage.getItem("contest_array")));
                localStorage.setItem("current_state", "contest");
                console.log(localStorage.getItem("need_to_claim"))
                if(typeof(localStorage.getItem("need_to_claim"))!== undefined && localStorage.getItem("need_to_claim") !== "undefined" && localStorage.getItem("need_to_claim")!=="null" && localStorage.getItem("need_to_claim")!==null){
                  console.log(JSON.parse(localStorage.getItem("need_to_claim")))
                  localStorage.setItem("current_state", "won"),
                  localStorage.setItem("need_to_claim_detail",JSON.stringify(JSON.parse(localStorage.getItem("need_to_claim"))[0]))
                  self.props.history.push("/won")
                }
                else{
                  if (freebies.length > 0) {
                    localStorage.setItem("current_state", "contest"),
                    self.props.history.push(
                      "/Contest/" +
                        response.data.contest_response[0]._id +
                        "/" +
                        cookie.load("user_id")
                    );
                  } else {
                    localStorage.setItem("current_state", "no_freebie"),
                    self.props.history.push("/no_freebie");
                  }
                  
                }
                
              }
            }
          } else {
            self.setState({ loader: false });
            localStorage.setItem("current_state", "no_contest"),
            self.props.history.push("/no_contest");
          }
        })
        .catch(error => {
          console.log("error", error);
          this.setState({ loader: false });
          this.setState({
            nocontest: false,
            open: true,
            alertmsg: "Something Wrong... Please try again later"
          });
        });
    } else {
      this.setState({
        nocontest: false,
        open: true,
        alertmsg: "Please add due date/date of birth for your added child(ren)"
      });
    }
  };
  onChange = (index, selectedvalue, fieldname, colorname) => {
    let current_familychidren = {};
    let familychildren = this.state.familychildren;
    current_familychidren.colorname = colorname;
    current_familychidren.gender = selectedvalue;
    current_familychidren.date = "";
    if (fieldname === "Children") current_familychidren.is_expecting = false;
    else current_familychidren.is_expecting = true;
    familychildren.push(current_familychidren);
    this.setState({
      familychildren: familychildren
    });
  };

  changeDate = (event, deadlineDate) => {
    this.setState({ isOpen: false, is_next: 1 });
    let tempmonth = parseInt(deadlineDate.getMonth(), 10) + 1;
    let month = tempmonth < 10 ? "0" + tempmonth : tempmonth;
    let selectedDate =
      deadlineDate.getFullYear() + "-" + month + "-" + deadlineDate.getDate();

    let familychildren = this.state.familychildren;
    familychildren[this.state.changeDateIndex].date = selectedDate;

    this.setState({
      familychildren: familychildren
    });
  };

  openDatePicker() {
    this.refs.dp.openDialog();
  }

  render() {
    return (
      <div>
        {this.state.is_active && <Drawer prop={this.props} />}
        <div style={styles.container}>
          {this.state.loader && (
            <div style={{ textAlign: "center" }}>
              <CircularProgress
                size={100}
                style={{ color: "black", marginTop: "17%" }}
              />
            </div>
          )}
          <Dialog
            style={{ textTransform: "capitalize" }}
            actions={
              <div>
                <FlatButton
                  label="Close"
                  labelStyle={{ color: "#000" }}
                  onClick={() => this.handleClose()}
                />
                {this.state.delete && (
                  <FlatButton
                    label="Yes"
                    labelStyle={{ color: "#000" }}
                    onClick={() => this.handleDelete(this.state.delete_index)}
                  />
                )}
              </div>
            }
            modal={false}
            open={this.state.open}
            /* onRequestClose={() => {
                this.state.nocontest == true
                  ? this.props.history.push("/set_relation")
                  : this.handleClose;
              }} */
          >
            {this.state.alertmsg}
          </Dialog>
          {!this.state.loader && (
            <div className="fac_header">
              <div className="fac_header_text">
                <label>Build Your Family</label>
              </div>
              <div className="click_to_add_div">
                <label>Click to add</label>
              </div>
              <div className="fac_btn_form">
                <div className="fac_button_div">
                  {!this.state.both &&
                    this.state.is_expecting && (
                      <div className="fac_btn_both_div">
                        <div className="radiobuttons2" id="expecting">
                          <ButtonSelect
                            className="rb"
                            id="rb1"
                            style={styles.expecting}
                            fieldname="Expectant"
                            radioOption={[
                              {
                                value: "Boy",
                                displayValue: "+Boy",
                                color: "#8dd7e0"
                              },
                              {
                                value: "Girl",
                                displayValue: "+Girl",
                                color: "#f79ac9"
                              },
                              {
                                value: "Un-known",
                                displayValue: "+Unknown",
                                color: "#b3b3b3"
                              }
                            ]}
                            onChange={this.onChange}
                          />
                        </div>
                      </div>
                    )}
                  {!this.state.both &&
                    !this.state.is_expecting && (
                      <div className="fac_btn_both_div">
                        <div className="radiobuttons1" id="existing">
                          <ButtonSelect
                            className="rb"
                            id="rb2"
                            fieldname="Children"
                            radioOption={[
                              {
                                value: "Boy",
                                displayValue: "+Boy",
                                color: "#07d9fc"
                              },
                              {
                                value: "Girl",
                                displayValue: "+Girl",
                                color: "#f73993"
                              }
                            ]}
                            onChange={this.onChange}
                          />
                        </div>
                      </div>
                    )}
                  {this.state.both && (
                    <div className="fac_btn_both_div">
                      <div className="radiobuttons2" id="expecting">
                        <ButtonSelect
                          className="rb"
                          id="fac_ecpect"
                          style={styles.expecting}
                          fieldname="Expectant"
                          radioOption={[
                            {
                              value: "Boy",
                              displayValue: "+Boy",
                              color: "#8dd7e0"
                            },
                            {
                              value: "Girl",
                              displayValue: "+Girl",
                              color: "#f79ac9"
                            },
                            {
                              value: "Unknown",
                              displayValue: "+Unknown",
                              color: "#b3b3b3"
                            }
                          ]}
                          onChange={this.onChange}
                        />
                      </div>
                      <div className="radiobuttons1" id="existing">
                        <ButtonSelect
                          className="rb"
                          id="fac_ecpect_second"
                          fieldname="Children"
                          radioOption={[
                            {
                              value: "Boy",
                              displayValue: "+Boy",
                              color: "#07d9fc"
                            },
                            {
                              value: "Girl",
                              displayValue: "+Girl",
                              color: "#f73993"
                            }
                          ]}
                          onChange={this.onChange}
                        />
                      </div>
                    </div>
                  )}

                  {/* {this.renderContent()} */}
                  {isMobile && (
                    <div>
                      <DatePicker
                        showFormat="MM/DD/YYYY"
                        confirmText="Ok"
                        min={this.state.minDate}
                        max={this.state.maxDate}
                        cancelText="Cancel"
                        value={this.state.time}
                        isOpen={this.state.isOpen}
                        onSelect={this.handleSelect}
                        onCancel={this.handleCancel}
                        style={{zIndex:999999}}
                        theme="ios"
                        dateFormat={[
                          ["MM", month => monthMap[month]],
                          "DD",
                          "YYYY"
                        ]}
                      />
                    </div>
                  )}
                </div>
                <div className="" id="datepicker">
                  {this.state.familychildren &&
                    this.state.familychildren.length !== 0 && (
                      <div
                        className={
                          this.state.both ? "datepickernext" : "datepickernext2"
                        }
                        id="fac_addchild"
                      >
                        {isMobile &&
                          this.state.familychildren &&
                          this.state.familychildren
                            .map((answerList, indexs) => (
                              <div
                                className="paddingResponsive"
                                key={"firstdiv" + indexs}
                              >
                                <div
                                  className="col-md-6 col-sm-6 col-xs-6 managed_data"
                                  key={"sesconddiv" + indexs}
                                >
                                  <div
                                    style={{
                                      backgroundColor: answerList.colorname
                                    }}
                                    key={"thirddiv" + indexs}
                                    className="h1datepicker"
                                  >
                                    <h1>{answerList.gender}</h1>
                                  </div>
                                </div>
                                <div
                                  className="col-md-6 col-sm-6 col-xs-6 date_datepicker managed_data"
                                  key={"datepickerfirst" + indexs}
                                >
                                  <div
                                    className="col-md-12 col-sm-12 col-xs-12"
                                    key={"datepickersecond" + indexs}
                                  >
                                    {!this.state.familychildren[indexs]
                                      .is_expecting && (
                                      <b
                                        className="dapi birthdue_date"
                                        key={"datepickerd" + indexs}
                                      >
                                        Select Birth Date
                                      </b>
                                    )}
                                    {this.state.familychildren[indexs]
                                      .is_expecting && (
                                      <b
                                        className="dapi birthdue_date"
                                        key={"datepickerd" + indexs}
                                      >
                                        Select Due Date
                                      </b>
                                    )}
                                  </div>
                                  <div
                                    className="col-sm-12 col-xs-12"
                                    key={"textinputdiv" + indexs}
                                  >
                                    <div>
                                      <label
                                        type="text"
                                        key={"textinput" + indexs}
                                        onClick={() => this.handleClick(indexs)}
                                        placeholder="Date"
                                        style={{
                                          width: "150px",
                                          borderTop: "none",
                                          borderRight: "none",
                                          borderLeft: "none",
                                          paddingTop: "10px",
                                          fontSize: 16,
                                          backgroundColor: "transparent"
                                        }}
                                        className="dapi1 "
                                      >
                                        {this.state.familychildren[indexs]
                                          .date == "" && (
                                          <label className="fac_label">
                                            Date
                                          </label>
                                        )}
                                        {this.state.familychildren[indexs]
                                          .date !== "" && (
                                          <label>
                                            {
                                              this.state.familychildren[indexs]
                                                .date
                                            }
                                          </label>
                                        )}
                                      </label>
                                    </div>
                                  </div>
                                </div>

                                <div className="managed_data1">
                                  {this.state.familychildren[indexs].date && (
                                    <div>
                                      {indexs !== this.state.index && (
                                        <div id="btn_arrow">
                                          <img
                                            src={api.image_path+"prev_arrow.jpg"}
                                            height="40"
                                            style={{
                                              marginLeft: 80,
                                              marginTop: 37
                                            }}
                                            onClick={() =>
                                              this.show_edit_delete(indexs)
                                            }
                                          />
                                        </div>
                                      )}
                                      {indexs === this.state.index && (
                                        <StyleRoot id="btn_slide">
                                          <div
                                            style={{ display: "flex" }}
                                            style={styles.slideInRight}
                                          >
                                            <img
                                              src={api.image_path+"deleteimage.jpg"}
                                              onClick={() => {
                                                this.state.is_edit
                                                  ? this.setState({
                                                      open: true,
                                                      alertmsg:
                                                        "Do You Want To Delete This Child?",
                                                      delete_index: indexs,
                                                      delete:true
                                                    })
                                                  : this.handleDelete(indexs);
                                              }}
                                              // {console.log()this.state.delete_imgsecond)}
                                              className="delete_imgsecond"
                                            />&nbsp;
                                            <img
                                              src={api.image_path+"editimg.jpg"}
                                              onClick={() =>
                                                this.handleClick(indexs)
                                              }
                                              className="edit_imgsecond"
                                            />
                                          </div>
                                        </StyleRoot>
                                      )}
                                    </div>
                                  )}
                                </div>
                              </div>
                            ))
                            .reverse()}
                        {!isMobile &&
                          this.state.familychildren &&
                          this.state.familychildren
                            .map((answerList, indexs) => (
                              <div
                                className="col-md-12 col-sm-12  paddingResponsive"
                                style={{ display: "flex" }}
                                key={"firstdiv" + indexs}
                              >
                                <div
                                  className="col-md-6 col-sm-6 col-xs-6 date_datepicker1"
                                  key={"sesconddiv" + indexs}
                                >
                                  <div
                                    style={{
                                      backgroundColor: answerList.colorname
                                    }}
                                    key={"thirddiv" + indexs}
                                    className="h1datepicker"
                                  >
                                    <h1>{answerList.gender}</h1>
                                  </div>
                                </div>
                                <div
                                  className="col-md-6 col-sm-6 col-xs-6 date_datepicker date_datepicker2"
                                  key={"datepickerfirst" + indexs}
                                >
                                  <div
                                    className="col-md-12 col-sm-12 col-xs-12"
                                    key={"datepickersecond" + indexs}
                                  >
                                    {!this.state.familychildren[indexs]
                                      .is_expecting && (
                                      <b
                                        className="dapi birthdue_date"
                                        key={"datepickerd" + indexs}
                                      >
                                        Select Birth Date
                                      </b>
                                    )}
                                    {this.state.familychildren[indexs]
                                      .is_expecting && (
                                      <b
                                        className="dapi birthdue_date"
                                        key={"datepickerd" + indexs}
                                      >
                                        Select Due Date
                                      </b>
                                    )}
                                  </div>
                                  <div
                                    className="col-sm-12 col-xs-12"
                                    key={"textinputdiv" + indexs}
                                  >
                                    <div>
                                      {this.state.familychildren[indexs]
                                        .date && (
                                        <div>
                                          <label>
                                            {
                                              this.state.familychildren[indexs]
                                                .date
                                            }
                                          </label>
                                        </div>
                                      )}
                                      <div>
                                        <FormControl
                                          type="text"
                                          key={"textinput" + indexs}
                                          defaultValue={
                                            this.state.familychildren[indexs]
                                              .date
                                          }
                                          onClick={() =>
                                            this.refs[indexs].dp.focus()
                                          }
                                          placeholder="Date"
                                          style={{ display: "none" }}
                                          className="dapi1"
                                        />
                                      </div>
                                      {/* )} */}

                                      <MuiThemeProvider>
                                        <div>
                                          <DatePickerMaterial
                                            hintText="Date"
                                            className="dapi"
                                            onShow={() =>
                                              this.state.familychildren[indexs]
                                                .is_expecting === false
                                                ? this.setState({
                                                    minDate: this.state
                                                      .secondMinDate,
                                                    maxDate: this.state
                                                      .secondMaxDate,
                                                    changeDateIndex: indexs
                                                  })
                                                : this.setState({
                                                    minDate: this.state
                                                      .firstminDate,
                                                    maxDate: this.state
                                                      .firstmaxDate,
                                                    changeDateIndex: indexs
                                                  })
                                            }
                                            ref={indexs}
                                            style={
                                              this.state.familychildren[indexs]
                                                .date
                                                ? { display: "none" }
                                                : {}
                                            }
                                            minDate={this.state.minDate}
                                            maxDate={this.state.maxDate}
                                            onChange={this.changeDate}
                                          />
                                        </div>
                                      </MuiThemeProvider>

                                      {this.state.familychildren &&
                                        this.state.familychildren[indexs]
                                          .is_refered == true && (
                                          <div>
                                            <label>
                                              Do you want to accept?
                                            </label>
                                            <button
                                              onClick={this.handleAccept.bind(
                                                this,
                                                {
                                                  indexs
                                                }
                                              )}
                                            >
                                              Accept
                                            </button>
                                            <button
                                              onClick={this.handleDecline.bind(
                                                this,
                                                {
                                                  indexs
                                                }
                                              )}
                                            >
                                              Decline
                                            </button>
                                          </div>
                                        )}
                                    </div>
                                  </div>
                                </div>

                                <div className="date_datepicker3">
                                  {this.state.familychildren[indexs].date && (
                                    <div
                                      id="delete_edit"
                                      style={{ display: "flex" }}
                                    >
                                      <img
                                        src={api.image_path+"deleteimage.jpg"}
                                        onClick={() => {
                                          this.state.is_edit
                                            ? this.setState({
                                                open: true,
                                                alertmsg:
                                                  "Do You Want To Delete This Child",
                                                delete_index: indexs,
                                                delete:true
                                              })
                                            : this.handleDelete(indexs);
                                        }}
                                        className="delete_img"
                                      />&nbsp;
                                      <img
                                        src={api.image_path+"editimg.jpg"}
                                        onClick={() =>
                                          this.refs[indexs].focus()
                                        }
                                        className="edit_img"
                                      />
                                    </div>
                                  )}
                                </div>
                              </div>
                            ))
                            .reverse()}
                      </div>
                    )}
                  {this.state.familychildren.length > 0 && (
                    <div className="fac_btndone_div">
                      <button
                        className="fac_btn_done"
                        onClick={() => {
                          this.navigation();
                        }}
                      >
                        Done
                      </button>
                    </div>
                  )}
                  {!isMobile &&
                    this.state.familychildren.length == 0 && (
                      <div className="addchildren_img_div">
                        <img
                          src={api.image_path+"build-your-family-graphics.jpg"}
                          className="addchildren_img"
                        />
                        <div className="addchildren_img_text">
                          <p>Start Adding</p>
                          <b>
                            <span className="addchildren_img_text_c">C</span>
                            <span className="addchildren_img_text_h">h</span>
                            <span className="addchildren_img_text_i">i</span>
                            <span className="addchildren_img_text_l">l</span>
                            <span className="addchildren_img_text_d">d</span>
                            <span className="addchildren_img_text_r">r</span>
                            <span className="addchildren_img_text_e">e</span>
                            <span className="addchildren_img_text_n">n</span>
                          </b>
                        </div>
                      </div>
                    )}
                </div>
              </div>
            </div>
          )}

          <div className="fac_btn_arrrow">
            <div className="fac_btn_prev_div">
              <img
                src={api.image_path+"prev_arrow_one.jpg"}
                width="40"
                className="next_icon next_left"
                onClick={() => {
                  localStorage.setItem("current_state", "parent"),
                  this.props.history.push("/parent");
                }}
              />
            </div>
            <div className="fac_btn_next_div">
              <img
                src={api.image_path+"next_arrow_one.png"}
                width="40"
                className="next_icon next_right"
                onClick={() => {
                  this.navigation();
                }}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
const styles = {
  expecting: {
    paddingRight: 30
  },
  hide: { display: "none" },
  row: {
    marginRight: 0,
    marginLeft: 0
  },
  slideInRight: {
    animation: "x 1s",
    animationName: Radium.keyframes(slideInRight, "slideInRight")
  }
};

export default Family;
