import { __decorate, __metadata } from "tslib";
import { LitElement, css, html, nothing } from 'lit';
import { customElement, property, query, state } from 'lit/decorators.js';
import { isMobileDevice } from '@operato/utils';
let SmallTooltipElement = class SmallTooltipElement extends LitElement {
    constructor() {
        super(...arguments);
        this.content = '';
        this.open = false;
        this.alignLeft = false;
        this.stickLeft = false;
        this.flipUp = false;
        this.isMobile = false;
        this.mobileOffsetX = 0;
        this.idRef = Math.random().toString(36).slice(2);
        this.onDocumentPointerDown = (e) => {
            // 바깥 클릭 시 닫기
            if (!this.open)
                return;
            const path = e.composedPath();
            if (!path.includes(this))
                this.open = false;
        };
        this.onWindowResize = () => {
            this.isMobile = isMobileDevice();
            if (!this.open)
                return;
            this.measureSoon();
        };
        this.onOtherTooltipOpen = (e) => {
            if (e.detail?.id !== this.idRef)
                this.open = false;
        };
        this.onToggle = (e) => {
            e.stopPropagation();
            const willOpen = !this.open;
            if (willOpen) {
                window.dispatchEvent(new CustomEvent('small-tooltip:open', { detail: { id: this.idRef } }));
            }
            this.open = willOpen;
        };
    }
    static { this.styles = css `
    :host {
      position: relative;
      display: inline-block;
    }

    .iconBtn {
      width: 18px;
      height: 18px;
      border-radius: 9999px;
      border: 1px solid #d1d5db;
      color: #374151;
      background: #fff;
      cursor: pointer;
      font-size: 12px;
      line-height: 1;
      padding: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    .popover {
      position: absolute;
      z-index: 30;
      top: 0;
      left: calc(100% + 8px);
      transform: translateY(0);
      background: #ffffff;
      color: #111827;
      border: 1px solid #e5e7eb;
      border-radius: 8px;
      font-size: 13px;
      min-width: 200px;
      max-width: 420px;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    }

    .flipUp {
      top: auto;
      bottom: 0;
    }

    .alignLeft {
      left: auto;
      right: calc(100% + 8px);
    }

    .stickLeftViewport {
      left: 8px !important;
      right: auto !important;
    }

    .popoverContent {
      display: flex;
      width: max-content;
      padding: 10px 12px;
      line-height: 1.4;
      /*white-space: pre-wrap; */
      word-break: break-word;
      max-height: 260px;
      overflow: auto;
      font-weight: 500;
      text-align: left;
    }

    .popoverContent ul {
      list-style: disc;
      margin: 6px 0 0 0;
      padding-left: 16px;
    }
    .popoverContent li {
      margin: 2px 0;
    }
    .popoverContent strong {
      font-weight: 600;
    }

    .iconSvg {
      color: #2563eb;
      width: 14px;
      height: 14px;
    }

    :host a {
      color: #2563eb;
      text-decoration: none;
      cursor: pointer;
    }

    /* Mobile layout: place below the icon and keep within viewport */
    @media (max-width: 768px) {
      .popover.mobile {
        position: absolute;
        left: 0;
        right: auto;
        top: calc(100% + 8px);
        bottom: auto;
        max-width: min(92vw, 420px);
        min-width: 220px; /* prevent 1ch shrink-to-fit */
        width: fit-content; /* expand to content within max-width */
        transform: none; /* we control X offset via inline style */
      }

      .popover.mobile.flipUp {
        top: auto;
        bottom: calc(100% + 8px);
      }

      .popover.mobile .popoverContent {
        display: block;
        width: auto;
        max-height: min(50vh, 360px);
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
      }
    }
  `; }
    connectedCallback() {
        super.connectedCallback();
        this.isMobile = isMobileDevice();
        window.addEventListener('small-tooltip:open', this.onOtherTooltipOpen);
    }
    disconnectedCallback() {
        super.disconnectedCallback();
        window.removeEventListener('small-tooltip:open', this.onOtherTooltipOpen);
        this.detachGlobalListeners();
    }
    updated(changed) {
        if (changed.has('open')) {
            if (this.open) {
                this.attachGlobalListeners();
                this.measureSoon();
            }
            else {
                this.detachGlobalListeners();
            }
        }
    }
    attachGlobalListeners() {
        document.addEventListener('mousedown', this.onDocumentPointerDown, { capture: true });
        document.addEventListener('touchstart', this.onDocumentPointerDown, { capture: true });
        window.addEventListener('resize', this.onWindowResize);
    }
    detachGlobalListeners() {
        document.removeEventListener('mousedown', this.onDocumentPointerDown, true);
        document.removeEventListener('touchstart', this.onDocumentPointerDown, true);
        window.removeEventListener('resize', this.onWindowResize);
    }
    measureSoon() {
        this.alignLeft = false;
        this.stickLeft = false;
        this.flipUp = false;
        this.updateComplete.then(() => {
            requestAnimationFrame(() => this.measureAndAlign());
        });
    }
    measureAndAlign() {
        const el = this.popRef;
        if (!el)
            return;
        if (this.isMobile) {
            const hostRect = this.getBoundingClientRect();
            const rect = el.getBoundingClientRect();
            // Horizontal: clamp within viewport with 8px margin
            const initialLeftAbs = hostRect.left;
            const minLeft = 8;
            const maxLeft = Math.max(minLeft, window.innerWidth - rect.width - 8);
            const targetLeftAbs = Math.min(Math.max(initialLeftAbs, minLeft), maxLeft);
            this.mobileOffsetX = targetLeftAbs - hostRect.left;
            // Vertical: show below unless it overflows bottom, then flip up
            const belowTopAbs = hostRect.bottom + 8;
            const overflowBottom = belowTopAbs + rect.height > window.innerHeight - 8;
            this.flipUp = overflowBottom;
            return;
        }
        // Desktop: original alignment logic
        const rect = el.getBoundingClientRect();
        const overflowRight = rect.right > window.innerWidth - 8;
        const overflowBottom = rect.bottom > window.innerHeight - 8;
        this.flipUp = overflowBottom;
        if (!overflowRight)
            return;
        this.alignLeft = true;
        requestAnimationFrame(() => {
            const rect2 = el.getBoundingClientRect();
            if (rect2.left < 8)
                this.stickLeft = true;
        });
    }
    render() {
        const classes = ['popover'];
        if (this.isMobile)
            classes.push('mobile');
        if (this.flipUp)
            classes.push('flipUp');
        if (this.alignLeft)
            classes.push('alignLeft');
        if (this.stickLeft)
            classes.push('stickLeftViewport');
        return html `
      <div @mousedown=${(e) => e.stopPropagation()} @touchstart=${(e) => e.stopPropagation()}>
        <button type="button" class="iconBtn" @click=${this.onToggle} aria-label="도움말">
          <svg
            class="iconSvg"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            aria-hidden="true"
          >
            <circle cx="12" cy="12" r="10"></circle>
            <path d="M9.09 9a3 3 0 1 1 5.83 1c0 2-3 3-3 3"></path>
            <line x1="12" y1="17" x2="12.01" y2="17"></line>
          </svg>
        </button>
        ${this.open
            ? html `
              <div
                class=${classes.join(' ')}
                role="tooltip"
                style=${this.isMobile ? `left: ${this.mobileOffsetX}px;` : ''}
              >
                <div class="popoverContent" draggable="true">
                  <slot>${this.content}</slot>
                </div>
              </div>
            `
            : nothing}
      </div>
    `;
    }
};
__decorate([
    property({ type: String }),
    __metadata("design:type", String)
], SmallTooltipElement.prototype, "content", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], SmallTooltipElement.prototype, "open", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], SmallTooltipElement.prototype, "alignLeft", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], SmallTooltipElement.prototype, "stickLeft", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], SmallTooltipElement.prototype, "flipUp", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], SmallTooltipElement.prototype, "isMobile", void 0);
__decorate([
    state(),
    __metadata("design:type", Object)
], SmallTooltipElement.prototype, "mobileOffsetX", void 0);
__decorate([
    query('.popover'),
    __metadata("design:type", HTMLDivElement)
], SmallTooltipElement.prototype, "popRef", void 0);
SmallTooltipElement = __decorate([
    customElement('small-tooltip')
], SmallTooltipElement);
export { SmallTooltipElement };
//# sourceMappingURL=small-tooltip.js.map