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 { sliceAddress } from "../../shared/tools/slice-address.js";
import { cn } from "../../shared/tools/cn.js";
import "../../shared/tools/index.js";
import { customStyleMap } from "../../shared/directives/custom-style-map/index.js";
import "../../shared/directives/index.js";
import style_default from "./style.css?inline.js";
import { html } from "lit";
import { property } from "lit/decorators.js";
import { tv } from "tailwind-variants";
import { isAddress } from "viem";
import { nothing as nothing$1 } from "lit-html";
import { toChecksumAddress } from "web3-utils";
//#region src/components/lukso-username/index.ts
var LuksoUsername = class LuksoUsername extends TailwindStyledElement(style_default) {
	constructor(..._args) {
		super(..._args);
		this.name = "";
		this.address = "";
		this.size = "large";
		this.sliceBy = 8;
		this.addressColor = "";
		this.nameColor = "";
		this.customClass = "";
		this.hidePrefix = false;
		this.prefix = "@";
		this.noTransform = false;
		this.styles = tv({
			slots: {
				wrapper: "inline-flex w-full min-w-0",
				name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis shrink min-w-0",
				address: "inline-block shrink-0",
				bytes: "inline-block shrink-0"
			},
			variants: {
				size: {
					"2x-small": { wrapper: "paragraph-ptmono-10-bold" },
					"x-small": { wrapper: "paragraph-ptmono-10-bold" },
					small: { wrapper: "paragraph-ptmono-12-bold" },
					medium: { wrapper: "paragraph-ptmono-14-bold" },
					large: { wrapper: "paragraph-ptmono-16-bold" },
					"x-large": { wrapper: "paragraph-ptmono-24-bold" },
					"2x-large": { wrapper: "paragraph-ptmono-24-bold" }
				},
				hasNameColor: { false: { name: "text-transparent bg-clip-text bg-gradient-to-r from-gradient-1-start to-gradient-1-end" } },
				hasAddressColor: { false: {
					address: "text-neutral-20",
					bytes: "text-neutral-60"
				} }
			}
		});
	}
	transformName(name) {
		if (this.noTransform) return name;
		return name?.toLowerCase();
	}
	transformAddress(address) {
		if (this.noTransform || !isAddress(address)) return address;
		try {
			return toChecksumAddress(address);
		} catch (error) {
			console.warn(error);
			return address;
		}
	}
	addressBytesTemplate(styles) {
		const address = this.transformAddress(this.address);
		return html`<div
      class=${styles}
      style=${customStyleMap({ [`color: var(--${this.addressColor})`]: this.addressColor !== "" })}
    >
      #${address.slice(2, 6)}
    </div>`;
	}
	nameTemplate(styles) {
		const name = this.transformName(this.name);
		return html`<div
      class=${styles}
      style=${customStyleMap({ [`color: var(--${this.nameColor})`]: this.nameColor !== "" })}
    >
      ${this.hidePrefix ? nothing$1 : this.prefix}${name}
    </div>`;
	}
	addressTemplate(styles) {
		const address = this.transformAddress(this.address);
		return html`<div
      class=${styles}
      style=${customStyleMap({ [`color: var(--${this.addressColor})`]: this.addressColor !== "" })}
    >
      ${sliceAddress(address, this.sliceBy, this.sliceBy)}
    </div>`;
	}
	render() {
		const { wrapper, name, address, bytes } = this.styles({
			size: this.size,
			hasNameColor: this.nameColor !== "",
			hasAddressColor: this.addressColor !== ""
		});
		const template = (() => {
			if (this.name && this.address) return html`${this.nameTemplate(name())}${this.addressBytesTemplate(bytes())}`;
			if (this.name) return this.nameTemplate(name());
			if (this.address) return this.addressTemplate(address());
		})();
		return html`<div part="wrapper" class=${cn(wrapper(), this.customClass)}>
      ${template}
    </div>`;
	}
};
__decorate([property({ type: String })], LuksoUsername.prototype, "name", void 0);
__decorate([property({ type: String })], LuksoUsername.prototype, "address", void 0);
__decorate([property({ type: "string" })], LuksoUsername.prototype, "size", void 0);
__decorate([property({
	type: Number,
	attribute: "slice-by"
})], LuksoUsername.prototype, "sliceBy", void 0);
__decorate([property({
	type: String,
	attribute: "address-color"
})], LuksoUsername.prototype, "addressColor", void 0);
__decorate([property({
	type: String,
	attribute: "name-color"
})], LuksoUsername.prototype, "nameColor", void 0);
__decorate([property({
	type: String,
	attribute: "custom-class"
})], LuksoUsername.prototype, "customClass", void 0);
__decorate([property({
	type: Boolean,
	attribute: "hide-prefix"
})], LuksoUsername.prototype, "hidePrefix", void 0);
__decorate([property({ type: String })], LuksoUsername.prototype, "prefix", void 0);
__decorate([property({
	type: Boolean,
	attribute: "no-transform"
})], LuksoUsername.prototype, "noTransform", void 0);
LuksoUsername = __decorate([safeCustomElement("lukso-username")], LuksoUsername);
//#endregion
export { LuksoUsername };
