import { html } from 'lit';
import { property } from 'lit/decorators.js';
import { nothing } from 'lit-html';
import { tv } from 'tailwind-variants';
import { toChecksumAddress } from 'web3-utils';
import { isAddress } from 'viem';
import { a as TailwindStyledElement, s as safeCustomElement } from './index-DluTRl1F.js';
import { a as customStyleMap } from './index-BSaCYACP.js';
import '../tailwind-config.js';
import './index-CSnDkMHN.js';
import { c as cn } from './cn-Df_5FiGi.js';
import 'axe-core';

const sliceAddress = (address, startSliceBy = 6, endSliceBy) => {
  if (!address || typeof address !== "string") {
    return "";
  }
  let sliceAddress2 = "";
  const effectiveEndSliceBy = endSliceBy || startSliceBy;
  if (address.length < startSliceBy + effectiveEndSliceBy) {
    return address;
  }
  sliceAddress2 = address.length > startSliceBy + 2 ? `${address.slice(0, startSliceBy + 2)}...${address.slice(
    -effectiveEndSliceBy
  )}` : address;
  return sliceAddress2;
};

const style = ":host {\n    display: inline-flex\n}";

var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __decorateClass = (decorators, target, key, kind) => {
  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
  for (var i = decorators.length - 1, decorator; i >= 0; i--)
    if (decorator = decorators[i])
      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
  if (kind && result) __defProp(target, key, result);
  return result;
};
let LuksoUsername = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.name = "";
    this.address = "";
    this.maxWidth = 200;
    this.size = "large";
    this.sliceBy = 8;
    this.addressColor = "";
    this.nameColor = "";
    this.customClass = "";
    this.hidePrefix = false;
    this.prefix = "@";
    this.noTransform = false;
    /** Width of the first 4 bytes of the address */
    this.bytesWidth = 52;
    this.styles = tv({
      slots: {
        wrapper: "inline-flex",
        name: "inline-block whitespace-nowrap overflow-hidden text-ellipsis",
        address: "inline-block",
        bytes: "inline-block"
      },
      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({
      [`max-width: ${this.maxWidth - (this.address ? this.bytesWidth : 0)}px`]: true,
      [`color: var(--${this.nameColor})`]: this.nameColor !== ""
    })}
    >
      ${this.hidePrefix ? nothing : 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 class=${cn(wrapper(), this.customClass)}>${template}</div>`;
  }
};
__decorateClass([
  property({ type: String })
], LuksoUsername.prototype, "name", 2);
__decorateClass([
  property({ type: String })
], LuksoUsername.prototype, "address", 2);
__decorateClass([
  property({ type: Number, attribute: "max-width" })
], LuksoUsername.prototype, "maxWidth", 2);
__decorateClass([
  property({ type: "string" })
], LuksoUsername.prototype, "size", 2);
__decorateClass([
  property({ type: Number, attribute: "slice-by" })
], LuksoUsername.prototype, "sliceBy", 2);
__decorateClass([
  property({ type: String, attribute: "address-color" })
], LuksoUsername.prototype, "addressColor", 2);
__decorateClass([
  property({ type: String, attribute: "name-color" })
], LuksoUsername.prototype, "nameColor", 2);
__decorateClass([
  property({ type: String, attribute: "custom-class" })
], LuksoUsername.prototype, "customClass", 2);
__decorateClass([
  property({ type: Boolean, attribute: "hide-prefix" })
], LuksoUsername.prototype, "hidePrefix", 2);
__decorateClass([
  property({ type: String })
], LuksoUsername.prototype, "prefix", 2);
__decorateClass([
  property({ type: Boolean, attribute: "no-transform" })
], LuksoUsername.prototype, "noTransform", 2);
LuksoUsername = __decorateClass([
  safeCustomElement("lukso-username")
], LuksoUsername);

export { LuksoUsername as L, sliceAddress as s };
