"use strict";

var ratings = [300, 234, 13, 1, 0];

var RatingBarsTable = React.createClass({
    displayName: "RatingBarsTable",

    getAverageRating: function getAverageRating() {
        // var averageRating = this.props.ratings.reduce((rating, sum) {
        //     return rating + sum;
        // }, 0)
        return 0;
    },
    renderFiveStars: function renderFiveStars() {
        return '12345'.split().map(function (index) {
            return React.createElement("i", { className: "fa fa-star", key: index });
        });
    },
    renderBars: function renderBars() {
        var sum = this.props.ratings.reduce(function (value, sum) {
            return sum + value;
        }, 0);
        return this.props.ratings.map(function (rating, index) {
            return React.createElement(
                "tr",
                { key: index },
                React.createElement(
                    "td",
                    { className: "stars" },
                    React.createElement("i", { className: "fa fa-star" }),
                    React.createElement(
                        "span",
                        { className: "star-count" },
                        5 - index
                    )
                ),
                React.createElement(
                    "td",
                    { className: "bar" },
                    React.createElement(
                        "div",
                        { className: "bar-bg" },
                        React.createElement("div", { className: "star-" + index + " bar-fg", style: { width: rating / sum + "%"
                            } })
                    )
                ),
                React.createElement(
                    "td",
                    { className: "rating-count" },
                    rating
                )
            );
        });
    },
    render: function render() {
        var averageRating = this.getAverageRating();
        var sum = this.props.ratings.reduce(function (value, sum) {
            return sum + value;
        }, 0);
        return React.createElement(
            "table",
            { className: "rating-table", cellspacing: "0", cellpadding: "0" },
            React.createElement(
                "tr",
                { className: "avg-ratings" },
                React.createElement(
                    "td",
                    { rowspan: "6" },
                    React.createElement(
                        "div",
                        { className: "rating-number" },
                        averageRating
                    ),
                    React.createElement(
                        "div",
                        { className: "rating-star" },
                        React.createElement(
                            "div",
                            { className: "bg" },
                            this.renderFiveStars()
                        ),
                        React.createElement(
                            "div",
                            { className: "fg", style: {
                                    width: "calc(1em * 5 * " + averageRating + " / 5)"
                                } },
                            this.renderFiveStars()
                        )
                    ),
                    React.createElement(
                        "div",
                        { className: "rating-count" },
                        sum,
                        " ratings"
                    )
                )
            ),
            this.renderBars()
        );
    }
});

ReactDOM.render(React.createElement(RatingBarsTable, { ratings: ratings }), document.body);