import { html } from 'lit';
import { property, state } from 'lit/decorators.js';
import tippy from 'tippy.js';
import { tv } from 'tailwind-variants';
import { a as TailwindStyledElement, s as safeCustomElement } from '../../chunks/index-DluTRl1F.js';
import '../../chunks/index-CA_aKopU.js';

const style = ":host {\n    display: flex\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let LuksoTooltip = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.variant = "light";
    this.size = "medium";
    this.placement = "top";
    this.trigger = "mouseenter";
    this.text = "";
    this.maxWidth = 300;
    this.show = false;
    this.hideOnClick = "true";
    this.isClipboardCopy = false;
    this.copyText = "";
    this.copyValue = "";
    this.offset = 10;
    this.showArrow = true;
    this.showDelay = 300;
    this.hideDelay = 300;
    this.showCopy = false;
    this.tooltipInstance = void 0;
    this.styles = tv({
      slots: {
        tooltip: "hidden",
        trigger: "cursor-pointer flex flex-col items-center"
      },
      variants: {
        hasNoText: {
          true: {
            trigger: "cursor-default"
          }
        }
      }
    });
    this.handleSlotChange = () => {
      const textSlot = this.shadowRoot?.querySelector(
        'slot[name="text"]'
      );
      if (textSlot) {
        setTimeout(() => {
          const assignedNodes = textSlot.assignedNodes({ flatten: true });
          const html2 = assignedNodes.map((node) => {
            if (node.nodeType === Node.ELEMENT_NODE) {
              return node.innerHTML;
            }
            if (node.nodeType === Node.TEXT_NODE) {
              return node.textContent?.trim() || "";
            }
            return "";
          }).filter(Boolean).join("").replace(/<!--\?lit\$.*?\$-->/g, "");
          const decoded = this.decodeHtmlEntities(html2);
          if (decoded && `<div>${decoded}</div>` !== this.text) {
            this.text = `<div>${decoded}</div>`;
            this.initTooltip();
          }
        }, 0);
      }
    };
  }
  hideOnClickCheck() {
    if (this.hideOnClick === "toggle") {
      return this.hideOnClick;
    }
    if (this.hideOnClick === "true") {
      return true;
    }
    if (this.hideOnClick === "false") {
      return false;
    }
  }
  initTooltip() {
    const trigger = this.shadowRoot.getElementById("trigger");
    const tooltip = this.shadowRoot.getElementById("tooltip");
    if (this.tooltipInstance) {
      this.tooltipInstance?.destroy();
      this.tooltipInstance = void 0;
    }
    if (!this.text) {
      return;
    }
    this.tooltipInstance = tippy(trigger, {
      content: tooltip.innerHTML,
      allowHTML: true,
      arrow: this.showArrow,
      animation: "fade",
      interactive: true,
      appendTo: () => document.body,
      trigger: this.trigger,
      placement: this.placement,
      maxWidth: this.maxWidth,
      theme: `${this.variant}-${this.size}`,
      offset: [0, this.offset],
      hideOnClick: this.hideOnClickCheck(),
      delay: [this.showDelay, this.hideDelay],
      aria: {
        content: null,
        expanded: false
      }
    });
  }
  handleClick() {
    if (!this.isClipboardCopy || !this.copyText || !this.copyValue) {
      return;
    }
    this.showCopy = true;
    navigator.clipboard.writeText(this.copyValue);
    setTimeout(() => {
      this.showCopy = false;
    }, 1e3);
  }
  async willUpdate(changedProperties) {
    await this.updateComplete;
    if (changedProperties.has("show") && this.trigger === "manual") {
      if (this.show) {
        !this.tooltipInstance && this.initTooltip();
        this.tooltipInstance?.show();
      } else {
        this.tooltipInstance?.hide();
      }
      return;
    }
    if (changedProperties.has("text")) {
      if (this.text !== "") {
        this.initTooltip();
      } else {
        this.tooltipInstance?.destroy();
        this.tooltipInstance = void 0;
      }
    }
  }
  connectedCallback() {
    super.connectedCallback();
    setTimeout(() => {
      const textSlot = this.shadowRoot?.querySelector(
        'slot[name="text"]'
      );
      if (textSlot) {
        textSlot.addEventListener("slotchange", this.handleSlotChange);
        this.handleSlotChange();
      }
    }, 0);
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.tooltipInstance?.destroy();
    const textSlot = this.shadowRoot?.querySelector(
      'slot[name="text"]'
    );
    if (textSlot) {
      textSlot.removeEventListener("slotchange", this.handleSlotChange);
    }
  }
  decodeHtmlEntities(str) {
    const txt = document.createElement("textarea");
    txt.innerHTML = str;
    return txt.value;
  }
  render() {
    const styles = this.styles({
      hasNoText: !this.text
    });
    return html`
      <div id="tooltip" role="tooltip" class=${styles.tooltip()}>
        ${html`<lukso-sanitize html-content=${this.text}></lukso-sanitize>`}
      </div>
      <slot name="text" class="hidden"></slot>
      ${this.isClipboardCopy ? html`<lukso-tooltip
            variant=${this.variant}
            size=${this.size}
            placement=${this.placement}
            max-width=${this.maxWidth}
            offset=${this.offset}
            trigger="manual"
            ?show=${this.showCopy ? true : void 0}
            text=${this.copyText}
          >
            <div
              id="trigger"
              class=${styles.trigger()}
              @click=${this.handleClick}
            >
              <slot></slot>
            </div>
          </lukso-tooltip>` : html`<div
            id="trigger"
            class=${styles.trigger()}
            @click=${this.handleClick}
          >
            <slot></slot>
          </div>`}
    `;
  }
};
__decorateClass([
  property({ type: String })
], LuksoTooltip.prototype, "variant", 2);
__decorateClass([
  property({ type: String })
], LuksoTooltip.prototype, "size", 2);
__decorateClass([
  property({ type: String })
], LuksoTooltip.prototype, "placement", 2);
__decorateClass([
  property({ type: String })
], LuksoTooltip.prototype, "trigger", 2);
__decorateClass([
  property({ type: String })
], LuksoTooltip.prototype, "text", 2);
__decorateClass([
  property({ type: Number, attribute: "max-width" })
], LuksoTooltip.prototype, "maxWidth", 2);
__decorateClass([
  property({ type: Boolean })
], LuksoTooltip.prototype, "show", 2);
__decorateClass([
  property({ type: String, attribute: "hide-on-click" })
], LuksoTooltip.prototype, "hideOnClick", 2);
__decorateClass([
  property({ type: Boolean, attribute: "is-clipboard-copy" })
], LuksoTooltip.prototype, "isClipboardCopy", 2);
__decorateClass([
  property({ type: String, attribute: "copy-text" })
], LuksoTooltip.prototype, "copyText", 2);
__decorateClass([
  property({ type: String, attribute: "copy-value" })
], LuksoTooltip.prototype, "copyValue", 2);
__decorateClass([
  property({ type: Number })
], LuksoTooltip.prototype, "offset", 2);
__decorateClass([
  property({ type: Boolean, attribute: "show-arrow" })
], LuksoTooltip.prototype, "showArrow", 2);
__decorateClass([
  property({ type: Number, attribute: "show-delay" })
], LuksoTooltip.prototype, "showDelay", 2);
__decorateClass([
  property({ type: Number, attribute: "hide-delay" })
], LuksoTooltip.prototype, "hideDelay", 2);
__decorateClass([
  state()
], LuksoTooltip.prototype, "showCopy", 2);
LuksoTooltip = __decorateClass([
  safeCustomElement("lukso-tooltip")
], LuksoTooltip);

export { LuksoTooltip };
