import React, { Component } from "react";

import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import { slideInRight, slideOutLeft } from "react-animations";
import Radium, { StyleRoot } from "radium";
import CircularProgress from "@material-ui/core/CircularProgress";
import api from "./api/api";
import cookie from 'react-cookies'
import axios from "axios";
import Drawer from "./drawer";
class skillTestQuestions extends Component {
  constructor(props) {
    super(props);
    console.log("session", localStorage.getItem("current_state"));
    console.log("is_active", localStorage.getItem("login_is_active"));
    console.log("contest_id", localStorage.getItem("contest_id"));
    if (
      localStorage.getItem("current_state") !== "skill_test_questions")  {
        this.props.history.push("/menu_page");
      }

    this.state = {
      open: false,
      alertmsg: "",
      is_yes_clicked: "",
      is_no_clicked: "",
      yes_clicked: "",
      no_clicked: "",
      yes: "",
      no: "",
      first_answer: "",
      second_answer: "",
      firstanswer: "",
      secondanswer: "",
      thirdanswer: "",
      show_error: false,
      error: "",
      first_screen_active: false,
      second_screen_active: false,
      third_screen_active: false,
      loader: false,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false
    };

    this.firstAnswerClicked = this.firstAnswerClicked.bind(this);
    this.secondAnswerClicked = this.secondAnswerClicked.bind(this);
    this.yesThirdClicked = this.yesThirdClicked.bind(this);
  }

  componentDidMount = () => {
    var firstanswer_array = [2, 4];
    var firstanswer = firstanswer_array[Math.floor(Math.random() * 2)];
    console.log("firstanswer", firstanswer);
    if (firstanswer === 2) {
      var secondanswer = 4;
    } else {
      var secondanswer = 2;
    }
    console.log("secomd_answer", secondanswer);
    this.setState({ first_answer: firstanswer, second_answer: secondanswer });
  };

  firstAnswerClicked = answer => {
    console.log("here", answer);
    if (answer === 2) {
      var firstanswer_array = [4, 8];
      var firstanswer = firstanswer_array[Math.floor(Math.random() * 2)];
      console.log("firstanswer", firstanswer);
      if (firstanswer === 4) {
        var secondanswer = 8;
      } else {
        var secondanswer = 4;
      }
      console.log("second_answer", secondanswer);
      this.setState({ first_answer: firstanswer, second_answer: secondanswer });
      this.setState({ firstanswer: this.state.first_answer });
    } else {
      this.setState({
        show_error: true,
        error: "Try Again"
      });
    }
  };

  secondAnswerClicked = answer => {
    console.log("here", answer);
    if (answer === 4) {
      var firstanswer_array = [8, 5];
      var firstanswer = firstanswer_array[Math.floor(Math.random() * 2)];
      console.log("firstanswer", firstanswer);
      if (firstanswer === 8) {
        var secondanswer = 5;
      } else {
        var secondanswer = 8;
      }
      console.log("second_answer", secondanswer);
      this.setState({ first_answer: firstanswer, second_answer: secondanswer });
      this.setState({ secondanswer: this.state.second_answer });
    } else {
      this.setState({
        show_error: true,
        error: "Try Again"
      });
    }
  };

