import React from "react";
import api from "./api/api";
import CircularProgress from "@material-ui/core/CircularProgress";
import Countdown from "react-countdown-now";
import Drawer from "./drawer";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import cookie from 'react-cookies'
class won 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") !== "won")  {
        this.props.history.push("/menu_page");
      }
    let contest_id = localStorage.getItem("contest_id");
    console.log("contest_id", contest_id);
    let user_id =cookie.load("user_id");
    console.log("user_id", user_id);
    this.state = {
      isOpen: false,
      loader: false,
      id:"",
      user_id: user_id,
      contest_id: contest_id,
      length: "",
      open: false,
      alertmsg: "",
      contest: {},
      show_error: false,
      error: "",
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false
    };
    this.handleNext = this.handleNext.bind(this);
  }

  componentDidMount() {
    let contest_detail = localStorage.getItem("need_to_claim_detail");
    console.log("contest_detail", JSON.parse(contest_detail));
    console.log(JSON.parse(localStorage.getItem("need_to_claim")).length);
    this.setState({
      length: JSON.parse(localStorage.getItem("need_to_claim")).length
    });
    this.setState({ contest: JSON.parse(contest_detail) ,id:0});
  }

  handleNext=()=>{
    console.log("this_id",this.state.id)
    let id = this.state.id+1;
    this.setState({id:id})
    if(id<this.state.length){
      console.log("need_to_claim",JSON.parse(localStorage.getItem("need_to_claim"))[id])
      this.setState({ contest: JSON.parse(localStorage.getItem("need_to_claim"))[id]});
    }
    else{
      console.log(
        JSON.parse(localStorage.getItem("contest_array"))
      );
      let contest_array = JSON.parse(
        localStorage.getItem("contest_array")
      );

      localStorage.setItem("current_state", "contest"),
        this.props.history.push(
          "/Contest/" +
            contest_array[localStorage.getItem("contest_index")]
              ._id +
            "/" +
            cookie.load("user_id")
        );
    }
  }

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

  render() {
    // const { open } = this.state;
    const image_url = api.image_path+this.state.contest.image;
    return (
      <div className="user_bithdate_first_div">
        <center className="userbirthdatecenter_tag">
          {this.state.is_active && <Drawer prop={this.props} />}
          {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.handleClose()}
              />
            }
            modal={false}
            open={this.state.open}
            //onRequestClose={this.handleClose}
          >
            {this.state.alertmsg}
          </Dialog>
          {!this.state.loader && (
            <div className="rowContainerContest user_birthdate_header">
              {/* <Countdown date={Date.now() + 84682835} /> */}
              <div className="rowContainerContest socialshare">
                <div className="row contest_row">
                  <div
                    className="col-md-6 contest_row1"
                    style={{ backgroundColor: "white" }}
                  >
                    <img
                      src={api.image_path+ this.state.contest.logo}
                      className="contest_logo_img"
                    />
                  </div>
                  <div
                    className="col-md-6 contest_row2"
                    style={{
                      backgroundColor: `${
                        this.state.contest.contest_title_background_color
                      }`
                    }}
                  >
                    <h4>{this.state.contest.contest_title}</h4>
                  </div>
                </div>
                <div
                  className="contest_image won_blur_img"
                  style={{ backgroundImage: `url(${image_url})` }}
                >
                  <div className="won_transparent_div">
                    <div className="won_imgtext_div">
                      <p>Congratulations !</p>
                      <p>You've</p>
                      <img src={api.image_path+"won1.png"} className="won_imgtext" />
                    </div>
                  </div>
                </div>

                <div className="user_birthdate won_div">
                  <h4 style={{ color: "#9d9d9d" }}>
                    Accept to review and finalize delivery of your prize.
                  </h4>
                  <button
                    onClick={() => {
                      {
                        this.state.contest._id === "15"
                          ? this.state.contest.prize_name==="Baby's Book of Firsts"?localStorage.setItem("current_state", "product_orientation3"):localStorage.setItem("current_state", "product_orientation4")
                          : localStorage.setItem("current_state", "won1")
                        this.state.contest._id === "15"
                          ? this.state.contest.prize_name==="Baby's Book of Firsts"?this.props.history.push("/product_orientation3"):this.props.history.push("/product_orientation4")
                          : this.props.history.push("/won1");
                          
                      }
                    }}
                    className="btn_SocialShare user_birthdate_btn"
                  >
                    <p>Accept your prize</p>
                    <p className="won_btnpara">
                      <Countdown
                        date={new Date(this.state.contest.end_prize_accept_date)}
                      />
                    </p>
                  </button>
                  {this.state.length !== "1" &&
                <div>
                  <img
                    src={api.image_path+"next_arrow_one.png"}
                    width="40"
                    className="next_icon next_right"
                    onClick={() => {
                       this.handleNext(); 
                    }}
                  />
                </div>
                }
                  <p className="won_notepara">
                    Please note: if after seven(7) days, the prize remains
                    unclaimed, family.one reserves the right to either select a
                    new winner or cancel the prize.
                  </p>
                  <a
                    onClick={() => {
                      console.log(
                        JSON.parse(localStorage.getItem("contest_array"))
                      );
                      let contest_array = JSON.parse(
                        localStorage.getItem("contest_array")
                      );

                      localStorage.setItem("current_state", "contest"),
                        this.props.history.push(
                          "/Contest/" +
                            contest_array[localStorage.getItem("contest_index")]
                              ._id +
                            "/" +
                            cookie.load("user_id")
                        );
                    }}
                    className="won_anchortag"
                  >
                    Skip for now
                  </a>
                </div>
              </div>
            </div>
          )}
        </center>
      </div>
    );
  }
}

export default won;
