import { T as TailwindStyledElement, x } from '../../index-b654b619.js';
import { n, e } from '../../query-assigned-elements-5d94572f.js';
import { o } from '../../style-map-36288ffe.js';
import { s as se } from '../../index-c55a1069.js';
import '../lukso-profile/index.js';
import '../../tailwind-config.js';
import { c as cn } from '../../cn-616567d4.js';
import { c as customStyleMap } from '../../index-614947b0.js';
import '../../directive-2bb7789e.js';
import '../../index-5e194caf.js';

const style = ":host {\n  display: inline-flex;\n  width: 100%;\n}\n\n:host([width]) {\n  width: inherit;\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 LuksoCard = class extends TailwindStyledElement(style) {
  constructor() {
    super(...arguments);
    this.variant = "basic";
    this.backgroundUrl = "";
    this.profileUrl = "";
    this.profileAddress = "";
    this.width = void 0;
    this.height = void 0;
    this.customClass = "";
    this.headerClass = "";
    this.size = "medium";
    this.shadow = "large";
    this.isHoverable = false;
    this.mediumStyles = `rounded-24 shadow-neutral-drop-shadow-2xl`;
    this.smallStyles = `rounded-12 shadow-neutral-drop-shadow`;
    this.smallHoverStyles = `hover:shadow-neutral-drop-shadow-1xl cursor-pointer transition`;
    this.cardStyles = se({
      base: `bg-neutral-100`,
      variants: {
        size: {
          small: `rounded-12`,
          medium: `rounded-24`
        },
        shadow: {
          small: `shadow-neutral-drop-shadow`,
          medium: `shadow-neutral-drop-shadow-1xl`,
          large: `shadow-neutral-drop-shadow-2xl`
        },
        isHoverable: {
          true: `cursor-pointer transition`
        },
        hasNoWidth: {
          true: `w-full`
        }
      },
      compoundVariants: [
        {
          shadow: "small",
          isHoverable: true,
          class: `hover:shadow-neutral-drop-shadow-1xl`
        },
        {
          shadow: "medium",
          isHoverable: true,
          class: `hover:shadow-neutral-drop-shadow-2xl`
        },
        {
          shadow: "large",
          isHoverable: true,
          class: `hover:shadow-neutral-drop-shadow-3xl`
        }
      ]
    });
  }
  backgroundImageOrGradient() {
    if (this.backgroundUrl) {
      return `url(${this.backgroundUrl})`;
    }
    let gradientStart = "#24354210";
    let gradientEnd = "#24354220";
    const opacity = "80";
    if (this.profileAddress) {
      gradientStart = `#${this.profileAddress.slice(2, 8)}${opacity}`;
      gradientEnd = `#${this.profileAddress.slice(36, 42)}${opacity}`;
    }
    return `linear-gradient(90deg, ${gradientStart}, ${gradientEnd})`;
  }
  basicTemplate() {
    const cardStyles = this.cardStyles({
      size: this.size,
      shadow: this.shadow,
      isHoverable: this.isHoverable,
      hasNoWidth: !this.width
    });
    return x`
      <div
        data-testid="card"
        style=${customStyleMap({
      [`min-height: ${this.height}px`]: !!this.height,
      [`width: ${this.width}px`]: !!this.width
    })}
        class=${cn(cardStyles, this.customClass)}
      >
        <slot name="content"></slot>
      </div>
    `;
  }
  withHeaderTemplate() {
    const cardStyles = this.cardStyles({
      size: this.size,
      shadow: this.shadow,
      isHoverable: this.isHoverable,
      hasNoWidth: !this.width,
      class: `grid grid-rows-[auto,1fr] overflow-hidden`
    });
    return x`
      <div
        data-testid="card"
        style=${o({
      minHeight: `${this.height}px`,
      width: `${this.width}px`
    })}
        class=${cn(cardStyles, this.customClass)}
      >
        <div class=${this.headerClass}>
          <slot name="header"></slot>
        </div>
        <div class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-24">
          <slot name="content"></slot>
        </div>
      </div>
    `;
  }
  profileTemplate() {
    const cardStyles = this.cardStyles({
      size: this.size,
      shadow: this.shadow,
      isHoverable: this.isHoverable,
      hasNoWidth: !this.width,
      class: `grid grid-rows-[1fr,auto]`
    });
    return x`
      <div
        data-testid="card"
        style=${customStyleMap({
      [`min-height: ${this.height}px`]: !!this.height,
      [`width: ${this.width}px`]: !!this.width
    })}
        class=${cn(cardStyles, this.customClass)}
      >
        <div
          style=${o({
      backgroundImage: this.backgroundImageOrGradient()
    })}
          class=${cn(
      "min-h-[92px] -mb-6 w-full bg-center bg-cover rounded-[24px_24px_0_0] relative",
      this.headerClass
    )}
        >
          ${this.backgroundUrl && x` <div
            class="h-full full rounded-[24px_24px_0_0] bg-neutral-20/10 absolute"
          ></div>`}
          <div>
            <slot name="header"></slot>
          </div>
        </div>

        <div
          style=${customStyleMap({
      [`width: ${this.width}px`]: !!this.width
    })}
          class="bg-neutral-100 rounded-24 relative break-normal"
        >
          <lukso-profile
            profile-url=${this.profileUrl}
            size="large"
            profile-address=${this.profileAddress}
            has-identicon
            class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
          ></lukso-profile>
          <div
            class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-3"
          >
            <div
              class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
            ></div>
          </div>
          <slot name="content"></slot>
        </div>
      </div>
    `;
  }
  profile2Template() {
    const cardStyles = this.cardStyles({
      size: this.size,
      shadow: this.shadow,
      isHoverable: this.isHoverable,
      hasNoWidth: !this.width,
      class: `grid grid-rows-[auto,1fr]`
    });
    return x`
      <div
        data-testid="card"
        style=${customStyleMap({
      [`min-height: ${this.height}px`]: !!this.height,
      [`width: ${this.width}px`]: !!this.width
    })}
        class=${cn(cardStyles, this.customClass)}
      >
        <div
          style=${o({
      backgroundImage: this.backgroundImageOrGradient()
    })}
          class=${cn(
      "min-h-[129px] -mb-6 bg-center bg-cover rounded-[24px_24px_0_0] relative bg-neutral-100",
      this.headerClass
    )}
        >
          ${this.backgroundUrl && x`<div
            class="min-h-full min-w-full rounded-[24px_24px_0_0] bg-neutral-10/10 absolute"
          ></div>`}
          <div>
            <slot name="header"></slot>
          </div>
        </div>
        <div class="grid grid-rows-[max-content,auto]">
          <div class="bg-neutral-100 relative">
            <lukso-profile
              profile-url=${this.profileUrl}
              size="large"
              profile-address=${this.profileAddress}
              has-identicon
              class="absolute -top-[40px] left-[calc(50%_-_40px)] z-10"
            ></lukso-profile>
            <div
              class="overflow-hidden w-[153px] h-[70px] -top-[70px] relative mx-auto flex items-end justify-center -mb-2"
            >
              <div
                class="bg-neutral-100 rounded-[103px_103px_0_0] w-[96px] h-[48px]"
              ></div>
            </div>
            <slot name="content"></slot>
          </div>
          <div
            class="bg-neutral-97 rounded-b-24 shadow-neutral-inner-shadow-top"
          >
            <slot name="bottom"></slot>
          </div>
        </div>
      </div>
    `;
  }
  heroTemplate() {
    const cardStyles = this.cardStyles({
      size: this.size,
      shadow: this.shadow,
      isHoverable: this.isHoverable,
      hasNoWidth: !this.width,
      class: `h-[240px] flex`
    });
    return x`
      <div
        data-testid="card"
        style=${customStyleMap({
      [`min-height: ${this.height}px`]: !!this.height,
      [`width: ${this.width}px`]: !!this.width
    })}
        class=${cn(cardStyles, this.customClass)}
      >
        <div
          style=${o({
      backgroundImage: `url(${this.backgroundUrl})`
    })}
          class="h-full w-full -mb-6 bg-center bg-cover rounded-24 relative"
        >
          ${this.backgroundUrl && x`<div
            class="h-full w-full rounded-24 bg-neutral-20/10 absolute"
          ></div>`}
          <div
            class="h-full w-full flex flex-col items-center justify-center  absolute"
          >
            <slot name="content"></slot>
          </div>
        </div>
      </div>
    `;
  }
  dappTemplate() {
    const cardStyles = this.cardStyles({
      size: this.size,
      shadow: this.shadow,
      isHoverable: this.isHoverable,
      hasNoWidth: !this.width,
      class: `grid grid-rows-[auto,1fr]`
    });
    return x`
      <div
        data-testid="card"
        style=${customStyleMap({
      [`min-height: ${this.height}px`]: !!this.height,
      [`width: ${this.width}px`]: !!this.width
    })}
        class=${cn(cardStyles, this.customClass)}
      >
        <div
          style=${o({
      backgroundImage: this.backgroundImageOrGradient()
    })}
          class=${cn(
      "min-h-[240px] bg-center bg-cover rounded-[24px_24px_0_0] relative",
      this.headerClass
    )}
        >
          <div>
            <slot name="header"></slot>
          </div>
        </div>
        <div
          class="bg-neutral-100 shadow-neutral-above-shadow-1xl rounded-[0_0_24px_24px] relative"
        >
          <slot name="content"></slot>
        </div>
      </div>
    `;
  }
  render() {
    switch (this.variant) {
      case "with-header":
        return this.withHeaderTemplate();
      case "profile":
        return this.profileTemplate();
      case "profile-2":
        return this.profile2Template();
      case "hero":
        return this.heroTemplate();
      case "dapp":
        return this.dappTemplate();
      default:
        return this.basicTemplate();
    }
  }
};
__decorateClass([
  n({ type: String })
], LuksoCard.prototype, "variant", 2);
__decorateClass([
  n({ type: String, attribute: "background-url" })
], LuksoCard.prototype, "backgroundUrl", 2);
__decorateClass([
  n({ type: String, attribute: "profile-url" })
], LuksoCard.prototype, "profileUrl", 2);
__decorateClass([
  n({ type: String, attribute: "profile-address" })
], LuksoCard.prototype, "profileAddress", 2);
__decorateClass([
  n({ type: Number })
], LuksoCard.prototype, "width", 2);
__decorateClass([
  n({ type: Number })
], LuksoCard.prototype, "height", 2);
__decorateClass([
  n({ type: String, attribute: "custom-class" })
], LuksoCard.prototype, "customClass", 2);
__decorateClass([
  n({ type: String, attribute: "header-class" })
], LuksoCard.prototype, "headerClass", 2);
__decorateClass([
  n({ type: String })
], LuksoCard.prototype, "size", 2);
__decorateClass([
  n({ type: String })
], LuksoCard.prototype, "shadow", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-hoverable" })
], LuksoCard.prototype, "isHoverable", 2);
LuksoCard = __decorateClass([
  e("lukso-card")
], LuksoCard);

export { LuksoCard };
