import React, { Component } from "react";
import Drawer from "./drawer";
import cookie from 'react-cookies';
import api from './api/api'
class index extends Component {
  constructor(props) {
    super(props);
    localStorage.removeItem("user");
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    console.log("user_id", cookie.load("user_id"));
    if (
      localStorage.getItem("current_state") !== "set_relation" )  {
        this.props.history.push("/menu_page");
      }
    this.state = {
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false
    };
    this.save_relation = this.save_relation.bind(this);
    localStorage.setItem("relation_with_children1", "");
  }

  save_relation(relation) {
    localStorage.setItem("relation_with_children1", relation);
    //console.log(relation);
    if (relation === "both") {
      localStorage.setItem("both_relation", "true");
    }
    if (relation === "someone_else") {
      localStorage.setItem("current_state", "add_relation");
      this.props.history.push({ pathname: "/add_relation" });
    } else {
      localStorage.setItem("current_state", "parent");
      this.props.history.push({ pathname: "/parent" });
    }
  }
  render() {
    return (
      <div>
        {this.state.is_active && <Drawer prop={this.props} />}
        <div className="bcd_header_div_margin">
          <div className="allpages_desktop_boxes_div setrelation_header_div">
            <div className="">
              <div className="row">
                <div className="info_icon_div">
                  <img
                    src={api.image_path+"info1.png"}
                    alt="info_img"
                    className="info_img"
                    onClick={() => {
                      localStorage.setItem("info", "set_relation"),
                      localStorage.setItem("current_state", "info"),
                        this.props.history.push("/info");
                    }}
                  />
                </div>
                <table className="index_table" align="center">
                  <tbody>
                    <tr className="index_tablefirst iam_first">
                      <td colSpan="2">
                        <h2 className="iam">I'm...</h2>
                      </td>
                    </tr>
                    <tr>
                      <td>
                        <button
                          className="btnfuctionality btnfuctionality1"
                          onClick={() => {
                            this.save_relation("expecting_child");
                          }}
                        >
                          Expecting a child
                        </button>
                      </td>
                      <td>
                        <button
                          className="btnfuctionality btnfuctionality2"
                          onClick={() => {
                            this.save_relation("have_a_children");
                          }}
                        >
                            A Parent<div className="setRelation_span">
                            to children under the age of 18
                          </div>
                        </button>
                      </td>
                    </tr>
                    <tr>
                      <td colSpan="2">
                        <button
                          className="btnfuctionality btnfuctionality3"
                          onClick={() => {
                            this.save_relation("both");
                          }}
                        >
                          Both
                        </button>
                        <p className="setRelation_or">- or -</p>
                      </td>
                    </tr>
                    <tr>
                      <td colSpan="2">
                        <button
                          className="btnfuctionality btnfuctionality4"
                          onClick={() => {
                            this.save_relation("someone_else");
                          }}
                         >
                         I'm a relative
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }
}
export default index;
