import { LitElement, css, html, unsafeCSS } from "lit";
import { property } from "lit/decorators.js";
import styles from "./styles.css?inline";

export class NavigationTooltip extends LitElement {
  @property({ type: String }) text = "";
  @property({ type: Number }) itemAbsoluteY = 0;

  static styles = css`
    ${unsafeCSS(styles)}
  `;

  render() {
    const itemHeight = 51;
    const centerY = this.itemAbsoluteY + itemHeight / 2 - 5;

    return html`
      <div class="tooltip-overlay">
        <div class="navigation-tooltip" style="left: 88px; top: ${centerY}px">
          <dss-icon icon="info" size="md"></dss-icon>
          ${this.text}
          <div class="arrow"></div>
        </div>
      </div>
    `;
  }
}

customElements.define("navigation-tooltip", NavigationTooltip);

export const renderNavigationTooltip = (text: string, itemAbsoluteY: number) => {
  // Remove existing tooltip if any
  const existing = document.querySelector("navigation-tooltip");
  if (existing) {
    existing.remove();
  }

  // Create new tooltip
  const tooltip = document.createElement("navigation-tooltip") as NavigationTooltip;
  tooltip.text = text;
  tooltip.itemAbsoluteY = itemAbsoluteY;
  document.body.appendChild(tooltip);

  // Auto-remove after 3 seconds
  setTimeout(() => {
    if (tooltip && document.body.contains(tooltip)) {
      tooltip.remove();
    }
  }, 2500);
};
