import React from "react";
// import { Button, Image } from "react-bootstrap";
import axios from "axios";
import CircularProgress from "@material-ui/core/CircularProgress";
import Countdown from "react-countdown-now";
import Dialog from "material-ui/Dialog";
import FlatButton from "material-ui/FlatButton";
import Drawer from "./drawer";
import api from "./api/api";
import cookie from 'react-cookies'
import ReactHtmlParser, {
  processNodes,
  convertNodeToElement,
  htmlparser2
} from "react-html-parser";
let nextid;
class artBoard extends React.Component {
  constructor(props) {
    super(props);
    console.log("this", this.props.match.params);
    console.log(cookie.load("user"));
    // if (
    //   localStorage.getItem("current_state") !== "contest" ||
    //   cookie.load("user_id") == "" ||
    //   cookie.load("user_id") == "undefined" ||
    //   typeof cookie.load("user_id") == undefined
    // ) {
    //   this.props.history.push("/");
    // }
    // var id = props.match.params.contest_id;
    // console.log("id_", id);

    // let social_user_id = [];
    // let temp_id = cookie.load("user_id");
    // social_user_id = temp_id.split("|");

    // var userid = props.match.params.user_id;
    this.state = {
      // user_id: userid,
      // id: localStorage.getItem("contest_index"),
      // contestId: id,
      contest: [],
      loader: false,
      open: false,
      alertmsg: "",
      // social_user_id: social_user_id,
      googleplus_url: "",
      share_link: "",
      fb_url: "",
      twiter_url: "",
      arrows:true,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      contest_orientation: false,
      offer_orientation: false,
      contest_index:
        localStorage.getItem("contest_index") == null
          ? 0
          : localStorage.getItem("contest_index")
    };
    localStorage.setItem("contest_id", this.state.contestId);
  }

 
  render() {
    return (
      <div className="contest_pagebg">
        <center>
          {this.state.is_active && <Drawer prop={this.props} />}
          {this.state.loader && (
            <center>
              <CircularProgress
                size={100}
                style={{ color: "black", marginTop: "17%" }}
              />
            </center>
          )}
          {!this.state.loader &&  (
              <div className="rowContainerContest rowContainerContestExt contest_header_div">
                <div className="row contest_row">
                  <div className="col-md-6 contest_row1 contest_logodiv" >
                    <img
                      src={
                        "https://family.one/app/images/familyone_logo.png"
                      }
                      className="contest_logo_img"
                    />
                  </div>
                  <div className="col-md-6 contest_row2" style={{backgroundColor:'#a82a68'}}>
                    <h4>Free Similac Starter Pack, samples and rebate cheques</h4>
                  </div>
                </div>
                <div className="row">
                  <div className="contest_image_div">
                     <img
                      src={"https://family.one/app/images/image-2-contest-Avis-app.jpg"}
                      className="contest_image"
                     />
                      <div
                        className="contest_image_second_img_div"
                      >
                        {/* contest-side-floating.jpg */}
                        <img src={"https://family.one/app/images/freebie-side-floating.jpg"} />
                      </div>
                  </div>
                </div>
                <div className="row">
                  <p className="contest_para">
                    Join Similac Club and receive up to $175 worth of free samples
                    for babies, rebate cheques, and exclusive Similac&reg; Starter Pack.
                  </p>
                  <hr className="artBoard_hrtag" />
                </div>
                <div className="row">
                  <div>
                     <button
                     onClick={()=>{this.props.history.push("/similac1")}}
                        className="btnenter btnredeem_artBoard"
                        style={{backgroundColor:'#c22c74'}}
                     >
                      Redeem
                      </button>
                  </div>
                  <div>
                    <h6 className="contest_h6">
                      By redeeming, you are agreeing to the Terms and Conditions below and to 
                      have family.one transfer your first name, last name, email address, phone number,
                      full mailing address and expected due date to Similac(Abbott Nutrition) to 
                      complete your Similac Club&reg; registration. Additional consent is required by
                      Abbott Nutrition and will be presented separately.    
                    </h6>
                  </div>
                </div>
                <br />
                <div>
                  <img
                    src={"https://family.one/app/images/prev_arrow.jpg"}
                    width="40"
                    className="prev_contest"
                  />
                  <img
                    src={"https://family.one/app/images/next_arrow.jpg"}
                    width="40"
                    className="next_contest"
                  />
                </div>
                <br />
                <div className="row panel">
                  <details>
                    <summary>
                      <ul>
                        <li className="titleValue">Terms & Conditions</li>
                      </ul>
                    </summary>
                    <div className="content panel_contant_div">
                      <div className="panel_contant">
                       <p>Note:By redeeming, you are agreeing to have family.one transfer your 
                          first name, last name, email address, phone number, full mailing 
                          address and expected due date to Similac (Abbott Nutrition) for enrollment
                          in the Similac Club®. This is a third-party program, independent of 
                          family.one. family.one is not responsible for the activities of third-party 
                          programs, unsubscribing from them or up-dating information stored by them. Ensure 
                          that you have reviewed the Privacy Policy and Terms of Use for this third party program. 
                       </p>
                       <p>
                          You may insert any relevant text you wish to include here such as Privacy Policy 
                          and Terms of Use or leave this space blank. Alternatively, and most typically, the 
                          re-quested second screen consent contents are listed here as part of overall consent 
                          for redemption and no second screen checkboxes are used.    
                       </p>    
                      </div>
                    </div>
                  </details>
                </div>
              </div>
            )}
        </center>
      </div>
    );
  }
}

export default artBoard;
