import React from "react";
import axios from "axios";
import CircularProgress from "@material-ui/core/CircularProgress";
import Countdown from "react-countdown-now";
import Dialog from "material-ui/Dialog";
import Drawer from "./drawer";
import api from "./api/api";
import cookie from 'react-cookies'
import ReactHtmlParser, {
  processNodes,
  convertNodeToElement,
  htmlparser2
} from "react-html-parser";
import {
    Step,
    Stepper,
    StepLabel,
  } from 'material-ui/Stepper';
import RaisedButton from 'material-ui/RaisedButton';
import FlatButton from 'material-ui/FlatButton';

let nextid;
class artBoard_order extends React.Component {
  constructor(props) {
    super(props);
    console.log("this", this.props.match.params);
    console.log(cookie.load("user"));
    let date = new Date().toLocaleString("en-CA",{timeZone: "Canada/Central"})
    console.log("date",date)
    // 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("/");
    // }
    let contest_id = localStorage.getItem("contest_id");
    console.log("contest_id", contest_id);
    let user_id = cookie.load("user_id");
    this.state = {
      // user_id: userid,
      // id: localStorage.getItem("contest_index"),
      // contestId: id,
      contest: [],
      loader: false,
      open: false,
      alertmsg: "",
      user_id: user_id,
      user_birthdate: "",
      contest_id: contest_id,
      is_active: localStorage.getItem("login_is_active") == 1 ? true : false,
      contest_orientation: false,
      offer_orientation: false,
      stepIndex:0,
      personal_info_time:"",
      privacy_time:"",
      research_comm:"",
      finished: false,
      contest_index:
        localStorage.getItem("contest_index") == null
          ? 0
          : localStorage.getItem("contest_index")
    };
    // localStorage.setItem("contest_id", this.state.contestId);


    this.handlePhone.bind(this);
  }

  componentDidMount() {
    let contest_detail = localStorage.getItem("contest_detail");
    console.log("contest_detail", JSON.parse(contest_detail));
    this.setState({ contest: JSON.parse(contest_detail) });
    var text=JSON.parse(contest_detail).contest_title;
    var cp_text=JSON.parse(contest_detail).contest_description;
    console.log("text", text);
    console.log("cp_text", cp_text);
    if(text.length <=60 && cp_text.length <= 135 ){
    this.setState({textvalue:text})
    this.setState({cp_txtvalue:cp_text})
    }
    else{
      var textnew= text;
      var cptextnew=cp_text;
      var count= 60;
      var cp_count=135;
      var textUpdate = textnew.slice(0, count) + (textnew.length > count ? "..." : "")
      var cp_textUpdate = cptextnew.slice(0, cp_count) + (cptextnew.length > cp_count ? "..." : "")
      this.setState({textvalue:textUpdate})
      this.setState({cp_txtvalue:cp_textUpdate})
     
    }
  }


  handlePhone=()=>{
    let self = this;
    console.log("this.state",this.state)
    localStorage.setItem("privacy_time",self.state.privacy_time)
    localStorage.setItem("personal_info_time",self.state.personal_info_time)
    localStorage.setItem("research_comm",new Date().toLocaleString("en-CA", {timeZone: "Canada/Central"}))
    console.log(
      "self.state.contest.is_phone_required",
      self.state.contest.is_phone_required
    );
    if (self.state.contest.is_phone_required == "1") {
      console.log("here");
      if (
        localStorage.getItem("phone_number") &&
        localStorage.getItem("phone_number").length > 9
      ) {
        console.log("here");
        localStorage.setItem("current_state", "social_share");
        self.props.history.push({
          pathname: "/SocialShare"
        });
        
      } else {
        console.log("here");
        self.setState({ loader: false });
        localStorage.setItem("current_state", "phone_number");
        self.props.history.push({
          pathname: "/phone_number"
        });
      }
    }
    else{
      localStorage.setItem("current_state", "social_share");
        self.props.history.push({
          pathname: "/SocialShare"
        });
    }
  }

