import React from "react"
import { connect } from "react-redux"

class Rating extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      opened: false,
      rating: 0,
      hovered: 0,
      stars: []
    }

    let outOf = props.outOf ? props.outOf : 5

    for (var i = 0; i < outOf; i++) {
      this.state.stars.push(i + 1)
    }
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    return {}
  }

  componentDidMount() {}

  componentDidUpdate(prevProps, prevState) {}

  changeRating(newRating) {
    this.setState({
      rating: newRating
    })

    if (this.props.onChange) this.props.onChange(newRating)
  }

  hoverRating(rating) {
    this.setState({
      hovered: rating
    })
  }

  _handleRate = () => {
    if (this.state.rating > 0) {
      this.setState({
        opened: true
      })
    }
  }

  render() {
    const { opened, stars, rating, hovered } = this.state
    const data = ["Очень плохо", "Плохо", "Нормально", "Хорошо", "Отлично"]

    return (
      <div className={opened ? "rate_us opened" : "rate_us"}>
        <div className="rate_body">
          <p>Оцените нас</p>
          <div className="rate_start">
            <div className="stars">
              {stars.map((star) => {
                return (
                  <label
                    className={rating < star ? (hovered < star ? "" : "hover") : "active"}
                    onClick={() => {
                      this.changeRating(star)
                    }}
                    onMouseEnter={() => {
                      this.hoverRating(star)
                    }}
                    onMouseLeave={() => {
                      this.hoverRating(0)
                    }}
                  ></label>
                )
              })}
            </div>
            {opened ? (
              <p>{data[this.state.rating - 1]}</p>
            ) : (
              <button
                className="button button button-blue"
                onClick={() => {
                  this._handleRate()
                }}
              >
                Оценить
              </button>
            )}
          </div>
          <form>
            <div className="form_field">
              <input type="text" value="" placeholder="Имя" />
            </div>
            <div className="form_field">
              <input type="text" value="" placeholder="Телефон" />
            </div>
            <div className="form_field">
              <textarea placeholder="Комментарий"></textarea>
            </div>
            <button type="submit" className="button button button-blue">
              Отправить
            </button>
          </form>
        </div>
      </div>
    )
  }
}

function mapStateToProps(state, ownProps) {
  return {}
}

export default connect(mapStateToProps)(Rating)
