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?inline.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) {
	constructor() {
		super();
		this.id = "";
		this.triggerId = "";
		this.isOpen = false;
		this.isOpenOnOutsideClick = false;
		this.openTop = false;
		this.isRight = false;
		this.isFullWidth = false;
		this.size = "large";
		this.trigger = "click";
		this.maxHeight = void 0;
		this.customClass = "";
		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: {
				openTop: { true: { wrapper: "mt-0" } },
				size: {
					small: { dropdown: "rounded-8 p-2 mt-1 min-w-[120px] paragraph-inter-12-regular" },
					medium: { dropdown: "rounded-10 p-3 mt-2 min-w-[200px] paragraph-inter-14-regular" },
					large: { dropdown: "rounded-12 p-3 mt-2 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]" }
				},
				{
					openTop: true,
					size: "small",
					class: { wrapper: "bottom-7 mb-1" }
				},
				{
					openTop: true,
					size: ["large"],
					class: { wrapper: "bottom-12 mb-2" }
				},
				{
					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();
	}
	updated(changedProperties) {
		super.updated(changedProperties);
		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);
			}
		}
	}
	connectedCallback() {
		super.connectedCallback();
		this.boundHandleClick = this.handleClick.bind(this);
		window.addEventListener("click", this.boundHandleClick);
		if (this.trigger === "hover") {
			const triggerElement = document.getElementById(this.triggerId);
			if (triggerElement) {
				triggerElement.addEventListener("mouseenter", this.handleMouseEnter);
				triggerElement.addEventListener("mouseleave", this.handleMouseLeave);
			}
		}
	}
	disconnectedCallback() {
		super.disconnectedCallback();
		if (this.boundHandleClick) window.removeEventListener("click", this.boundHandleClick);
		if (this.trigger === "hover") {
			const triggerElement = document.getElementById(this.triggerId);
			if (triggerElement) {
				triggerElement.removeEventListener("mouseenter", this.handleMouseEnter);
				triggerElement.removeEventListener("mouseleave", this.handleMouseLeave);
			}
		}
	}
	async willUpdate(changedProperties) {
		if (changedProperties.has("isOpen")) {
			await this.updateComplete;
			const changeEvent = new CustomEvent("on-change", {
				detail: { isOpen: this.isOpen },
				bubbles: false,
				composed: true
			});
			this.dispatchEvent(changeEvent);
		}
	}
	render() {
		const { wrapper, dropdown } = this.styles({
			openTop: this.openTop,
			size: this.size,
			isRight: this.isRight,
			isFullWidth: this.isFullWidth,
			hasMaxHeight: this.maxHeight !== void 0
		});
		if (!this.isOpen) return nothing;
		return html`<div id=${this.id} class=${wrapper()}>
      <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: Boolean,
	attribute: "open-top"
})], LuksoDropdown.prototype, "openTop", void 0);
__decorate([property({
	type: Boolean,
	attribute: "is-right"
})], LuksoDropdown.prototype, "isRight", 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 };
