import { a as TailwindElement, x, E } from '../../index-92dc158d.js';
import { n, t } from '../../property-eaa52bd9.js';
import { r } from '../../state-1fc9a224.js';
import { c as ce } from '../../index-d14b6a34.js';
import '../lukso-icon/index.js';
import '../lukso-tag/index.js';
import '../../style-map-5aef4b6f.js';
import '../../directive-2bb7789e.js';
import '../../index-7bb28a79.js';

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 LuksoNavbar = class extends TailwindElement {
  constructor() {
    super(...arguments);
    this.title = "";
    this.isCenter = false;
    this.isSticky = false;
    this.isTransparent = false;
    this.isTestnet = false;
    this.icon = "";
    this.hasMenu = false;
    this.logoUrl = "";
    this.mobileBreakpoint = "md";
    this.isMenuOpen = false;
    this.defaultLogoUrl = "/assets/images/up-logo.png";
    this.styles = ce({
      slots: {
        wrapper: "h-78 grid items-center",
        mobileMenuWrapper: "items-center justify-end pr-6 flex gap-2",
        mobileMenuTrigger: `w-[18px] h-[2px] rounded-4 bg-neutral-20 transition-all
        before:content-[''] before:absolute before:w-[18px] before:h-[2px] before:bg-neutral-20 before:rounded-4 before:transition-all before:-translate-y-[6px]
        after:content-[''] after:absolute after:w-[18px] after:h-[2px] after:bg-neutral-20 after:rounded-4 after:transition-all after:translate-y-[6px]`,
        mobileMenuDropdown: "fixed top-[78px] left-0 w-full h-full bg-neutral-100 z-[1000] justify-center items-center flex",
        desktopMenuWrapper: "items-center justify-end pr-10 no-underline hidden",
        desktopCenterWrapper: "items-center hidden"
      },
      variants: {
        isCenter: {
          true: {
            wrapper: "justify-center"
          },
          false: {
            wrapper: "grid-cols-[minmax(max-content,35%)_auto_minmax(max-content,35%)]"
          }
        },
        isSticky: {
          true: {
            wrapper: "sticky top-0 z-[1000]"
          }
        },
        isTransparent: {
          false: {
            wrapper: "bg-neutral-100 shadow-pink-drop-shadow"
          }
        },
        mobileBreakpoint: {
          sm: {
            mobileMenuWrapper: "sm:hidden",
            mobileMenuDropdown: "sm:hidden",
            desktopMenuWrapper: "sm:flex",
            desktopCenterWrapper: "sm:flex"
          },
          md: {
            mobileMenuWrapper: "md:hidden",
            mobileMenuDropdown: "md:hidden",
            desktopMenuWrapper: "md:flex",
            desktopCenterWrapper: "md:flex"
          },
          lg: {
            mobileMenuWrapper: "lg:hidden",
            mobileMenuDropdown: "lg:hidden",
            desktopMenuWrapper: "lg:flex",
            desktopCenterWrapper: "lg:flex"
          },
          xl: {
            mobileMenuWrapper: "xl:hidden",
            mobileMenuDropdown: "xl:hidden",
            desktopMenuWrapper: "xl:flex",
            desktopCenterWrapper: "xl:flex"
          }
        },
        isMenuOpen: {
          true: {
            mobileMenuTrigger: "!bg-transparent before:rotate-[45deg] before:!-translate-y-[0px] after:-rotate-[45deg] after:!translate-y-[0px]",
            mobileMenuDropdown: "animate-fade-in animation-duration-150"
          },
          false: {
            mobileMenuDropdown: "!hidden"
          }
        }
      },
      compoundVariants: [
        {
          isMenuOpen: true,
          isTransparent: true,
          class: {
            wrapper: "bg-neutral-100 transition duration-150"
          }
        },
        {
          isMenuOpen: false,
          isTransparent: true,
          class: {
            wrapper: "bg-transparent"
          }
        }
      ]
    });
  }
  handleBrandClick() {
    const event = new CustomEvent("on-brand-click", {
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(event);
  }
  handleIconClick() {
    const event = new CustomEvent("on-icon-click", {
      bubbles: true,
      composed: true
    });
    this.dispatchEvent(event);
  }
  handleMenuToggle() {
    this.isMenuOpen = !this.isMenuOpen;
    if (this.isMenuOpen) {
      document.body.style.overflow = "hidden";
    } else {
      document.body.style.overflow = "auto";
    }
  }
  desktopMenuTemplate(styles) {
    return x` <div class=${styles.desktopMenuWrapper()}>
      <slot name="desktop-menu"></slot>
    </div>`;
  }
  desktopCenterTemplate(styles) {
    return x`<div class=${styles.desktopCenterWrapper()}>
      <slot name="desktop-center"></slot>
    </div>`;
  }
  mobileMenuTemplate(styles) {
    return x`<div></div>
      <div class=${styles.mobileMenuWrapper()}>
        <div class="flex">
          <slot name="mobile-icons"></slot>
        </div>
        <div
          class="flex items-center justify-center w-8 h-8 cursor-pointer"
          @click=${this.handleMenuToggle}
        >
          <div class=${styles.mobileMenuTrigger()}></div>
        </div>
        <div
          class=${styles.mobileMenuDropdown()}
          @click=${this.handleMenuToggle}
        >
          <slot name="mobile-menu"></slot>
        </div>
      </div>`;
  }
  render() {
    const styles = this.styles({
      isCenter: this.isCenter,
      isSticky: this.isSticky,
      isTransparent: this.isTransparent,
      mobileBreakpoint: this.mobileBreakpoint,
      isMenuOpen: this.isMenuOpen
    });
    return x`
      <nav data-testid="navbar" class=${styles.wrapper()}>
        <div class="flex items-center px-7 h-[inherit] sm:px-10">
          <div
            class="flex cursor-pointer group"
            @click=${this.handleBrandClick}
          >
            <img
              src="${this.logoUrl || this.defaultLogoUrl}"
              class="mr-2 h-[26px]"
              alt="${this.title}"
            />
            <div
              class="text-purple-51 nav-apax-14-medium-uppercase
                whitespace-pre-line flex leading-none transition group-hover:text-purple-41"
            >
              <span>${this.title}</span>
            </div>
            ${this.isTestnet ? x`<lukso-tag background-color="yellow-65" class="ml-2">
                  TESTNET
                </lukso-tag>` : E}
          </div>
          ${this.icon ? x`<div
                class="flex border-l border-l-purple-82 h-7 items-center pl-3 ml-3"
              >
                <lukso-icon
                  class="transition cursor-pointer hover:scale-105"
                  name="${this.icon}"
                  color="purple-51"
                  @click=${this.handleIconClick}
                ></lukso-icon>
              </div>` : E}
        </div>
        ${this.isCenter ? E : this.desktopCenterTemplate(styles)}
        ${this.isCenter ? E : this.hasMenu ? x`${this.desktopMenuTemplate(styles)}
            ${this.mobileMenuTemplate(styles)}` : E}
      </nav>
    `;
  }
};
__decorateClass([
  n({ type: String })
], LuksoNavbar.prototype, "title", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-center" })
], LuksoNavbar.prototype, "isCenter", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-sticky" })
], LuksoNavbar.prototype, "isSticky", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-transparent" })
], LuksoNavbar.prototype, "isTransparent", 2);
__decorateClass([
  n({ type: Boolean, attribute: "is-testnet" })
], LuksoNavbar.prototype, "isTestnet", 2);
__decorateClass([
  n({ type: String })
], LuksoNavbar.prototype, "icon", 2);
__decorateClass([
  n({ type: Boolean, attribute: "has-menu" })
], LuksoNavbar.prototype, "hasMenu", 2);
__decorateClass([
  n({ type: String, attribute: "logo-url" })
], LuksoNavbar.prototype, "logoUrl", 2);
__decorateClass([
  n({ type: String, attribute: "mobile-breakpoint" })
], LuksoNavbar.prototype, "mobileBreakpoint", 2);
__decorateClass([
  r()
], LuksoNavbar.prototype, "isMenuOpen", 2);
LuksoNavbar = __decorateClass([
  t("lukso-navbar")
], LuksoNavbar);

export { LuksoNavbar };
