// Models
import { Review } from '../../../models/feedback/review-model';
// Stencil
import { h } from "@stencil/core";
export class FeedbackReviewContent {
    constructor() {
        this.message = "Thank you for leaving us a feedback. This is very important to us.";
        this.messageOfThanks = 'Thank you for your feedback! ❤';
        this.showMessageOfThanks = true;
        this.showSkipButton = false;
        this.showCancelButton = false;
        this.lightMode = false;
        // States
        this.review = new Review();
        this.submitted = false;
    }
    ////////////////////////////////////////////////////////////////
    // User interactions
    ////////////////////////////////////////////////////////////////
    /**
     * The user submits the form
     * @param e
     */
    handleSubmit(e) {
        e.preventDefault();
        this.review.date = new Date();
        this.review.group = this.group;
        this.onSubmit.emit(this.review);
        this.submitted = true;
    }
    /**
     * The user cancels or skips the form
     * @param e
     */
    handleCancel(e) {
        e.preventDefault();
        this.onSubmit.emit(null);
    }
    /**
     * The rating has changed
     * @param event
     */
    handleRatingChange(event) {
        this.review.rating = event.detail;
    }
    /**
     * The like comment has changed
     * @param event
     */
    handleLikeChange(event) {
        this.review.like = event.target.value;
    }
    /**
     * The dislike comment has changed
     * @param event
     */
    handleDislikeChange(event) {
        this.review.dislike = event.target.value;
    }
    /**
     * The comment has changed
     * @param event
     */
    handleCommentChange(event) {
        this.review.comment = event.target.value;
    }
    ////////////////////////////////////////////////////////////////
    // Render
    ////////////////////////////////////////////////////////////////
    renderMessageOfThanks() {
        return (h("div", { class: "message-thanks-container" },
            h("ion-text", { color: this.lightMode ? 'tertiary' : 'light' },
                h("p", { class: "message-thanks-text" }, this.messageOfThanks))));
    }
    render() {
        return (h("div", { class: 'main-review-container ' + (this.lightMode ? 'light-background-mode' : 'color-background-mode') }, this.submitted
            ? h("span", null, this.renderMessageOfThanks())
            : h("div", null,
                h("ion-list", { class: "form-list" },
                    h("form", { onSubmit: (e) => this.handleSubmit(e) },
                        h("ion-text", { color: this.lightMode ? 'tertiary' : 'light' },
                            h("p", { class: "message-text" }, this.message)),
                        h("star-rating", { light: !this.lightMode, onRatingChanged: (e) => this.handleRatingChange(e) }),
                        !this.commentOnly &&
                            h("ion-item", { class: "list-item" },
                                h("ion-label", { class: 'form-label', color: this.lightMode ? 'tertiary' : 'light', position: "floating" }, this.positiveCommentLabel),
                                h("ion-textarea", { color: this.lightMode ? 'dark' : 'light', rows: 3, value: this.review.like, onInput: (event) => this.handleLikeChange(event) })),
                        !this.commentOnly &&
                            h("ion-item", { class: "list-item" },
                                h("ion-label", { class: 'form-label', color: this.lightMode ? 'tertiary' : 'light', position: "floating" }, this.negativeCommentLabel),
                                h("ion-textarea", { color: this.lightMode ? 'dark' : 'light', rows: 3, value: this.review.dislike, onInput: (event) => this.handleDislikeChange(event) })),
                        this.commentOnly &&
                            h("ion-item", { class: "list-item" },
                                h("ion-label", { class: 'form-label', color: this.lightMode ? 'tertiary' : 'light', position: "floating" }, this.neutralCommentLabel),
                                h("ion-textarea", { color: this.lightMode ? 'dark' : 'light', rows: 3, value: this.review.comment, onInput: (event) => this.handleCommentChange(event) })))),
                h("div", { class: "buttons-container" },
                    this.showCancelButton &&
                        h("ion-button", { color: this.lightMode ? 'secondary' : 'light', size: "default", fill: "clear", type: "submit", class: "form-button", onClick: (e) => this.handleCancel(e) }, this.cancelButton),
                    this.showSkipButton &&
                        h("ion-button", { color: this.lightMode ? 'secondary' : 'light', size: "default", fill: "clear", type: "submit", class: "form-button", onClick: (e) => this.handleCancel(e) }, this.skipButton),
                    h("ion-button", { color: this.lightMode ? 'secondary' : 'light', size: "default", type: "submit", class: "form-button", onClick: (e) => this.handleSubmit(e) }, this.submitButton)))));
    }
    static get is() { return "feedback-review-content"; }
    static get originalStyleUrls() { return {
        "$": ["feedback-review-content.scss"]
    }; }
    static get styleUrls() { return {
        "$": ["feedback-review-content.css"]
    }; }
    static get properties() { return {
        "group": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "group",
            "reflect": false
        },
        "commentOnly": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "comment-only",
            "reflect": false
        },
        "message": {
            "type": "string",
            "mutable": false,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "message",
            "reflect": false,
            "defaultValue": "\"Thank you for leaving us a feedback. This is very important to us.\""
        },
        "messageOfThanks": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "message-of-thanks",
            "reflect": false,
            "defaultValue": "'Thank you for your feedback! \u2764'"
        },
        "showMessageOfThanks": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-message-of-thanks",
            "reflect": false,
            "defaultValue": "true"
        },
        "showSkipButton": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-skip-button",
            "reflect": false,
            "defaultValue": "false"
        },
        "showCancelButton": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "show-cancel-button",
            "reflect": false,
            "defaultValue": "false"
        },
        "lightMode": {
            "type": "boolean",
            "mutable": false,
            "complexType": {
                "original": "boolean",
                "resolved": "boolean",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "light-mode",
            "reflect": false,
            "defaultValue": "false"
        },
        "positiveCommentLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "positive-comment-label",
            "reflect": false
        },
        "negativeCommentLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "negative-comment-label",
            "reflect": false
        },
        "neutralCommentLabel": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "neutral-comment-label",
            "reflect": false
        },
        "cancelButton": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "cancel-button",
            "reflect": false
        },
        "skipButton": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "skip-button",
            "reflect": false
        },
        "submitButton": {
            "type": "string",
            "mutable": true,
            "complexType": {
                "original": "string",
                "resolved": "string",
                "references": {}
            },
            "required": false,
            "optional": false,
            "docs": {
                "tags": [],
                "text": ""
            },
            "attribute": "submit-button",
            "reflect": false
        }
    }; }
    static get states() { return {
        "review": {},
        "submitted": {}
    }; }
    static get events() { return [{
            "method": "onSubmit",
            "name": "onSubmit",
            "bubbles": true,
            "cancelable": true,
            "composed": true,
            "docs": {
                "tags": [],
                "text": ""
            },
            "complexType": {
                "original": "Review",
                "resolved": "Review",
                "references": {
                    "Review": {
                        "location": "import",
                        "path": "../../../models/feedback/review-model"
                    }
                }
            }
        }]; }
}
