'use strict';

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

const lit = require('lit');
const decorators_js = require('lit/decorators.js');
const makeBlockie = require('ethereum-blockies-base64');
const tailwindVariants = require('tailwind-variants');
const index = require('../../chunks/index-BBPgtFEP.js');
require('../lukso-image/index.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.LuksoProfile = class LuksoProfile extends index.TailwindElement {
  constructor() {
    super(...arguments);
    this.profileUrl = "";
    this.profileAddress = "";
    this.hasIdenticon = false;
    this.size = "large";
    this.isSquare = false;
    this.placeholder = "/assets/images/profile-default.svg";
    this.profileStyles = tailwindVariants.tv({
      slots: {
        wrapper: "outline outline-2 outline-neutral-100 relative",
        profile: "overflow-hidden",
        identicon: "absolute shadow-shadow-1xl rounded-full outline outline-neutral-100 right-0 bottom-0"
      },
      variants: {
        isSquare: {
          false: {
            wrapper: "rounded-full",
            profile: "rounded-full"
          }
        },
        size: {
          "2x-small": {
            wrapper: "w-4 h-4",
            profile: "w-4 h-4",
            identicon: "w-2 h-2 outline-1"
          },
          "x-small": {
            wrapper: "w-6 h-6",
            profile: "w-6 h-6",
            identicon: "w-3 h-3 outline-1"
          },
          small: {
            wrapper: "w-10 h-10",
            profile: "w-10 h-10",
            identicon: "w-4 h-4 outline-2"
          },
          medium: {
            wrapper: "w-14 h-14",
            profile: "w-14 h-14",
            identicon: "w-5 h-5 outline-2"
          },
          large: {
            wrapper: "w-20 h-20",
            profile: "w-20 h-20",
            identicon: "w-6 h-6 outline-2"
          },
          "x-large": {
            wrapper: "w-24 h-24",
            profile: "w-24 h-24",
            identicon: "w-7 h-7 outline-2"
          },
          "2x-large": {
            wrapper: "w-30 h-30",
            profile: "w-30 h-30",
            identicon: "w-9 h-9 outline-[2.5px]"
          }
        }
      },
      compoundVariants: [
        {
          isSquare: true,
          size: ["2x-small", "x-small"],
          class: {
            wrapper: "rounded-[2px]",
            profile: "rounded-[2px]"
          }
        },
        {
          isSquare: true,
          size: "small",
          class: {
            wrapper: "rounded-4",
            profile: "rounded-4"
          }
        },
        {
          isSquare: true,
          size: "medium",
          class: {
            wrapper: "rounded-8",
            profile: "rounded-8"
          }
        },
        {
          isSquare: true,
          size: "large",
          class: {
            wrapper: "rounded-[10px]",
            profile: "rounded-[10px]"
          }
        },
        {
          isSquare: true,
          size: ["2x-large", "x-large"],
          class: {
            wrapper: "rounded-12",
            profile: "rounded-12"
          }
        }
      ]
    });
  }
  identicon() {
    return this.hasIdenticon && this.profileAddress ? makeBlockie(this.profileAddress) : "";
  }
  render() {
    const { wrapper, profile, identicon } = this.profileStyles({
      size: this.size,
      isSquare: this.isSquare
    });
    return lit.html`
      <div data-testid="profile" class=${wrapper()}>
        <div class=${profile()}>
          <lukso-image
            src=${this.profileUrl}
            placeholder=${this.placeholder}
          ></lukso-image>
        </div>
        ${this.identicon() ? lit.html`<img src=${this.identicon()} class=${identicon()} alt="" />` : ""}
      </div>
    `;
  }
};
__decorateClass([
  decorators_js.property({ type: String, attribute: "profile-url", reflect: true })
], exports.LuksoProfile.prototype, "profileUrl", 2);
__decorateClass([
  decorators_js.property({ type: String, attribute: "profile-address", reflect: true })
], exports.LuksoProfile.prototype, "profileAddress", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "has-identicon", reflect: true })
], exports.LuksoProfile.prototype, "hasIdenticon", 2);
__decorateClass([
  decorators_js.property({ type: String, reflect: true })
], exports.LuksoProfile.prototype, "size", 2);
__decorateClass([
  decorators_js.property({ type: Boolean, attribute: "is-square" })
], exports.LuksoProfile.prototype, "isSquare", 2);
__decorateClass([
  decorators_js.property({ type: String })
], exports.LuksoProfile.prototype, "placeholder", 2);
exports.LuksoProfile = __decorateClass([
  index.safeCustomElement("lukso-profile")
], exports.LuksoProfile);
