import { Host, h } from "@stencil/core";
import { copy as copyIcon } from "@pine-ds/icons/icons";
import { setupTruncationTooltip } from "../../utils/truncation-tooltip";
export class PdsCopytext {
    constructor() {
        this.truncationCleanup = null;
        /**
         * Determines whether `copytext` should have a visible border.
         * @defaultValue true
         */
        this.border = true;
        /**
         * Determines whether `copytext` should expand to the full width of its container.
         * @defaultValue false
         */
        this.fullWidth = false;
        /**
         * Determines whether the `value` should truncate and display with an ellipsis.
         * When text overflows, a tooltip showing the full value will appear on hover/focus.
         * @defaultValue false
         */
        this.truncate = false;
        this.copyToClipboard = async (value) => {
            try {
                if (typeof navigator.clipboard !== 'undefined') {
                    await navigator.clipboard.writeText(value);
                    this.pdsCopyTextClick.emit('Copied to clipboard');
                }
            }
            catch (err) {
                this.pdsCopyTextClick.emit(`Error writing text to clipboard: ${err}`);
            }
        };
        this.handleClick = () => {
            this.copyToClipboard(this.value);
        };
    }
    handleTruncateChange(newValue) {
        if (newValue) {
            this.initTruncationTooltip();
        }
        else {
            this.destroyTruncationTooltip();
        }
    }
    handleValueChange() {
        if (this.truncate) {
            this.initTruncationTooltip();
        }
    }
    componentDidLoad() {
        if (this.truncate) {
            this.initTruncationTooltip();
        }
    }
    disconnectedCallback() {
        this.destroyTruncationTooltip();
    }
    initTruncationTooltip() {
        this.destroyTruncationTooltip();
        if (this.valueSpanEl) {
            this.truncationCleanup = setupTruncationTooltip({
                hostEl: this.el,
                contentEl: this.valueSpanEl,
                getTooltipText: () => this.value || '',
            });
        }
    }
    destroyTruncationTooltip() {
        if (this.truncationCleanup) {
            this.truncationCleanup();
            this.truncationCleanup = null;
        }
    }
    classNames() {
        const classNames = ['pds-copytext'];
        if (this.border) {
            classNames.push('pds-copytext--bordered');
        }
        if (this.fullWidth) {
            classNames.push('pds-copytext--full-width');
        }
        if (this.truncate) {
            classNames.push('pds-copytext--truncated');
        }
        return classNames.join(' ');
    }
    render() {
        return (h(Host, { key: '43a3870fa4c24416e2e6e99dd7c423a5c32ac91e', class: this.classNames(), id: this.componentId }, h("pds-button", { key: 'f0735d3f245dd7150e88b3dd1a191c3ee86b6293', type: "button", variant: "unstyled", onClick: this.handleClick }, h("span", { key: 'ddf7cf205f9bb11dd4b4111435bb7efc15b0af61', ref: (el) => this.valueSpanEl = el }, this.value), h("pds-icon", { key: '0f35d997eb1766631ac6098bdb12d0aff9813012', icon: copyIcon, size: "16px" }))));
    }
    static get is() { return "pds-copytext"; }
    static get encapsulation() { return "shadow"; }
    static get originalStyleUrls() {
        return {
            "$": ["pds-copytext.scss"]
        };
    }
    static get styleUrls() {
        return {
            "$": ["pds-copytext.css"]
        };
    }
    static get properties() {
        return {
            "border": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "true"
                        }],
                    "text": "Determines whether `copytext` should have a visible border."
                },
                "getter": false,
                "setter": false,
                "reflect": true,
                "attribute": "border",
                "defaultValue": "true"
            },
            "componentId": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "A unique identifier used for the underlying component `id` attribute."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "component-id"
            },
            "fullWidth": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether `copytext` should expand to the full width of its container."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "full-width",
                "defaultValue": "false"
            },
            "truncate": {
                "type": "boolean",
                "mutable": false,
                "complexType": {
                    "original": "boolean",
                    "resolved": "boolean",
                    "references": {}
                },
                "required": false,
                "optional": false,
                "docs": {
                    "tags": [{
                            "name": "defaultValue",
                            "text": "false"
                        }],
                    "text": "Determines whether the `value` should truncate and display with an ellipsis.\nWhen text overflows, a tooltip showing the full value will appear on hover/focus."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "truncate",
                "defaultValue": "false"
            },
            "value": {
                "type": "string",
                "mutable": false,
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                },
                "required": true,
                "optional": false,
                "docs": {
                    "tags": [],
                    "text": "The string displayed that is also copied to the clipboard upon interaction."
                },
                "getter": false,
                "setter": false,
                "reflect": false,
                "attribute": "value"
            }
        };
    }
    static get events() {
        return [{
                "method": "pdsCopyTextClick",
                "name": "pdsCopyTextClick",
                "bubbles": true,
                "cancelable": true,
                "composed": true,
                "docs": {
                    "tags": [],
                    "text": "Event fired when copyText button is clicked."
                },
                "complexType": {
                    "original": "string",
                    "resolved": "string",
                    "references": {}
                }
            }];
    }
    static get elementRef() { return "el"; }
    static get watchers() {
        return [{
                "propName": "truncate",
                "methodName": "handleTruncateChange"
            }, {
                "propName": "value",
                "methodName": "handleValueChange"
            }];
    }
}
//# sourceMappingURL=pds-copytext.js.map
