/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
import { d as defineCustomElement$1 } from './salla-button2.js';

const sallaCommentFormCss = ":host{display:block}";

const SallaCommentForm = /*@__PURE__*/ proxyCustomElement(class SallaCommentForm extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.commentAdded = createEvent(this, "commentAdded", 7);
        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 style() { return sallaCommentFormCss; }
}, [0, "salla-comment-form", {
        "type": [1537],
        "showAvatar": [4, "show-avatar"],
        "itemId": [1544, "item-id"],
        "placeholder": [32],
        "submitText": [32],
        "canComment": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-comment-form", "salla-button"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-comment-form":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaCommentForm);
            }
            break;
        case "salla-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { SallaCommentForm as S, defineCustomElement as d };
