{"size": 6859, "ext": "js", "max_stars_repo_path": "src/components/Widget/components/Conversation/components/Messages/components/FeedbackRating/index.js", "max_stars_repo_name": "Pemari-Technology/clai-webchat", "max_stars_repo_stars_event_min_datetime": null, "max_stars_repo_stars_event_max_datetime": null, "max_issues_repo_path": "src/components/Widget/components/Conversation/components/Messages/components/FeedbackRating/index.js", "max_issues_repo_name": "Pemari-Technology/clai-webchat", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/Widget/components/Conversation/components/Messages/components/FeedbackRating/index.js", "max_forks_repo_name": "Pemari-Technology/clai-webchat", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": null, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 28.94092827, "max_line_length": 163, "alphanum_fraction": 0.5528502697}
import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import { PROP_TYPES } from 'constants';
import { addUserMessage, emitUserMessage,setButtons, toggleInputDisabled } from 'actions';

import './styles.scss';


function Star( props ){
  return ( 
    <div className={`star ${(props.value == 0) ? 'semi-active' : ''} ${(props.position <= props.rated) ? 'active' : ''} ${(props.flago == 2) ? 'disabled' : ''} `} 
         onMouseEnter={ props.onMouseEnter }
         onMouseLeave={ props.onMouseLeave }
         onClick={ props.onClick }

    >
      <i className="fa fa-star"></i>
    </div>
  );
}


// function Rating( props ){
//   const messages = {
//     "1": "Oh. Sorry you had a bad experience :( ",
//     "2": "We will try to improve.",
//     "3": "Appreciate it!",
//     "4": "Thank you!", 
//     "5": "You're Awesome!"
//   };
  
//   let rating = props.rating;
  
//   return(
//       <div className={"after-rating-message " + ((rating > 0) ? 'show': '')} >
//           <span>You rated this {rating} star{rating > 1 ? 's' : ''}</span>
//           <br/>
//           <span>{ messages[rating] }</span>
//       </div>
//   );
// }

let lodash = require("lodash");
class RatingWidget extends PureComponent {
  constructor( props ) {
    super( props );
    this.defineChosenReply = this.defineChosenReply.bind(this);
    this.state = {
      // stars: Array(6).fill(-1),
      stars: this.defineChosenReply(),
      rated: 0,
    };
  }
  

  defineChosenReply() {
    const {id, getChosenReply} = this.props;
    var a = getChosenReply(id);
    if (a == "/feedback_1"){
      return [0, 0, -1, -1, -1, -1];
    }
    else if (a == "/feedback_2"){
      return [0, 0, 0, -1, -1, -1];
    }
    else if (a == "/feedback_3"){
      return [0, 0, 0, 0, -1, -1];
    }
    else if (a == "/feedback_4"){
      return [0, 0, 0, 0, 0, -1];
    }
    else if (a == "/feedback_5"){
      return [0, 0, 0, 0, 0, 0];
    }
    else {
      return Array(6).fill(-1)
    }
  }


  handleMouseOver( i ) {
    const {id, getChosenReply} = this.props;
    const check = getChosenReply(id);
    let currentRating = this.state.rated;
    if (check != null) {
      if ( currentRating > 0 ) {
        const hoverRatedStars = this.state.stars.slice();
        lodash.fill( hoverRatedStars, 0, currentRating, i );
        this.setState({ stars: hoverRatedStars });
      }
      else {
        const hoverStars = Array(6).fill(-1);
        lodash.fill( hoverStars, 0, 0, (i+1) );     
        this.setState({ stars: hoverStars});
      }
    }
  }
  
  handleMouseOut() {
    let currentRating = this.state.rated;
    if ( currentRating > 0) {
      const resetRatedStars = this.state.stars.slice();
      lodash.fill( resetRatedStars, -1, currentRating, resetRatedStars.length );
      this.setState({stars: resetRatedStars});
    }
    else {
      const resetStars = this.state.stars.slice();
      lodash.fill( resetStars, -1, 0, resetStars.length );
      this.setState({stars: resetStars});
    }
  }

