import Renderables from '../Renderables';
import node from "../../support/node";
import { Specification } from "../../support/Specification";
import { MessageType } from "../../support/MessageType";
import { EventType } from "../../event/EventType";
import EventStream from "../../event/EventStream";
/**
 * Implementation of the 'rating' markup element. A div HTML element
 * is created and the class lto-rating is added to allow CSS modifications.
 *
 * @see {@link IRenderable}
 * @see {@link IStackeable}
 */
var Rating = /** @class */ (function () {
    function Rating(message) {
        this.spec = message;
        this.ratingContainer = node("div");
        this.ratingButtons = new Map();
        this.selectedRatingButtonType = RatingButtonType.NOT_YET_SELECTED;
    }
    /**
     * @inheritDoc
     */
    Rating.prototype.render = function (renderer, isNested) {
        // Div for both buttons
        new Specification(this.spec).initNode(this.ratingContainer, "lto-rating");
        this.ratingContainer.addAttributes({ type: Rating.TYPE });
        this.renderRatingButton();
        return this.ratingContainer.unwrap();
    };
    Rating.prototype.renderRatingButton = function () {
        var _this = this;
        // Like and dislike buttons
        var buttonLike = node("button").addClasses("lto-button");
        var buttonDislike = node("button").addClasses("lto-button");
        buttonLike.innerText('👍');
        this.ratingContainer.appendChild(buttonLike);
        buttonDislike.innerText('👎');
        this.ratingContainer.appendChild(buttonDislike);
        this.ratingButtons.set(RatingButtonType.LIKE, {
            type: RatingButtonType.LIKE,
            buttonNode: buttonLike,
            score: 1
        });
        this.ratingButtons.set(RatingButtonType.DISLIKE, {
            type: RatingButtonType.DISLIKE,
            buttonNode: buttonDislike,
            score: 0
        });
        // Comment form to be appended after rating button is clicked
        var commentForm = node("form").addClasses("lto-form");
        commentForm.appendChild(node("input").addAttributes({ type: "text" }).addAttributes({ placeholder: "optional" }));
        var submitButton = node("button").innerText("Send rating").addClasses("lto-button");
        commentForm.appendChild(submitButton);
        // Click events
        buttonLike.onClick(function (ev) {
            ev.preventDefault();
            _this.ratingButtonOnClick(RatingButtonType.LIKE, commentForm);
        });
        buttonDislike.onClick(function (ev) {
            ev.preventDefault();
            _this.ratingButtonOnClick(RatingButtonType.DISLIKE, commentForm);
        });
        submitButton.onClick(function (ev) {
            ev.preventDefault();
            var score = _this.getScoreOfClickedButton();
            var payload = { score: score };
            var comment = commentForm.unwrap().firstChild.value;
            var attributes = { comment: comment };
            var type = MessageType.RATING;
            var evType = EventType.withChannelId(EventType.PUBLISH, _this.spec.channelId);
            EventStream.emit(evType, { attributes: attributes, type: type, payload: payload });
            // Possibility to hide the rating container once it has been submitted
            _this.ratingContainer.addClasses("lto-rating-submitted");
        });
    };
    Rating.prototype.ratingButtonOnClick = function (buttonType, commentForm) {
        this.ratingContainer.appendChild(commentForm);
        this.selectedRatingButtonType = buttonType;
        // The button that was clicked
        this.ratingButtons.get(buttonType).buttonNode.addClasses("lto-button-last-clicked");
        // The other button
        this.ratingButtons.get((buttonType + 1) % 2).buttonNode.removeClasses("lto-button-last-clicked");
    };
    Rating.prototype.getScoreOfClickedButton = function () {
        return this.ratingButtons.get(this.selectedRatingButtonType).score.toString();
    };
    Rating.TYPE = "rating";
    return Rating;
}());
export { Rating };
Renderables.register("rating", Rating);
var RatingButtonType;
(function (RatingButtonType) {
    RatingButtonType[RatingButtonType["LIKE"] = 0] = "LIKE";
    RatingButtonType[RatingButtonType["DISLIKE"] = 1] = "DISLIKE";
    RatingButtonType[RatingButtonType["NOT_YET_SELECTED"] = 2] = "NOT_YET_SELECTED";
})(RatingButtonType || (RatingButtonType = {}));
//# sourceMappingURL=index.js.map