import React from 'react';
import styled from 'styled-components';
import Stars from '../../atoms/stars/Stars';
import RatesInfos from '../../atoms/rates-infos/RatesInfos';
import Ticks from '../../atoms/ticks/Ticks';

const Div = styled.div`
    display: inline-flex;
    .stars {
        display: flex;
        .star {
            margin: 5px;
        }
    }
    .averageBlock, .userBlock {
        padding: 5px;
        display: flex;

        .right {
            margin-left: 10px;
        }
    }
    .userBlock {
        background: #ededed;
        border-radius: 4px;
    }
`;

class RatingStars extends React.Component {
/*
    static propTypes = {
        average: PropTypes.number.isRequired,
        votesCount: PropTypes.number.isRequired
    }
*/

    state = {
        whatToDisplay: 'averageStars',
        averageStars: [
            {
                value: 1,
                color: 'grey'
            },
            {
                value: 2,
                color: 'grey'
            },
            {
                value: 3,
                color: 'grey'
            },
            {
                value: 4,
                color: 'grey'
            },
            {
                value: 5,
                color: 'grey'
            }
        ],
        userRate: 0,
        userStars: [
            {
                value: 1,
                color: 'grey'
            },
            {
                value: 2,
                color: 'grey'
            },
            {
                value: 3,
                color: 'grey'
            },
            {
                value: 4,
                color: 'grey'
            },
            {
                value: 5,
                color: 'grey'
            }
        ],
        hasvoted: 0
    }

    componentWillMount() {
        const fullStars = Math.trunc(this.state.average);
        const hasHalfStar = (this.state.average - fullStars) >= 0.5;
        const averageStars = this.state.averageStars;
        averageStars.map(elt => {
            if (elt.value <= fullStars) {
                elt.color = "yellow";
            }
            if (hasHalfStar && elt.value === (fullStars + 1)) {
                elt.color = "half";
            }
            return elt;
        });
        this.setState({ averageStars });
    }

    handleMouseEnter = () => {
        this.setState({ whatToDisplay: 'userStars' });
    }

    handleMouseLeave = () => {
        this.setState({ whatToDisplay: 'averageStars' });
    }

    handleMouseEnterStar = (value) => {
        const userStars = this.state.userStars;
        userStars.map(elt => {
            if(elt.value <= value) {
                elt.color = 'blue';
            } else {
                elt.color = 'grey';
            }
            return elt;
        });
        this.setState({ userStars, userRate: value });
    }

    handleClickStar = (value) => {
        //const { onStarClicked } = this.props;
        console.log(value);
        //onStarClicked && onStarClicked(value);
        //this.setState({ whatToDisplay: 'averageStars', hasvoted: 1 });
    }

    render() {

        return (

            <Div
                onMouseEnter={() => this.handleMouseEnter()}
                onMouseLeave={() => this.handleMouseLeave()}
            >
                {this.state.whatToDisplay === 'averageStars' &&
                    <div className="averageBlock">
                        <div className="left">
                            <div className="stars">
                                {this.state.averageStars.map(rate => (
                                    <Stars
                                        className="star"
                                        key={rate.value}
                                        color={rate.color}
                                    />
                                ))}
                            </div>
                        </div>
                        <div className="right">
                            {this.state.hasvoted === 0 &&
                                <RatesInfos
                                    className="rates-infos"
                                    average={this.state.average}
                                    votesCount={this.state.votesCount}
                                />
                            }
                            {this.state.hasvoted === 1 &&
                                <Ticks/>
                            }
                        </div>
                    </div>
                }
                {this.state.whatToDisplay === 'userStars' &&
                    <div className="userBlock">
                        <div className="left">
                            <div className="stars">
                                {this.state.userStars.map(rate => (
                                    <Stars
                                        className="star"
                                        key={rate.value}
                                        color={rate.color}
                                        onMouseEnter={() => this.handleMouseEnterStar(rate.value)}
                                        onClick={() => this.handleClickStar(rate.value)}
                                    />
                                ))}
                            </div>
                            <p>Ma note est de {this.state.userRate} sur 5</p>
                        </div>
                        <div className="right"></div>
                    </div>
                }
            </Div>

        );
    }
}

export default RatingStars;