  handleClick( i ) {
    const {id, getChosenReply} = this.props;
    const check = getChosenReply(id);
    if (check == null){
      const clickedStar = this.state.stars.slice();
      lodash.fill( clickedStar, 1, 0, i );
      lodash.fill( clickedStar, 1, i, clickedStar.length );
        
      this.setState({
        stars: clickedStar,
        rated: i
      });
      const {
        chooseReply, id, message
      } = this.props;
      if(i == 1) {
        const payload = "/"+message.toJS().quick_replies[0].payload;
        const title = message.toJS().quick_replies[0].title;
        chooseReply(payload, title, id);
      } else if(i == 2) {
        const payload = "/"+message.toJS().quick_replies[1].payload;
        const title = message.toJS().quick_replies[1].title;
        chooseReply(payload, title, id);
      } else if(i == 3) {
        const payload = "/"+message.toJS().quick_replies[2].payload;
        const title = message.toJS().quick_replies[2].title;
        chooseReply(payload, title, id);
      } else if(i == 4) {
        const payload = "/"+message.toJS().quick_replies[3].payload;
        const title = message.toJS().quick_replies[3].title;
        chooseReply(payload, title, id);
      } else if(i == 5) {
        const payload = "/"+message.toJS().quick_replies[4].payload;
        const title = message.toJS().quick_replies[4].title;
        chooseReply(payload, title, id);
      }
    }
  }
  
  // handleRating( rating ){
  //   return (<Rating rating={this.state.rated} />)
  // }
  
  renderStar( i ){
    const {id, getChosenReply} = this.props;
    const check = getChosenReply(id);
    return (
      <>
        {(check != null) ? (<Star 
          position={i}
          value={this.state.stars[i]} 
          rated={this.state.rated}
          flago={2}
          />) : (<Star 
            position={i}
            value={this.state.stars[i]} 
            rated={this.state.rated}
            onMouseEnter={ () => this.handleMouseOver(i) }
            onMouseLeave={ () => this.handleMouseOut() }
            onClick={ () => this.handleClick(i) }
          />)
        }
      </>
    );
  }

  render(){
    return ( 
      <React.Fragment>{this.props.message.toJS().text ? (
        <div>
      <div className='text-msg'>
      {this.props.message.toJS().text}
    </div>
    <div className='rating-stars-widget-outer'>
        <div className='rating-stars'>
          {this.renderStar(1)}
          {this.renderStar(2)}
          {this.renderStar(3)}
          {this.renderStar(4)}
          {this.renderStar(5)}
        </div> 
        {/* {this.handleRating( this.state.rated )} */}
    </div> 
    </div>) : (
        <div className='rating-stars-widget-outer'>
            <div className='rating-stars'>
              {this.renderStar(1)}
              {this.renderStar(2)}
              {this.renderStar(3)}
              {this.renderStar(4)}
              {this.renderStar(5)}
            </div> 
        
            {/* {this.handleRating( this.state.rated )} */}
        </div>) }
      </React.Fragment>

    );
  }
}


const mapStateToProps = state => ({
  getChosenReply: id => state.messages.get(id).get('chosenReply'),
  inputState: state.behavior.get('disabledInput')
});

const mapDispatchToProps = dispatch => ({
  toggleInputDisabled: () => dispatch(toggleInputDisabled()),
  chooseReply: (payload, title, id) => {
    // console.log("Hii " + payload + " "+ title+" "+id);
    
    dispatch(setButtons(id, payload));
    // dispatch(addUserMessage(title));
    dispatch(emitUserMessage(payload));
    // dispatch(toggleInputDisabled());
  }
});

RatingWidget.propTypes = {
  message: PROP_TYPES.RATINGWIDGET,
  chooseReply: PropTypes.func
};

export default connect(mapStateToProps, mapDispatchToProps)(RatingWidget);