/*!
 * Crafted with ❤ by Salla
 */
import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { I as IconVerified } from './check.js';
import { d as defineCustomElement$5 } from './salla-button2.js';
import { d as defineCustomElement$4 } from './salla-loading2.js';
import { d as defineCustomElement$3 } from './salla-modal2.js';
import { d as defineCustomElement$2 } from './salla-rating-stars2.js';
import { d as defineCustomElement$1 } from './salla-slider2.js';

var Reply = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>reply</title>
<path d="M20 14.667h-12.609l9.401-6.927c0.592-0.436 0.72-1.271 0.283-1.863-0.439-0.595-1.273-0.72-1.864-0.283l-12.667 9.333c-0.343 0.251-0.544 0.649-0.544 1.072s0.201 0.821 0.543 1.073l12.667 9.333c0.237 0.176 0.515 0.26 0.789 0.26 0.409 0 0.813-0.188 1.075-0.543 0.437-0.592 0.309-1.427-0.283-1.863l-9.4-6.928h12.609c4.412 0 8 3.588 8 8 0 0.737 0.597 1.333 1.333 1.333s1.333-0.596 1.333-1.333c0-5.881-4.785-10.667-10.667-10.667z"></path>
</svg>
`;

var ThumbsUp = `<!-- Generated by IcoMoon.io -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
<title>thumbs-up</title>
<path d="M26.667 10.667h-8.261l1.279-3.38c0.723-1.911 0.087-4.051-1.549-5.203-0.909-0.639-2.004-0.881-3.085-0.684-1.101 0.203-2.061 0.837-2.703 1.787l-5.452 8.067c-0.148 0.22-0.228 0.48-0.228 0.747v12c0 3.676 2.991 6.667 6.667 6.667h8.688c2.535 0 4.817-1.407 5.955-3.671l2.548-5.063c0.093-0.187 0.143-0.392 0.143-0.6v-6.667c0-2.205-1.795-4-4-4zM28 21.017l-2.405 4.78c-0.683 1.359-2.052 2.203-3.573 2.203h-8.688c-2.205 0-4-1.795-4-4v-11.592l5.223-7.728c0.237-0.352 0.584-0.585 0.975-0.657 0.367-0.067 0.749 0.017 1.068 0.241 0.631 0.444 0.879 1.317 0.591 2.079l-1.963 5.185c-0.156 0.409-0.099 0.869 0.149 1.229s0.66 0.576 1.099 0.576h10.192c0.735 0 1.333 0.599 1.333 1.333zM2.667 10.667c-0.736 0-1.333 0.597-1.333 1.333v16c0 0.736 0.597 1.333 1.333 1.333s1.333-0.597 1.333-1.333v-16c0-0.736-0.597-1.333-1.333-1.333z"></path>
</svg>
`;

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

const SallaCommentItem = /*@__PURE__*/ proxyCustomElement(class SallaCommentItem extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        // Translations
        this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
        this.rated_trans = salla.lang.get('pages.rating.rated');
        this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
        this.has_order_trans = salla.lang.get('blocks.comments.has_order');
        this.allowLikes = salla.config.get('store.settings.rating.allow_likes');
        this.allowAttachImages = salla.config.get('store.settings.rating.allow_attach_images');
        this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
        this.likesCount = 0;
        this.likedComments = [];
        salla.lang.onLoaded(() => {
            const setNestedAsync = (lang, key, value) => {
                return new Promise((resolve) => {
                    salla.helpers.setNested(salla.lang.messages[lang], key, value);
                    resolve(true);
                });
            };
            const setTranslations = async () => {
                await setNestedAsync('ar.trans', 'blocks.comments.helpful', 'مفيد');
                await setNestedAsync('en.trans', 'blocks.comments.helpful', 'Helpful');
                this.helpfulLabel = salla.lang.getWithDefault('blocks.comments.helpful', 'مفيد');
            };
            this.has_bought_trans = salla.lang.get('blocks.comments.has_bought');
            this.rated_trans = salla.lang.get('pages.rating.rated');
            this.waiting_approval_trans = salla.lang.get('blocks.comments.waiting_approval');
            this.has_order_trans = salla.lang.get('blocks.comments.has_order');
            setTranslations();
        });
    }
    componentDidLoad() {
        this.likesCount = this.comment.likes_count;
        try {
            this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
            if (this.likedComments.includes(this.comment.id)) {
                this.likeBtn.classList.add('liked');
                this.likeBtn.fill = "solid";
            }
        }
        catch {
            salla.log('Bad json for liked_comments');
        }
    }
    getReplies() {
        return Array.isArray(this.comment.replies) ? this.comment.replies : [this.comment.replies];
    }
    getDate(dateString) {
        const [datePart] = dateString.split(' ');
        const [year, month, day] = datePart.split('-');
        const formattedDate = `${parseInt(day, 10)}/${parseInt(month, 10)}/${parseInt(year, 10)}`;
        return formattedDate;
    }
    getTime(dateString) {
        const [, timePart] = dateString.split(' ');
        const [hours, minutes] = timePart.split(':');
        const formattedTime = `${parseInt(hours, 10)}:${parseInt(minutes, 10)}`;
        return formattedTime;
    }
    async toggleLike() {
        if (salla.config.isGuest()) {
            return salla.notify.error(salla.lang.get('common.messages.must_login'));
        }
        this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
        const isLiked = this.likedComments.includes(this.comment.id);
        try {
            const endpoint = isLiked ? `rating/${this.comment.id}/unlike` : `rating/${this.comment.id}/like`;
            const res = await salla.api.request(endpoint, '', 'put');
            salla.log(res.message);
            if (isLiked) {
                this.likeBtn.classList.remove('liked');
                this.likeBtn.fill = 'outline';
                this.updateLikedComments(this.comment.id, false);
                this.likesCount--;
            }
            else {
                this.likeBtn.classList.add('liked');
                this.likeBtn.fill = 'solid';
                this.updateLikedComments(this.comment.id, true);
                this.likesCount++;
            }
        }
        catch (e) {
            if (e.response.status == 409) {
                if (this.likeBtn.classList.contains('liked')) {
                    this.likeBtn.fill = 'outline';
                    this.likeBtn.classList.remove('liked');
                    this.updateLikedComments(this.comment.id, false);
                    this.likesCount--;
                }
                else {
                    this.likeBtn.fill = 'solid';
                    this.likeBtn.classList.add('liked');
                    salla.logger.warn('Like already exists');
                    this.updateLikedComments(this.comment.id, true);
                }
            }
        }
    }
    updateLikedComments(commentId, add) {
        this.likedComments = JSON.parse(localStorage.getItem('liked_comments') || '[]');
        if (add) {
            if (!this.likedComments.includes(commentId)) {
                this.likedComments.push(commentId);
            }
        }
        else {
            this.likedComments = this.likedComments.filter(id => id !== commentId);
        }
        localStorage.setItem('liked_comments', JSON.stringify(this.likedComments));
    }
    PinnedIcon() {
        return (h("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: "16", height: "16", color: "#555555", fill: "none", stroke: "currentColor", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }, h("path", { d: "M12 16V21" }), h("path", { d: "M8 5.2918C8 5.02079 8 4.88529 8.01312 4.77132C8.1194 3.84789 8.84789 3.1194 9.77133 3.01312C9.88529 3 10.0208 3 10.2918 3H13.7082C13.9792 3 14.1147 3 14.2287 3.01312C15.1521 3.1194 15.8806 3.84789 15.9869 4.77132C16 4.88529 16 5.02079 16 5.2918C16 5.37885 16 5.42237 15.9967 5.46264C15.9708 5.78281 15.7927 6.07104 15.5179 6.2374C15.4834 6.25832 15.4444 6.27779 15.3666 6.31672L15.1055 6.44726C14.7021 6.64897 14.5003 6.74983 14.3681 6.90564C14.26 7.03286 14.1856 7.18509 14.1515 7.34846C14.1097 7.54854 14.1539 7.76968 14.2424 8.21197L15 12H15.3333C15.9533 12 16.2633 12 16.5176 12.0681C17.2078 12.2531 17.7469 12.7922 17.9319 13.4824C18 13.7367 18 14.0467 18 14.6667C18 14.9767 18 15.1317 17.9659 15.2588C17.8735 15.6039 17.6039 15.8735 17.2588 15.9659C17.1317 16 16.9767 16 16.6667 16H7.33333C7.02334 16 6.86835 16 6.74118 15.9659C6.39609 15.8735 6.12654 15.6039 6.03407 15.2588C6 15.1317 6 14.9767 6 14.6667C6 14.0467 6 13.7367 6.06815 13.4824C6.25308 12.7922 6.79218 12.2531 7.48236 12.0681C7.73669 12 8.04669 12 8.66667 12H9L9.75761 8.21197C9.84606 7.76968 9.89029 7.54854 9.84852 7.34846C9.81441 7.18509 9.73995 7.03286 9.63194 6.90564C9.49965 6.74983 9.29794 6.64897 8.89452 6.44726L8.63344 6.31672C8.55558 6.27779 8.51665 6.25832 8.48208 6.2374C8.20731 6.07104 8.02917 5.78281 8.00326 5.46264C8 5.42237 8 5.37885 8 5.2918Z" })));
    }
    render() {
        let isAdmin = this.comment.type == 'admin';
        return (h(Host, { key: '05b9da17f0e07e1115c87c671998e8123b8b0bb4', class: isAdmin ? 's-comments-item-admin' : 's-comments-item' }, h("div", { key: '49552e9efab0aa751db6d7051318f626f9124e5a', class: { "s-comments-item-wrapper": !isAdmin, "s-comments-item-admin-wrapper": isAdmin }, id: `s-comments-item-${this.comment.id}` }, h("div", { key: 'e795f238ee0a562675843e6da0f495512abf550c', class: "s-comments-item-inner s-comments-flex-1" }, isAdmin && h("span", { key: '05270553da039c8cdf611d7a1a0ac1ff9d5d88f2', class: "s-comments-item-reply-icon", innerHTML: Reply }), h("div", { key: 'be2ca109e89c83691d3a0a7a9e03f6e1b94fb09e', class: "s-comments-item-avatar" }, h("img", { key: '402cff5a2003bf385ae8f9f7890555ef2886de87', "data-src": this.comment?.avatar, alt: this.comment?.name, src: this.comment?.avatar, class: "s-comments-item-avatar-img lazy" })), h("div", { key: 'af7992ad18ed3d756594cf678d01c1fdd2af6cca', class: "s-comments-flex-1" }, h("div", { key: 'b11dc77d96bf83c0dddd1edaa5fb57286b5b6f55', class: "s-comments-item-user-wrapper" }, h("div", { key: 'f899a929d3e67c7898d22cf7abc56891cdf0fa7c', class: "s-comments-item-user-info" }, h("h3", { key: '9968169cbd69eb6d1d7e0b0498db03a0431d2a16', class: this.comment.is_pinned ? "s-comments-item-user-info-name" : "s-comments-item-user-info-name-with-margin" }, this.comment?.name), this.comment.is_pinned ?
            h("div", { class: "s-comments-item-pinned-icon-with-margin" }, this.PinnedIcon())
            : null, (this.comment.has_order || !!this.comment.rating) && !this.comment.is_pending && !this.hideBought ?
            h("div", { class: "s-comments-flex" }, this.comment.has_order ?
                [h("span", { class: "s-comments-item-has-order-check-icon", innerHTML: IconVerified }), h("span", { class: "s-comments-item-has-order-check-text" }, this.has_bought_trans, " ", this.comment.rating ? ', ' : '')] : null, !!this.comment.rating ?
                h("span", { class: "s-comments-item-rated-widget" }, this.rated_trans) : null)
            : null), h("p", { key: 'cafa0be66307c6b377f90033745b939da66344c8', class: "s-comments-item-timestamp s-ltr" }, this.getDate(this.comment.created_at?.date), h("span", { key: '608db7108242f10e4d649bb23d1382f49227aeb8', class: "s-comments-item-time" }, " - ", this.getTime(this.comment.created_at?.date))), !!this.comment.rating || !!this.comment.stars ?
            h("salla-rating-stars", { size: "mini", class: "s-comments-item-stars", value: this.comment.rating || this.comment.stars })
            : null), h("div", { key: '9b86497c3791f7e890b560207068de4ca38d6e60', class: "s-comments-item-content" }, h("p", { key: '82433f42c6b0ee29cdd42725ce1aba4dd62e67d8', innerHTML: this.comment.content }), this.allowAttachImages && h("div", { key: '9a1bd14eb18f637588f152b8842d4637b9a6e7c1', class: "s-comments-item-images" }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "", onClick: () => this.modal.open() }))), h("salla-modal", { key: 'be260096b68a1a58889bed09c68b3a2c75adefa6', ref: modal => this.modal = modal, width: "sm" }, h("salla-slider", { key: '8f78ee0ab370e4f99eb68fe1afa4491c4a6a0b80', id: `s-comments-item-${this.comment.id}-images`, class: "s-comments-item-images-slider", type: "thumbs", "auto-height": true, showControls: this.comment.images.length > 1 ? true : false, "show-thumbs-controls": "false" }, h("div", { key: 'eea6149852a409f2e25b8f9ec4375087e1c9beb8', slot: 'items' }, this.comment.images.map((image, index) => (h("img", { key: index, src: image, alt: "" })))), h("div", { key: '9f693fcd5afc5e443e0ff590d6e7e386746e2a98', slot: "thumbs" }, this.comment.images.map((image, index) => (h("div", { class: "s-comments-item-images-slider-thumb" }, h("img", { key: index, src: image, alt: "" })))))))), this.allowLikes && !isAdmin && !!this.comment.id && salla.url.is_page('product.single') ? h("salla-button", { ref: el => this.likeBtn = el, class: `s-comments-item-like-btn ${this.likedComments.includes(this.comment.id) ? 'liked' : ''}`, loaderPosition: 'center', fill: 'outline', size: 'small', onClick: () => this.toggleLike() }, h("span", null, this.helpfulLabel, " ", this.likesCount > 0 ? `(${this.likesCount})` : ''), h("span", { innerHTML: ThumbsUp })) : '', this.comment.is_pending ?
            h("span", { class: "s-comments-item-pending-text" }, this.waiting_approval_trans) : null))), !!this.getReplies().length && !isAdmin ?
            this.getReplies().map((reply) => {
                return h("div", null, h("salla-comment-item", { comment: reply }));
            }) : null)));
    }
    get host() { return this; }
    static get style() { return sallaCommentsCss; }
}, [0, "salla-comment-item", {
        "comment": [16],
        "hideBought": [16, "hide-bought"],
        "has_bought_trans": [32],
        "rated_trans": [32],
        "waiting_approval_trans": [32],
        "has_order_trans": [32],
        "allowLikes": [32],
        "allowAttachImages": [32],
        "helpfulLabel": [32],
        "likesCount": [32],
        "likedComments": [32]
    }]);
function defineCustomElement() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["salla-comment-item", "salla-button", "salla-comment-item", "salla-loading", "salla-modal", "salla-rating-stars", "salla-slider"];
    components.forEach(tagName => { switch (tagName) {
        case "salla-comment-item":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, SallaCommentItem);
            }
            break;
        case "salla-button":
            if (!customElements.get(tagName)) {
                defineCustomElement$5();
            }
            break;
        case "salla-comment-item":
            if (!customElements.get(tagName)) {
                defineCustomElement();
            }
            break;
        case "salla-loading":
            if (!customElements.get(tagName)) {
                defineCustomElement$4();
            }
            break;
        case "salla-modal":
            if (!customElements.get(tagName)) {
                defineCustomElement$3();
            }
            break;
        case "salla-rating-stars":
            if (!customElements.get(tagName)) {
                defineCustomElement$2();
            }
            break;
        case "salla-slider":
            if (!customElements.get(tagName)) {
                defineCustomElement$1();
            }
            break;
    } });
}
defineCustomElement();

export { SallaCommentItem as S, defineCustomElement as d };
