/*!
 * Crafted with ❤ by Salla
 */
import { Host, h } from "@stencil/core";
export class SallaCommentForm {
    constructor() {
        this.placeholder = salla.lang.get('blocks.comments.placeholder');
        this.submitText = salla.lang.get('blocks.comments.submit');
        salla.lang.onLoaded(() => {
            this.placeholder = salla.lang.get('blocks.comments.placeholder');
            this.submitText = salla.lang.get('blocks.comments.submit');
        });
        salla.onReady(() => {
            this.canComment = salla.config.get('user.can_comment');
            this.itemId = salla.config.get('page.id');
            this.type = salla.url.is_page('page-single') ? 'page' : salla.url.is_page('blog.single') ? 'blog' : 'product';
        });
    }
    submit() {
        if (!this.commentForm.reportValidity()) {
            salla.log('CommentForm:: validation error!');
            return;
        }
        const commentText = this.commentField.value;
        this.submitBtn.load()
            .then(() => salla.comment.add({ id: this.itemId, comment: commentText, type: this.type }))
            .then(() => {
            this.commentAdded.emit({
                name: salla.config.get('user.name'),
                avatar: salla.config.get('user.avatar'),
                content: commentText,
                is_pending: true,
                created_at: { date: new Date().toISOString().replace('T', ' ').substring(0, 19) },
                images: [],
            });
            this.commentField.value = '';
        })
            .finally(() => this.submitBtn.stop());
    }
    render() {
        return (h(Host, { key: '2203b9f365e0658a3bc40fb0274ba9ddc0d1e040' }, !!this.canComment ? h("form", { ref: frm => this.commentForm = frm }, h("div", { class: "s-comment-form-wrapper" }, this.showAvatar ?
            h("img", { class: "s-comment-form-avatar", src: salla.config.get('user.avatar'), alt: "user avatar" }) : '', h("div", { class: "s-comment-form-content" }, h("textarea", { cols: 30, rows: 5, minlength: "4", maxlength: "500", ref: field => this.commentField = field, placeholder: this.placeholder, class: "s-comment-form-input", required: true }), h("br", null), h("div", { class: "s-comment-form-action" }, h("salla-button", { ref: btn => this.submitBtn = btn, "loader-position": 'center', onClick: () => this.submit() }, this.submitText))))) : ''));
    }
    static get is() { return "salla-comment-form"; }
    static get originalStyleUrls() {
        return {
            "$": ["salla-comment-form.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["salla-comment-form.css"]
        };
    }
    static get properties() {
        return {
            "type": {
                "type": "string",
                "attribute": "type",
                "mutable": true,
                "complexType": {
                    "original": "'product' | 'page' | 'blog'",
                    "resolved": "\"blog\" | \"page\" | \"product\"",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "Type of entity the comment is being submitted for. Defaults to `salla.url.is_page('page-single') ? 'page' : 'product'`"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            },
            "showAvatar": {
                "type": "boolean",
                "attribute": "show-avatar",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "To show the avatar or not in the comment form"
                },
                "getter": false,
                "setter": false,
                "reflect": false
            },
            "itemId": {
                "type": "any",
                "attribute": "item-id",
                "mutable": true,
                "complexType": {
                    "original": "string | number",
                    "resolved": "number | string",
                    "references": {}
                },
                "required": false,
                "optional": true,
                "docs": {
                    "tags": [],
                    "text": "The ID of the item(as defined in the type), where the comment is for. defaults to `salla.config.get('page.id')`"
                },
                "getter": false,
                "setter": false,
                "reflect": true
            }
        };
    }
    static get states() {
        return {
            "placeholder": {},
            "submitText": {},
            "canComment": {}
        };
    }
    static get events() {
        return [{
                "method": "commentAdded",
                "name": "commentAdded",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Emitted after a comment is successfully added, carrying a locally-built Comment object for instant rendering."
                },
                "complexType": {
                    "original": "{\n    id?: number;\n    avatar?: string;\n    name?: string;\n    content?: string;\n    is_pending?: boolean;\n    created_at?: { date?: string };\n    images: string[];\n  }",
                    "resolved": "{ id?: number; avatar?: string; name?: string; content?: string; is_pending?: boolean; created_at?: { date?: string; }; images: string[]; }",
                    "references": {}
                }
            }];
    }
}
