import { Host, h } from "@stencil/core";
import { useTranslation } from "../../utils/utils";
export class TypographyClamp {
    text;
    textColor = 'text-theme-gray';
    lines = 5;
    showMore = false;
    isClamped = false;
    contentEl;
    ro;
    deferCheck = () => {
        // Ensure layout/styles are applied before measuring
        requestAnimationFrame(() => this.checkClamped());
    };
    checkClamped = () => {
        if (!this.contentEl)
            return;
        // Preserve intended clamp state (based on showMore)
        const shouldBeClamped = !this.showMore;
        const CLAMP_CLASS = 'z-line-clamp';
        const hadClampClass = this.contentEl.classList.contains(CLAMP_CLASS);
        // Temporarily remove to measure full height
        this.contentEl.classList.remove(CLAMP_CLASS);
        const fullHeight = this.contentEl.scrollHeight;
        // Temporarily add to measure clamped height
        this.contentEl.classList.add(CLAMP_CLASS);
        const clampedHeight = this.contentEl.clientHeight;
        const next = fullHeight > clampedHeight + 1;
        if (this.isClamped !== next) {
            this.isClamped = next;
        }
        // Restore class to intended state
        if (shouldBeClamped) {
            if (!hadClampClass)
                this.contentEl.classList.add(CLAMP_CLASS);
        }
        else {
            this.contentEl.classList.remove(CLAMP_CLASS);
        }
    };
    componentDidLoad() {
        this.deferCheck();
        window.addEventListener('resize', this.checkClamped);
        // Observe element size/content changes (panel open, fonts, etc.)
        if ('ResizeObserver' in window) {
            this.ro = new ResizeObserver(() => this.checkClamped());
            if (this.contentEl)
                this.ro.observe(this.contentEl);
        }
    }
    disconnectedCallback() {
        window.removeEventListener('resize', this.checkClamped);
        if (this.ro)
            this.ro.disconnect();
    }
    onTextChange() {
        this.deferCheck();
    }
    onLinesChange() {
        this.deferCheck();
    }
    render() {
        const t = useTranslation();
        return (h(Host, { key: 'f76b2cd2aa4f2234a4b90b8b4b7d00affd315eb2' }, h("div", { key: '02fc3af644727ad9fda87278ececb0b707d61c7f' }, h("p", { key: '0900a7ebf35b374d75e810db41be1f61f6f28754', ref: el => (this.contentEl = el), class: `z-line-clamp-text ${this.textColor} ${this.showMore ? '' : 'z-line-clamp'}`, style: { '--z-line-clamp': String(this.lines) } }, this.text), this.isClamped && (h("div", { key: '72b0fef2a1365ce16fa0bd852596f80ff475e866', class: "z-line-clamp-wrapper text-primary", onClick: () => {
                this.showMore = !this.showMore;
                this.deferCheck();
            } }, h("div", { key: '29afe95fb8c597a3f5bb7a8ba3e3fa382eeb512d', class: "mt-1" }, this.showMore ? t('chat_tab.hide') : t('chat_tab.see_all_text')))))));
    }
    static get is() { return "typography-clamp"; }
    static get originalStyleUrls() {
        return {
            "$": ["typography-clamp.css"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["typography-clamp.css"]
        };
    }
    static get properties() {
        return {
            "text": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "text"
            },
            "textColor": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "text-color",
                "defaultValue": "'text-theme-gray'"
            },
            "lines": {
                "type": "number",
                "mutable": false,
                "complexType": {
                    "original": "number",
                    "resolved": "number",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": ""
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "lines",
                "defaultValue": "5"
            }
        };
    }
    static get states() {
        return {
            "showMore": {},
            "isClamped": {}
        };
    }
    static get watchers() {
        return [{
                "propName": "text",
                "methodName": "onTextChange"
            }, {
                "propName": "lines",
                "methodName": "onLinesChange"
            }];
    }
}
