'use client';
import { __decorate } from 'tslib';
import { html, nothing } from 'lit';
import { property, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { watch } from '../../utils/watch.js';
import css_248z from './badge.js';
import SgdsElement from '../../base/sgds-element.js';
import { SgdsTooltip } from '../Tooltip/sgds-tooltip.js';
import { SgdsCloseButton } from '../CloseButton/sgds-close-button.js';
import { getTextContent } from '../../utils/slot.js';

/**
 * @summary Badges can be used to highlight important bits of information such as labels, notifications & status.
 * When the text exceeds the width, it will be truncated with a tooltip that will be displayed on hover.
 *
 * @slot default - slot for badge
 * @slot icon - The slot for icon to the left of the badge text
 *
 * @event sgds-show - Emitted when the badge appears.
 * @event sgds-hide - Emitted when the badge is starting to close but has not closed.
 * @event sgds-after-show - Emitted after the badge has appeared
 * @event sgds-after-hide - Emitted after the badge has closed
 */
class SgdsBadge extends SgdsElement {
    constructor() {
        super(...arguments);
        /** Controls the appearance of the dismissible badge. This prop only applies when dismissible is true  */
        this.show = false;
        /**
         * One or more badge variant combinations.
         * Variants include: `primary`, `accent`, `success`, `danger`, `warning`, `cyan`, `purple`, `neutral`, `white`, `info`.
         *
         * (@deprecated) The `info` variant is deprecated. Use `primary` instead.
         */
        this.variant = "primary";
        /** Manually set the outlined state to false */
        this.outlined = false;
        /** Manually set the dismissible state of the button to `false` */
        this.dismissible = false;
        /** Manually enable full width */
        this.fullWidth = false;
        this.truncated = false;
        this.text = "";
    }
    /** Closes the badge  */
    close() {
        this.show = false;
    }
    /**@internal */
    _handleShowChange() {
        if (this.show) {
            const sgdsShow = this.emit("sgds-show", { cancelable: true });
            if (sgdsShow.defaultPrevented) {
                this.show = false;
                return;
            }
            // animations if any go here
            this.emit("sgds-after-show");
        }
        else {
            const sgdsHide = this.emit("sgds-hide", { cancelable: true });
            if (sgdsHide.defaultPrevented) {
                this.show = true;
                return;
            }
            // animations if any go here
            this.emit("sgds-after-hide");
        }
    }
    /**@internal */
    _handleTruncation() {
        // checking of text height if its exceeding parent, it needs to be truncated
        const badge = this.shadowRoot.querySelector(".badge");
        const badgeLabel = this.shadowRoot.querySelector(".badge-label");
        if (badge && badgeLabel) {
            const labelHeight = badgeLabel.getBoundingClientRect().height;
            const badgeHeight = badge.getBoundingClientRect().height;
            this.truncated = labelHeight > badgeHeight;
        }
    }
    _handleLabelSlotChange(e) {
        this.text = getTextContent(e.target);
        return;
    }
    _renderBadge() {
        const isDarkCloseButton = this.outlined || this.variant === "warning" || this.variant === "white";
        return html `<div
      class="  
          ${classMap({
            [`badge-dismissible`]: this.dismissible,
            badge: true,
            outlined: this.outlined,
            truncated: this.truncated,
            "full-width": this.fullWidth
        })}"
      aria-hidden=${this.show ? "false" : "true"}
    >
      ${!this.dismissible ? html `<slot name="icon"></slot>` : nothing}

      <span class="badge-label">
        <slot @slotchange=${this._handleLabelSlotChange}></slot>
      </span>

      ${this.dismissible
            ? html `<sgds-close-button
            size="sm"
            aria-label="close the badge"
            @click=${this.close}
            tone=${isDarkCloseButton ? "fixed-dark" : "fixed-light"}
          ></sgds-close-button>`
            : nothing}
    </div>`;
    }
    render() {
        return (this.dismissible && this.show) || !this.dismissible
            ? this.truncated
                ? html `<sgds-tooltip content=${this.text} @sgds-hide=${e => e.stopPropagation()}
            >${this._renderBadge()}</sgds-tooltip
          >`
                : this._renderBadge()
            : nothing;
    }
}
SgdsBadge.styles = [...SgdsElement.styles, css_248z];
/**@internal */
SgdsBadge.dependencies = {
    "sgds-close-button": SgdsCloseButton,
    "sgds-tooltip": SgdsTooltip
};
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "show", void 0);
__decorate([
    property({ reflect: true })
], SgdsBadge.prototype, "variant", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "outlined", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "dismissible", void 0);
__decorate([
    property({ type: Boolean, reflect: true })
], SgdsBadge.prototype, "fullWidth", void 0);
__decorate([
    state()
], SgdsBadge.prototype, "truncated", void 0);
__decorate([
    state()
], SgdsBadge.prototype, "text", void 0);
__decorate([
    watch("show")
], SgdsBadge.prototype, "_handleShowChange", null);
__decorate([
    watch("text")
], SgdsBadge.prototype, "_handleTruncation", null);

export { SgdsBadge, SgdsBadge as default };
//# sourceMappingURL=sgds-badge.js.map
