import React, { Component } from "react";
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 CircularProgress from "@material-ui/core/CircularProgress";
import api from "./api/api"
import Drawer from "./drawer";
class Report extends Component {
  constructor(props) {
    console.log("connect");
    super(props);
    // if (
    //   localStorage.getItem("current_state") !== "report" ||
    //   localStorage.getItem("user_id") == "" ||
    //   localStorage.getItem("user_id") == "undefined" ||
    //   typeof localStorage.getItem("user_id") == undefined
    // ) {
    //   this.props.history.push("/");
    // }
    this.state = {
      open: false,
      alertmsg: "",
      loader: false,
      is_active: localStorage.getItem("login_is_active"),
      relative_data: [],
      nocontest: false,
      value: "",
      contest_list: [],
      user_count: "",
      user_detail: []
    };

    this.handleChange.bind(this);
  }

  //Component load on page navigate
  componentDidMount = () => {
    let self = this;
    let getContestList = {
      action: "get_contest_list"
    };
    self.setState({ loader: true });
    axios
      .request({
        url: api.react_request,
        method: "POST",
        data: JSON.stringify(getContestList)
      })
      .then(function(getContestListResponse) {
        console.log("getContestListResponse", getContestListResponse);
        let contest = [];
        getContestListResponse.data.forEach(element => {
          console.log("element", element);
          let temp_contest = [];
          temp_contest.name = element.title;
          temp_contest.id = element.id;
          contest.push(temp_contest);
        });
        self.setState({ loader: false });
        self.setState({ contest_list: contest });
        console.log(self.state.contest_list);
      });
  };
  //function to handle change the value of dropdown
  handleChange = (event, value) => {
    let self = this;
    this.setState({ value: value });
    console.log("value", value);
    let get_info_contest = {
      action: "get_contest_detail",
      contest_id: value
    };
    self.setState({ loader: true });
    axios
      .request({
        url: api.react_request,
        method: "POST",
        data: JSON.stringify(get_info_contest)
      })
      .then(function(getContestListResponse) {
        console.log("getContestListResponse", getContestListResponse);
        self.setState({ user_count: getContestListResponse.data.total_entry });
        let user_detail = [];
        getContestListResponse.data.contest_userdata.forEach(element => {
          console.log("element", element);
          let temp_contest = [];
          temp_contest.first_name = element.first_name;
          temp_contest.last_name = element.last_name;
          temp_contest.email = element.email;
          temp_contest.family_share_count = element.family_share_count;
          temp_contest.family_share_point = element.family_share_point;
          temp_contest.social_share_point = element.social_share_point;
          temp_contest.user_id = element.user_id;
          temp_contest.total_point = element.total_point;
          user_detail.push(temp_contest);
        });
        self.setState({ loader: false });
        self.setState({ user_detail: user_detail });
        console.log("user_detail", self.state.user_detail);
      });
  };

  render() {
    return (
    <div className="">
      {this.state.is_active && <Drawer prop={this.props} />}  
    <div className="bcd_header_div_margin"> 
        <StyleRoot>
          <div className="home_btn home_width" style={styles.slideInRight}>
            <div className="container-fluid">
              {this.state.loader && (
                <CircularProgress
                  size={100}
                  style={{ color: "black", marginTop: "17%" }}
                />
              )}
              <Dialog
              style={{textTransform:"capitalize"}}
                actions={
                  <FlatButton
                    label="Next"
                    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>
                  <center>
                    <div className="report_label_div">
                      <label>Reports</label>
                    </div>
                    <div className="home_btn">
                      <select
                        onChange={event =>
                          this.handleChange(this, event.target.value)
                        }
                        className="report_select_box"
                      >
                        {this.state.contest_list &&
                          this.state.contest_list.map((contest, indexs) => (
                            <option key={contest.id} value={contest.id}>{contest.name}</option>
                          ))}
                      </select>
                    </div>

                    {this.state.user_detail.length > 0 && (
                      <div>
                        <label>Number of users:</label>
                        {this.state.user_count && (
                          <label>{this.state.user_count}</label>
                        )}

                        <table>
                          <thead>
                            <td>User Id</td>
                            <td>First Name</td>
                            <td>Last Name</td>
                            <td>Email</td>
                            <td>Family Count</td>
                            <td>Family Share Point</td>
                            <td>Social Share Point</td>
                            <td>Total Point</td>
                          </thead>
                          <tbody>
                            {this.state.user_detail.map((value, indexs) => (
                              <tr>
                                <td>{value.user_id}</td>
                                <td>{value.first_name}</td>
                                <td>{value.last_name}</td>
                                <td>{value.email}</td>
                                <td>{value.family_share_count}</td>
                                <td>{value.family_share_point}</td>
                                <td>{value.social_share_point}</td>
                                <td>{value.total_point}</td>
                              </tr>
                            ))}
                          </tbody>
                        </table>
                      </div>
                    )}
                  </center>
                </div>
              )}
            </div>
          </div>
        </StyleRoot>
     </div> 
     </div>
    );
  }
}

const styles = {
  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 Report;