  yesThirdClicked = answer => {
    if (answer === 8) {
      var self = this;
      let redirect = this.props.history;

      
      var skill_update = {
        action: "update",
        user_id: cookie.load("user_id"),
        user_metadata: {
          skillTestQuestion: true
        }
      };
      console.log("skill_update", skill_update);

      self.setState({ loader: true });
      axios
        .request({
          method: "POST",
          url: api.react_request,
          data: JSON.stringify(skill_update)
        })
        .then(function(json) {
          console.log("json", json);
          if (json.status == 200) {
            self.setState({ loader: false });
            cookie.remove("refered_by_id");
            cookie.remove("refered_contest_id");
            localStorage.setItem("skill_test_question", true);
            let contest_array = JSON.parse(
              localStorage.getItem("contest_array")
            );
            let contest_index = localStorage.getItem("contest_index");
            console.log("id", contest_array);
            if (contest_array[contest_index].is_user_age_required == "1") {
              console.log("here");
              if (
                localStorage.getItem("user_age_required") == true ||
                localStorage.getItem("user_age_required") == "true"
              ) {
                self.setState({ loader: false });
                localStorage.setItem("current_state", "share"),
                  self.props.history.push({ pathname: "/share" });
                console.log("here");
              } else {
                console.log("here");
                self.setState({ loader: false });
                localStorage.setItem("current_state", "user_birthdate");
                self.props.history.push({
                  pathname: "/user_birthdate"
                });
              }
            } else {
              self.setState({ loader: false });
              localStorage.setItem("current_state", "share"),
                self.props.history.push({ pathname: "/share" });
              console.log("here");
            }
          } else {
            self.setState({ loader: false });
            self.setState({ show_error: true, error: "Something Wrong" });
          }
        })
        .catch(function(error) {
          console.log("error", error);
          self.setState({ loader: false });
          self.setState({ show_error: true, error: "Something Wrong" });
        });
    } else {
      this.setState({
        show_error: true,
        error: "Try Again"
      });
    }
  };
  handleClose = () => {
    this.setState({ open: false });
  };
  render() {
    return (
      <div className="bcd_header_div_margin">
        <div className="allpages_desktop_boxes_div infoicon_paddingdiv">
          {/* {this.state.is_active && <Drawer prop={this.props} />} */}
          <StyleRoot>
            <div className="test" style={styles.slideInRight}>
              <div className="container-fluid">
                {this.state.loader && (
                  <center>
                    <CircularProgress
                      size={100}
                      style={{ color: "black", marginTop: "17%" }}
                    />
                  </center>
                )}
                <Dialog
                  style={{ textTransform: "capitalize" }}
                  actions={
                    <FlatButton
                      label="OK"
                      labelStyle={{ color: "#000" }}
                      onClick={() =>
                        this.state.nocontest
                          ? (localStorage.setItem(
                              "current_state",
                              "set_relation"
                            ),
                            this.props.history.push("/set_relation"))
                          : this.handleClose()
                      }
                    />
                  }
                  modal={false}
                  open={this.state.open}
                  //onRequestClose={this.handleClose}
                >
                  {this.state.alertmsg}
                </Dialog>
                {!this.state.loader && (
                <div className="info_icon_div infoicon_div_stquestion">
                      <img
                        src={api.image_path+"info1.png"}
                        alt="info_img"
                        className="info_img"
                        onClick={() => {localStorage.setItem("info","skill_test_questions"),this.props.history.push("/info")}}
                       />
                 </div>
                )}
                {!this.state.loader && (
                  <div className="skilltestquestion_div paddingtop">
                    <div className="space_top">
                      <label >As part of entry for family.one contests in Canada, a skill testing question is required:</label>
                    </div>
                    {this.state.firstanswer === "" &&
                      !this.state.loader && (
                        <div>
                          <br />
                          <br />
                          <label className="label_first">
                            <label className="label_second">(1+1)</label>x(2+2)=
                          </label>
                          <br />
                          <div>
                            <button
                              onClick={() =>{
                                this.setState({show_error:false})
                                this.firstAnswerClicked(this.state.first_answer)
                              }
                              }
                              className="btn_option btn_option_first"
                            >
                              {this.state.first_answer}
                            </button>
                          </div>
                          <div>
                            <button
                              onClick={() =>
                                {this.setState({show_error:false})
                                this.firstAnswerClicked(
                                  this.state.second_answer
                                )
                              }}
                              className="btn_option btn_option_first"
                            >
                              {this.state.second_answer}
                            </button>
                          </div>
                        </div>
                      )}
                    {this.state.firstanswer !== "" &&
                      this.state.secondanswer === "" &&
                      !this.state.loader && (
                        <div>
                          <br />
                          <br />
                          <label className="label_second">
                            <span className="label_first">2 x</span>(2+2)
                            <span className="label_first">=</span>
                          </label>
                        </div>
                      )}
                    {this.state.firstanswer !== "" &&
                      this.state.secondanswer !== "" &&
                      !this.state.loader && (
                        <div>
                          <div>
                            <br />
                            <br />
                            <label className="label_second">
                              {" "}
                              2&nbsp;&nbsp;&nbsp; x &nbsp;&nbsp;&nbsp; 4{" "}
                              &nbsp;&nbsp;&nbsp;=
                            </label>
                          </div>
                        </div>
                      )}

                    {this.state.firstanswer !== "" &&
                      this.state.secondanswer === "" &&
                      !this.state.loader && (
                        <div>
                          <button
                            onClick={() =>
                              {this.setState({show_error:false})
                              this.secondAnswerClicked(this.state.first_answer)}
                            }
                            className="btn_option btn_option_second"
                          >
                            {this.state.first_answer}
                          </button>
                        </div>
                      )}
                    {this.state.firstanswer !== "" &&
                      this.state.secondanswer === "" &&
                      !this.state.loader && (
                        <div>
                          <button
                            onClick={() =>{this.setState({show_error:false})
                              this.secondAnswerClicked(this.state.second_answer)
                            }
                            }
                            className="btn_option btn_option_second "
                          >
                            {" "}
                            {this.state.second_answer}{" "}
                          </button>
                        </div>
                      )}
                    {this.state.secondanswer !== "" &&
                      this.state.thirdanswer === "" &&
                      !this.state.loader && (
                        <div>
                          <button
                            onClick={() =>
                              {this.setState({show_error:false})
                              this.yesThirdClicked(this.state.first_answer)}
                            }
                            className="btn_option btn_option_third"
                          >
                            {this.state.first_answer}
                          </button>
                        </div>
                      )}
                    {this.state.secondanswer !== "" &&
                      this.state.thirdanswer === "" &&
                      !this.state.loader && (
                        <div>
                          <button
                            onClick={() =>
                              {this.setState({show_error:false})
                              this.yesThirdClicked(this.state.second_answer)}
                            }
                            className="btn_option btn_option_third"
                          >
                            {this.state.second_answer}
                          </button>
                        </div>
                      )}
                  </div> 
                )}
                {this.state.show_error && (
                  <div className="bcd_shownotification_div" style={{marginTop:10}}>
                    <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>
    );
  }
}

const styles = {
  root: {
    textAlign: "center"
  },
  inputField: {
    width: 500,
    marginRight: 10,
    marginLeft: 10
  },

  labelStyle: {
    fontWeight: 200,
    textAlign: "center",
    marginRight: 0,
    fontSize: 60,
    fontStyle: "normal",
    marginBottom: 20
  },
  labelQuestionStyle: {
    fontWeight: 200,
    textAlign: "center",
    marginRight: 0,
    marginTop: 40,
    fontSize: 70,
    fontStyle: "normal",
    marginBottom: 20
  },
  labelnoticeStyle: {
    color: "rgba(224, 214, 214, 0.87)",
    fontSize: 14,
    marginTop: 20,
    paddingTop: 20
  },
  underlineStyle: {
    borderColor: "#fff"
  },
  floatingLabelStyle: {
    color: "#fff",
    fontSize: 35
  },
  floatingLabelFocusStyle: {
    color: "#fff",
    fontSize: 20
  },
  textInputInput: {
    color: "#F3C677",
    fontSize: 30
    // #F3C677
  },
  slideInRight: {
    animation: "x 1s",
    animationName: Radium.keyframes(slideInRight, "slideInRight")
  },
  slideOutLeft: {
    animation: "x 1s",
    animationName: Radium.keyframes(slideOutLeft, "slideOutLeft")
  }
};

export default skillTestQuestions;
