import { safeCustomElement } from "../../shared/safe-custom-element.js";
import { TailwindStyledElement } from "../../shared/tailwind-element/index.js";
import { __decorate } from "../../_virtual/_@oxc-project_runtime@0.127.0/helpers/decorate.js";
import "../lukso-icon/index.js";
import { cn } from "../../shared/tools/cn.js";
import "../../shared/tools/index.js";
import "../lukso-profile/index.js";
import "../lukso-username/index.js";
import { debounceFunction } from "../../shared/tools/debounceFunction.js";
import { uniqId } from "../../shared/tools/uniq-id.js";
import style_default from "./style.css.js";
import { html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { tv } from "tailwind-variants";
//#region src/components/lukso-dropdown/index.ts
var LuksoDropdown = class LuksoDropdown extends TailwindStyledElement(style_default) {
	get _win() {
		return this.ownerDocument.defaultView ?? (typeof window !== "undefined" ? window : void 0);
	}
	constructor() {
		super();
		this.id = "";
		this.triggerId = "";
		this.isOpen = false;
		this.isOpenOnOutsideClick = false;
		this.position = "auto";
		this.isFullWidth = false;
		this.size = "large";
		this.trigger = "click";
		this.maxHeight = void 0;
		this.customClass = "";
		this._heightMeasured = false;
		this.styles = tv({
			slots: {
				wrapper: "absolute z-50",
				dropdown: `bg-neutral-100 border border-neutral-90 shadow-1xl
        flex flex-col gap-1 overflow-y-auto animate-fade-in animation-duration-200`
			},
			variants: {
				size: {
					small: { dropdown: "rounded-8 p-2 min-w-[120px] paragraph-inter-12-regular" },
					medium: { dropdown: "rounded-10 p-3 min-w-[200px] paragraph-inter-14-regular" },
					large: { dropdown: "rounded-12 p-3 min-w-[200px] paragraph-inter-14-regular" },
					"x-large": {}
				},
				isRight: { true: { wrapper: "right-0" } },
				isFullWidth: {
					true: {
						wrapper: "w-full",
						dropdown: "max-w-full w-full"
					},
					false: { dropdown: "w-max" }
				},
				hasMaxHeight: { true: {} }
			},
			compoundVariants: [
				{
					isFullWidth: false,
					size: "small",
					class: { dropdown: "max-w-[200px]" }
				},
				{
					isFullWidth: false,
					size: "large",
					class: { dropdown: "max-w-[350px]" }
				},
				{
					hasMaxHeight: false,
					size: "small",
					class: { dropdown: "max-h-52" }
				},
				{
					hasMaxHeight: false,
					size: "large",
					class: { dropdown: "max-h-64" }
				}
			]
		});
		this.handleMouseEnter = () => {
			this.isOpen = true;
		};
		this.handleMouseLeave = (event) => {
			const relatedTarget = event.relatedTarget;
			if (relatedTarget?.id === this.id || relatedTarget?.id === this.triggerId) return;
			this.isOpen = false;
		};
		this.handleClick = debounceFunction((event) => {
			const element = event.target;
			if (this.triggerId && this.triggerId.trim() !== "" && element.id === this.triggerId || this.id === element.id) {
				this.isOpen = !this.isOpen;
				return;
			}
			if (!this.isOpenOnOutsideClick) this.isOpen = false;
		});
		if (!this.id) this.id = uniqId();
	}
	_findScrollContainer(element, viewportHeight, viewportWidth) {
		let current = element.parentElement;
		while (current && current !== this.ownerDocument.body) {
			const { overflow, overflowX, overflowY } = getComputedStyle(current);
			if (/auto|scroll|hidden/.test(overflow) || /auto|scroll|hidden/.test(overflowX) || /auto|scroll|hidden/.test(overflowY)) {
				const containerRect = current.getBoundingClientRect();
				if (!(containerRect.height >= viewportHeight * .9 && containerRect.width >= viewportWidth * .9)) return current;
			}
			current = current.parentElement;
		}
		return null;
	}
	_resolveTriggerElement() {
		if (this.triggerId) return this.ownerDocument.getElementById(this.triggerId);
		return this.previousElementSibling ?? this.parentElement;
	}
	resolveDirection() {
		if (this.position === "auto") {
			const win = this._win;
			const triggerElement = this._resolveTriggerElement();
			if (triggerElement && win) {
				const rect = triggerElement.getBoundingClientRect();
				const scrollContainer = this._findScrollContainer(triggerElement, win.innerHeight, win.innerWidth);
				const boundary = scrollContainer ? scrollContainer.getBoundingClientRect() : {
					top: 0,
					bottom: win.innerHeight,
					left: 0,
					right: win.innerWidth
				};
				const spaceBelow = boundary.bottom - rect.bottom;
				const spaceAbove = rect.top - boundary.top;
				const dropdownHeight = this._dropdownHeight ?? (this.size === "small" ? 208 : 256);
				return {
					isRight: rect.left + rect.width / 2 > (boundary.left + boundary.right) / 2,
					openTop: spaceBelow < dropdownHeight && spaceAbove > spaceBelow
				};
			}
			return {
				isRight: false,
				openTop: false
			};
		}
		return {
			isRight: this.position === "bottom-right" || this.position === "top-right",
			openTop: this.position === "top-left" || this.position === "top-right"
		};
	}
	_addAutoListeners(win) {
		this.boundHandleResize = debounceFunction(() => {
			if (this.isOpen) this.requestUpdate();
		});
		win.addEventListener("resize", this.boundHandleResize, { passive: true });
		this.boundHandleScroll = () => {
			if (this.isOpen) {
				if (this._scrollRafId !== void 0) return;
				this._scrollRafId = win.requestAnimationFrame(() => {
					this._scrollRafId = void 0;
					this.requestUpdate();
				});
			}
		};
		win.addEventListener("scroll", this.boundHandleScroll, {
			capture: true,
			passive: true
		});
	}
	_removeAutoListeners(win) {
		if (this.boundHandleResize) {
			win.removeEventListener("resize", this.boundHandleResize);
			this.boundHandleResize = void 0;
		}
		if (this.boundHandleScroll) {
			win.removeEventListener("scroll", this.boundHandleScroll, { capture: true });
			this.boundHandleScroll = void 0;
		}
		if (this._scrollRafId !== void 0) {
			win.cancelAnimationFrame(this._scrollRafId);
			this._scrollRafId = void 0;
		}
	}
	updated(changedProperties) {
		super.updated(changedProperties);
		if (!this.isOpen && changedProperties.has("isOpen")) {
			this._dropdownHeight = void 0;
			this._heightMeasured = false;
		}
		if (this.isOpen && !this._heightMeasured) {
			const dropdownPanel = this.shadowRoot?.getElementById(this.id)?.querySelector("div");
			if (dropdownPanel) {
				const measuredHeight = dropdownPanel.getBoundingClientRect().height;
				if (measuredHeight > 0) {
					this._heightMeasured = true;
					if (measuredHeight !== this._dropdownHeight) {
						this._dropdownHeight = measuredHeight;
						this.requestUpdate();
					}
				}
			}
		}
		if (changedProperties.has("isOpen") && this.trigger === "hover") {
			const dropdownElement = this.shadowRoot?.getElementById(this.id);
			if (this.isOpen && dropdownElement) {
				dropdownElement.addEventListener("mouseenter", this.handleMouseEnter);
				dropdownElement.addEventListener("mouseleave", this.handleMouseLeave);
			} else if (dropdownElement) {
				dropdownElement.removeEventListener("mouseenter", this.handleMouseEnter);
				dropdownElement.removeEventListener("mouseleave", this.handleMouseLeave);
			}
		}
		if (changedProperties.has("position")) {
			const win = this._win;
			if (!win) return;
			const wasAuto = changedProperties.get("position") === "auto";
			const isAuto = this.position === "auto";
			if (wasAuto && !isAuto) this._removeAutoListeners(win);
			else if (!wasAuto && isAuto) this._addAutoListeners(win);
		}
	}
	connectedCallback() {
		super.connectedCallback();
		const win = this._win;
		if (!win) return;
		this.boundHandleClick = this.handleClick.bind(this);
		win.addEventListener("click", this.boundHandleClick);
		if (this.position === "auto") this._addAutoListeners(win);
		if (this.trigger === "hover") {
			const triggerElement = this.ownerDocument.getElementById(this.triggerId);
			if (triggerElement) {
				triggerElement.addEventListener("mouseenter", this.handleMouseEnter);
				triggerElement.addEventListener("mouseleave", this.handleMouseLeave);
			}
		}
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		const win = this._win;
		if (win) {
			if (this.boundHandleClick) win.removeEventListener("click", this.boundHandleClick);
			this._removeAutoListeners(win);
		}
		if (this.trigger === "hover") {
			const triggerElement = this.ownerDocument.getElementById(this.triggerId);
			if (triggerElement) {
				triggerElement.removeEventListener("mouseenter", this.handleMouseEnter);
				triggerElement.removeEventListener("mouseleave", this.handleMouseLeave);
			}
		}
	}
	async willUpdate(changedProperties) {
		if (changedProperties.has("isOpen") && changedProperties.get("isOpen") !== void 0) {
			await this.updateComplete;
			const changeEvent = new CustomEvent("on-change", {
				detail: { isOpen: this.isOpen },
				bubbles: false,
				composed: true
			});
			this.dispatchEvent(changeEvent);
		}
	}
	render() {
		const { isRight, openTop } = this.resolveDirection();
		const { wrapper, dropdown } = this.styles({
			size: this.size,
			isRight,
			isFullWidth: this.isFullWidth,
			hasMaxHeight: this.maxHeight !== void 0
		});
		if (!this.isOpen) return nothing;
		const gapPx = this.size === "small" ? 4 : 8;
		const triggerHeight = this._resolveTriggerElement()?.getBoundingClientRect().height ?? 0;
		const wrapperStyle = openTop ? `transform: translateY(calc(-100% - ${triggerHeight + gapPx}px));` : `margin-top: ${gapPx}px;`;
		return html`<div id=${this.id} class=${wrapper()} style=${wrapperStyle}>
      <div
        class=${cn(dropdown(), this.customClass)}
        style=${this.maxHeight ? `max-height: ${this.maxHeight}px;` : nothing}
      >
        <slot></slot>
      </div>
    </div>`;
	}
};
__decorate([property({ type: String })], LuksoDropdown.prototype, "id", void 0);
__decorate([property({
	type: String,
	attribute: "trigger-id"
})], LuksoDropdown.prototype, "triggerId", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-open",
	reflect: true
})], LuksoDropdown.prototype, "isOpen", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-open-on-outside-click"
})], LuksoDropdown.prototype, "isOpenOnOutsideClick", void 0);
__decorate([property({ type: String })], LuksoDropdown.prototype, "position", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-full-width"
})], LuksoDropdown.prototype, "isFullWidth", void 0);
__decorate([property({ type: String })], LuksoDropdown.prototype, "size", void 0);
__decorate([property({ type: String })], LuksoDropdown.prototype, "trigger", void 0);
__decorate([property({
	type: Number,
	attribute: "max-height",
	reflect: true
})], LuksoDropdown.prototype, "maxHeight", void 0);
__decorate([property({
	type: String,
	attribute: "custom-class"
})], LuksoDropdown.prototype, "customClass", void 0);
LuksoDropdown = __decorate([safeCustomElement("lukso-dropdown")], LuksoDropdown);
//#endregion
export { LuksoDropdown };
