'use strict';

Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });

const lit = require('lit');
const decorators_js = require('lit/decorators.js');
const litHtml = require('lit-html');
const tailwindVariants = require('tailwind-variants');
const web3Utils = require('web3-utils');
const viem = require('viem');
const safeCustomElement = require('../../shared/safe-custom-element.cjs');
const sliceAddress = require('../../shared/tools/slice-address.cjs');
const index = require('../../shared/tailwind-element/index.cjs');
require('../../shared/directives/custom-class-map/index.cjs');
const index$1 = require('../../shared/directives/custom-style-map/index.cjs');
require('tinycolor2');
require('../../shared/assets/index.cjs');
const cn = require('../../shared/tools/cn.cjs');
const style = require('./style.css.cjs');

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;
};
exports.LuksoUsername = class LuksoUsername extends index.TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    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 = tailwindVariants.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 || !viem.isAddress(address)) {
      return address;
    }
    try {
      return web3Utils.toChecksumAddress(address);
    } catch (error) {
      console.warn(error);
      return address;
    }
  }
  addressBytesTemplate(styles) {
    const address = this.transformAddress(this.address);
    return lit.html`<div
      class=${styles}
      style=${index$1.customStyleMap({
      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
    })}
    >
      #${address.slice(2, 6)}
    </div>`;
  }
  nameTemplate(styles) {
    const name = this.transformName(this.name);
    return lit.html`<div
      class=${styles}
      style=${index$1.customStyleMap({
      [`color: var(--${this.nameColor})`]: this.nameColor !== ""
    })}
    >
      ${this.hidePrefix ? litHtml.nothing : this.prefix}${name}
    </div>`;
  }
  addressTemplate(styles) {
    const address = this.transformAddress(this.address);
    return lit.html`<div
      class=${styles}
      style=${index$1.customStyleMap({
      [`color: var(--${this.addressColor})`]: this.addressColor !== ""
    })}
    >
      ${sliceAddress.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 lit.html`${this.nameTemplate(name())}${this.addressBytesTemplate(
          bytes()
        )}`;
      }
      if (this.name) {
        return this.nameTemplate(name());
      }
      if (this.address) {
        return this.addressTemplate(address());
      }
    })();
    return lit.html`<div part="wrapper" class=${cn.cn(wrapper(), this.customClass)}>
      ${template}
    </div>`;
  }
};
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoUsername.prototype, "name", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoUsername.prototype, "address", 2);
__decorateClass([
  decorators_js.property({ type: "string" })
], exports.LuksoUsername.prototype, "size", 2);
__decorateClass([
  decorators_js.property({ type: Number, attribute: "slice-by" })
], exports.LuksoUsername.prototype, "sliceBy", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "address-color" })
], exports.LuksoUsername.prototype, "addressColor", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "name-color" })
], exports.LuksoUsername.prototype, "nameColor", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "custom-class" })
], exports.LuksoUsername.prototype, "customClass", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "hide-prefix" })
], exports.LuksoUsername.prototype, "hidePrefix", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoUsername.prototype, "prefix", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "no-transform" })
], exports.LuksoUsername.prototype, "noTransform", 2);
exports.LuksoUsername = __decorateClass([
  safeCustomElement.safeCustomElement("lukso-username")
], exports.LuksoUsername);