  handleNext = () => {
    
    
    if(this.state.stepIndex == 0){
      this.setState({personal_info_time:new Date().toLocaleString("en-CA",{timeZone: "Canada/Central"})})
    }
    else if(this.state.stepIndex == 1){
      this.setState({privacy_time:new Date().toLocaleString("en-CA", {timeZone: "Canada/Central"})})
    }
    else if(this.state.stepIndex == 2){
      
      this.setState({research_comm:new Date().toLocaleString( "en-CA",{timeZone: "Canada/Central"})})
      this.handlePhone()
      this.setState({
        finished: true
      });
    }
    
  const {stepIndex} = this.state;
    this.setState({
      stepIndex: stepIndex + 1,
    });
  };
  handlePrev = () => {
    const {stepIndex} = this.state;
    if (stepIndex > 0) {
      this.setState({stepIndex: stepIndex - 1});
    }
  };


  render() {
    const {finished, stepIndex} = this.state;
    const contentStyle = {margin: '0 16px'};
    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={api.image_path+ this.state.contest.logo}
                      className="contest_logo_img"
                    />
                  </div>
                  <div className="col-md-6 contest_row2" style={{backgroundColor:'#a82a68'}}>
                  <h4 className="similac_h4">{ReactHtmlParser(this.state.textvalue)}</h4>
                  </div>
                </div>
                <div className="row">
                  <div className="contest_image_div">
                     <img
                     src={api.image_path+ this.state.contest.image}
                      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 similac_paradiv1">
                    {/* {this.state.contest.contest_description}     */}
                     {ReactHtmlParser(this.state.cp_txtvalue)}
                  </p>
                </div>
                <div className="row">
                 <div className="nextnum_div">
                    <Stepper linear={false} activeStep={stepIndex} >
                    <Step >
                        <StepLabel  className="steplabel_fst" onClick={() => this.setState({stepIndex: 0,personal_info_time:new Date().toLocaleString( "en-CA",{timeZone: "Canada/Central"})})}></StepLabel>
                    </Step>
                    <Step>
                        <StepLabel className={this.state.stepIndex>0?"steplabel_second":""} onClick={() => this.setState({stepIndex: 1,privacy_time:new Date().toLocaleString( "en-CA",{timeZone: "Canada/Central"})})}></StepLabel>
                    </Step>
                    <Step>
                        <StepLabel className={this.state.stepIndex>1?"steplabel_third":""} onClick={() => this.setState({stepIndex: 2,research_comm:new Date().toLocaleString( "en-CA",{timeZone: "Canada/Central"})})}></StepLabel>
                    </Step>
                    </Stepper>
                    
                </div>
                 <div className="artBoard_allparadiv"> 
                   {this.state.stepIndex === 0 &&
                    <p>
                      I CONSENT to receive emails and other forms of commercial
                      and electronic messages about Abbott Nutrition products and 
                      services, from abbott Nutrition or Abbott Nutrition's third 
                      party services providers on its behalf.               
                    </p>   
                   }
                   {this.state.stepIndex === 1 &&
                  <div> 
                  
                   <p>
                     I have read and agree to the terms of the linked 
                     <span> Privacy Policy </span> and <span> Terms of Use </span>
                     and accordingly consent to the collection, use and disclosure
                     of my personal information.     
                   </p>
                  
                  
                   <p>
                     I Understand that I can withdraw my consent or update
                     my preferences at any time directly with Similac ONLY
                     and can <span> Contact Similac </span> directly for more details           
                   </p>    
                  
                  </div> 
          } 
                  {this.state.stepIndex === 2 && 
                   <p>
                     I CONSENT to be contacted for surveys and research 
                     initiatives conducted by Abbott Nutrition and/or Abbott Nutrition's 
                     services providers on its behalf.
                     I understand that these surveys and research initiatives will be 
                     subject to the Abbott Nutrition 
                     <span> Privacy Policy </span>
                    </p> 
                  }  
                  </div>     
                  <div className="artBoardbtn_div">
                   <button
                    className="artBoard_btnyes"
                    
                    onClick={()=>{this.handleNext()}}
                   >
                    Yes
                   </button>     
                  </div>    
                </div>
                <div className="artBoard_btnbackdiv">
                  <FlatButton 
                    className="flatbtn"
                    onClick={()=>{stepIndex === 0?this.props.history.push("/Contest/22/"+localStorage.getItem("user_id")):this.handlePrev()}}
                   >
                   <img
                    src={"https://family.one/app/images/prev_arrow.jpg"}
                    width="40"
                    className="btnback_arrow"
                    
                   />
                     Back
                 </FlatButton>  
               </div>
              </div>
            )}
        </center>
      </div>
    );
  }
}

export default artBoard_order;
