import { m as makeBlockie } from '../../index-ff8d75cd.js';
import { T as TailwindStyledElement, x, E } from '../../index-92dc158d.js';
import { n, t } from '../../property-eaa52bd9.js';
import { r } from '../../state-1fc9a224.js';
import { o as o$1 } from '../../style-map-5aef4b6f.js';
import { c as ce } from '../../index-d14b6a34.js';
import '../../tailwind-config.js';
import { c as cn } from '../../cn-90c03edf.js';
import { c as customStyleMap } from '../../index-7bb28a79.js';
import '../lukso-image/index.js';
import '../../directive-2bb7789e.js';

/**
 * @license
 * Copyright 2017 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */
const e=(e,t,c)=>(c.configurable=!0,c.enumerable=!0,Reflect.decorate&&"object"!=typeof t&&Object.defineProperty(e,t,c),c);

/**
 * @license
 * Copyright 2021 Google LLC
 * SPDX-License-Identifier: BSD-3-Clause
 */function o(o){return (e$1,n)=>{const{slot:r,selector:s}=o??{},c="slot"+(r?`[name=${r}]`:":not([name])");return e(e$1,n,{get(){const t=this.renderRoot?.querySelector(c),e=t?.assignedElements(o)??[];return void 0===s?e:e.filter((t=>t.matches(s)))}})}}

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.borderRadius = "medium";
    this.shadow = "large";
    this.isHoverable = false;
    this.hasOverlay = false;
    this.isEoa = false;
    this.hasBottom = false;
    this.cardStyles = ce({
      base: "bg-neutral-100",
      variants: {
        borderRadius: {
          none: "rounded-0",
          small: "rounded-12",
          medium: "rounded-24"
        },
        shadow: {
          small: "shadow-neutral-shadow-round",
          medium: "shadow-neutral-shadow-round-1xl",
          large: "shadow-neutral-shadow-round-2xl"
        },
        isHoverable: {
          true: "cursor-pointer transition"
        },
        hasNoWidth: {
          true: "w-full"
        }
      },
      compoundVariants: [
        {
          shadow: "small",
          isHoverable: true,
          class: "hover:shadow-neutral-shadow-round-1xl"
        },
        {
          shadow: "medium",
          isHoverable: true,
          class: "hover:shadow-neutral-shadow-round-2xl"
        },
        {
          shadow: "large",
          isHoverable: true,
          class: "hover:shadow-neutral-shadow-round-3xl"
        }
      ]
    });
  }
  onBottomSlotChange() {
    this.hasBottom = this.bottomNodes.length > 0;
  }
  backgroundGradient() {
    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({
      borderRadius: this.borderRadius,
      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({
      borderRadius: this.borderRadius,
      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$1({
      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-[inherit]"
        >
          <slot name="content"></slot>
        </div>
      </div>
    `;
  }
  profileTemplate() {
    const cardStyles = this.cardStyles({
      borderRadius: this.borderRadius,
      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$1({
      backgroundImage: this.backgroundGradient()
    })}
          class=${cn(
      "min-h-[92px] -mb-6 w-full rounded-t-[inherit] rounded-b-0 relative",
      this.headerClass
    )}
        >
          ${this.backgroundUrl && x`<div
            class="rounded-t-[inherit] overflow-hidden absolute inset-0"
          >
            <lukso-image src=${this.backgroundUrl}></lukso-image>
          </div>`}
          ${this.hasOverlay ? x`<div
                class="h-full full rounded-t-[inherit] rounded-b-0 bg-neutral-20/10 absolute"
              ></div>` : E}
          <div class="relative h-full">
            <slot name="header"></slot>
          </div>
        </div>

        <div
          style=${customStyleMap({
      [`width: ${this.width}px`]: !!this.width
    })}
          class="bg-neutral-100 rounded-[inherit] relative break-normal"
        >
          <lukso-profile
            profile-url=${this.isEoa ? makeBlockie(this.profileAddress) : this.profileUrl}
            borderRadius="large"
            profile-address=${this.profileAddress}
            ?has-identicon=${!this.isEoa}
            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({
      borderRadius: this.borderRadius,
      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$1({
      backgroundImage: this.backgroundGradient()
    })}
          class=${cn(
      "min-h-[129px] -mb-6 bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative bg-neutral-100",
      this.headerClass
    )}
        >
          ${this.backgroundUrl && x`<div
              class="rounded-t-[inherit] overflow-hidden absolute inset-0"
            >
              <lukso-image src=${this.backgroundUrl}></lukso-image>
            </div>
            <div
              class="min-h-full min-w-full rounded-t-[inherit] rounded-b-0 bg-neutral-10/10 absolute"
            ></div>`}
          <div>
            <slot name="header"></slot>
          </div>
        </div>
        <div class="grid grid-rows-[max-content,auto] rounded-b-[inherit]">
          <div
            class=${cn("bg-neutral-100 relative", {
      "rounded-b-[inherit]": !this.hasBottom
    })}
          >
            <lukso-profile
              profile-url=${this.isEoa ? makeBlockie(this.profileAddress) : this.profileUrl}
              borderRadius="large"
              profile-address=${this.profileAddress}
              ?has-identicon=${!this.isEoa}
              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-[inherit] shadow-neutral-inner-shadow-top"
          >
            <slot @slotchange=${this.onBottomSlotChange} name="bottom"></slot>
          </div>
        </div>
      </div>
    `;
  }
  heroTemplate() {
    const cardStyles = this.cardStyles({
      borderRadius: this.borderRadius,
      shadow: this.shadow,
      isHoverable: this.isHoverable,
      hasNoWidth: !this.width,
      class: "flex"
    });
    return x`
      <div
        data-testid="card"
        style=${customStyleMap({
      [`min-height: ${this.height}px`]: !!this.height,
      "min-height: 240px": !this.height,
      [`width: ${this.width}px`]: !!this.width
    })}
        class=${cn(cardStyles, this.customClass)}
      >
        <div
          class="h-full w-full -mb-6 bg-center bg-cover rounded-[inherit] relative"
        >
          ${this.backgroundUrl && x`<div class="rounded-[inherit] overflow-hidden absolute inset-0">
            <lukso-image src=${this.backgroundUrl}></lukso-image>
          </div>`}
          ${this.hasOverlay && this.backgroundUrl ? x`<div
                class="h-full w-full rounded-[inherit] bg-neutral-20/10 absolute"
              ></div>` : E}
          <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({
      borderRadius: this.borderRadius,
      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$1({
      backgroundImage: this.backgroundGradient()
    })}
          class=${cn(
      "min-h-[240px] bg-center bg-cover rounded-t-[inherit] rounded-b-0 relative",
      this.headerClass
    )}
        >
          <div class="rounded-t-[inherit] overflow-hidden absolute inset-0">
            <lukso-image src=${this.backgroundUrl}></lukso-image>
          </div>
          <div class="relative h-full">
            <slot name="header"></slot>
          </div>
        </div>
        <div class="bg-neutral-100 rounded-t-0 rounded-b-[inherit] 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, attribute: "border-radius" })
], LuksoCard.prototype, "borderRadius", 2);
__decorateClass([
  n({ type: String })
], LuksoCard.prototype, "shadow", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-hoverable" })
], LuksoCard.prototype, "isHoverable", 2);
__decorateClass([
  n({ type: Boolean, attribute: "has-overlay" })
], LuksoCard.prototype, "hasOverlay", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-eoa" })
], LuksoCard.prototype, "isEoa", 2);
__decorateClass([
  o({ slot: "bottom", flatten: true })
], LuksoCard.prototype, "bottomNodes", 2);
__decorateClass([
  r()
], LuksoCard.prototype, "hasBottom", 2);
LuksoCard = __decorateClass([
  t("lukso-card")
], LuksoCard);

export { LuksoCard };
