import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
import { f as formatDate } from './helpers.js';
import { L as Locale } from './locale.js';

const commentsViewerCss = ":host{display:flex;flex-direction:column;height:100%}.comment-item{display:flex;flex-direction:column;gap:var(--control-mer-control-label-vertical-spacing, 4px)}.comments-list{display:flex;flex-direction:column;gap:var(--spacing-gap-xl);list-style:none;margin:0;padding:0}.divider{border:none;border-top:1px solid var(--color-border-surface-on-elevation-1, #333d47);margin:0}.row{display:flex;flex-direction:column;gap:var(--spacing-gap-xl)}.comments-container{overflow-y:auto;flex:1}.comment-title{color:var(--color-text-neutral-neutral)}";

var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a getter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot read private member from an object whose class did not declare it");
    return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
};
var __classPrivateFieldSet = (undefined && undefined.__classPrivateFieldSet) || function (receiver, state, value, kind, f) {
    if (kind === "m")
        throw new TypeError("Private method is not writable");
    if (kind === "a" && !f)
        throw new TypeError("Private accessor was defined without a setter");
    if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver))
        throw new TypeError("Cannot write private member to an object whose class did not declare it");
    return (kind === "a" ? f.call(receiver, value) : f ? f.value = value : state.set(receiver, value)), value;
};
var _GxIdeCommentsViewer_componentLocale, _GxIdeCommentsViewer_renderCommentItem, _GxIdeCommentsViewer_renderFooter, _GxIdeCommentsViewer_closeHandler;
const CSS_BUNDLES = [
    "resets/box-sizing",
    "utils/form--full",
    "utils/layout",
    "utils/typography",
    "utils/spacing",
    "chameleon/scrollbar"
];
const GxIdeCommentsViewer$1 = /*@__PURE__*/ proxyCustomElement(class GxIdeCommentsViewer extends HTMLElement {
    constructor() {
        super();
        this.__registerHost();
        this.__attachShadow();
        _GxIdeCommentsViewer_componentLocale.set(this, void 0);
        _GxIdeCommentsViewer_renderCommentItem.set(this, (commentData) => {
            return (h("div", { class: "comment-item" }, h("header", null, h("span", { class: "body-semi-bold-s comment-title" }, formatDate(new Date(commentData.date)), " - ", commentData.user)), h("p", { class: "body-regular-m" }, commentData.comment)));
        });
        _GxIdeCommentsViewer_renderFooter.set(this, () => {
            return (h("footer", { class: "control-footer-with-border spacing-body" }, h("div", { class: "buttons-spacer" }, h("button", { class: "button-primary", onClick: __classPrivateFieldGet(this, _GxIdeCommentsViewer_closeHandler, "f") }, __classPrivateFieldGet(this, _GxIdeCommentsViewer_componentLocale, "f").buttons.close))));
        });
        _GxIdeCommentsViewer_closeHandler.set(this, async () => {
            await this.closeCallback();
        });
        this.commentsData = [];
        this.closeCallback = undefined;
    }
    async componentWillLoad() {
        __classPrivateFieldSet(this, _GxIdeCommentsViewer_componentLocale, await Locale.getComponentStrings(this.el), "f");
    }
    render() {
        return (h(Host, { class: "widget" }, h("ch-theme", { model: CSS_BUNDLES }), h("div", { class: "spacing-body comments-container scrollable" }, h("ul", { class: "comments-list" }, this.commentsData.map((comment, idx) => (h("li", { class: "row" }, __classPrivateFieldGet(this, _GxIdeCommentsViewer_renderCommentItem, "f").call(this, comment), idx < this.commentsData.length - 1 && h("hr", { class: "divider" })))))), __classPrivateFieldGet(this, _GxIdeCommentsViewer_renderFooter, "f").call(this)));
    }
    static get assetsDirs() { return ["gx-ide-assets/comments-viewer"]; }
    get el() { return this; }
    static get style() { return commentsViewerCss; }
}, [1, "gx-ide-comments-viewer", {
        "commentsData": [16],
        "closeCallback": [16]
    }]);
_GxIdeCommentsViewer_componentLocale = new WeakMap(), _GxIdeCommentsViewer_renderCommentItem = new WeakMap(), _GxIdeCommentsViewer_renderFooter = new WeakMap(), _GxIdeCommentsViewer_closeHandler = new WeakMap();
function defineCustomElement$1() {
    if (typeof customElements === "undefined") {
        return;
    }
    const components = ["gx-ide-comments-viewer"];
    components.forEach(tagName => { switch (tagName) {
        case "gx-ide-comments-viewer":
            if (!customElements.get(tagName)) {
                customElements.define(tagName, GxIdeCommentsViewer$1);
            }
            break;
    } });
}

const GxIdeCommentsViewer = GxIdeCommentsViewer$1;
const defineCustomElement = defineCustomElement$1;

export { GxIdeCommentsViewer, defineCustomElement };

//# sourceMappingURL=gx-ide-comments-viewer.js.map