import { unsafeCSS, LitElement, html, nothing } from "lit";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../decorator.js";
import componentStyle from "./user-menu.css.js";
import { HTMLInputTypeAttribute, ObcTextInputFieldTextAlign } from "../text-input-field/text-input-field.js";
import { ButtonVariant } from "../button/button.js";
import { Size, Variant, StyleType } from "../user-button/user-button.js";
import { ProgressBarType, ProgressBarMode } from "../progress-bar/progress-bar.js";
import "../navigation-item/navigation-item.js";
import "../../icons/icon-calendar-google.js";
import "../../icons/icon-log-open-google.js";
import "../../icons/icon-settings-iec.js";
import "../../icons/icon-user.js";
import { localized, msg } from "@lit/localize";
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;
};
var ObcUserMenuType = /* @__PURE__ */ ((ObcUserMenuType2) => {
  ObcUserMenuType2["signIn"] = "sign-in";
  ObcUserMenuType2["userSignIn"] = "user-sign-in";
  ObcUserMenuType2["loadingSignIn"] = "loading-sign-in";
  ObcUserMenuType2["signedIn"] = "signed-in";
  return ObcUserMenuType2;
})(ObcUserMenuType || {});
var ObcUserMenuSize = /* @__PURE__ */ ((ObcUserMenuSize2) => {
  ObcUserMenuSize2["regular"] = "regular";
  ObcUserMenuSize2["small"] = "small";
  return ObcUserMenuSize2;
})(ObcUserMenuSize || {});
let ObcUserMenu = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "sign-in";
    this.size = "regular";
    this.hasRecentlySignedIn = false;
    this.username = "";
    this.password = "";
    this.usernameError = "";
    this.passwordError = "";
    this.recentUsers = [];
    this.signedInActions = [];
  }
  get defaultSignedInActions() {
    return [
      { id: "calendar", label: msg("Calendar") },
      { id: "log", label: msg("Log") },
      { id: "preferences", label: msg("Preferences") },
      { id: "user-account", label: msg("User account") }
    ];
  }
  get defaultRecentUsers() {
    const label = msg("Username");
    return [
      { initials: "AB", label },
      { initials: "CD", label },
      { initials: "EF", label }
    ];
  }
  renderTextInput(placeholder, type = HTMLInputTypeAttribute.Text, value = "", onInput, errorText = "") {
    const isPassword = type === HTMLInputTypeAttribute.Password;
    return html`
      <obc-text-input-field
        .placeholder=${placeholder}
        .type=${type}
        .textAlign=${ObcTextInputFieldTextAlign.Left}
        .value=${value}
        .error=${Boolean(errorText)}
        .errorText=${errorText}
        .required=${true}
        .hasClearButton=${!isPassword}
        @input=${onInput}
      >
      </obc-text-input-field>
    `;
  }
  renderUserButtons(count, isLarge) {
    const size = isLarge ? Size.large : Size.regular;
    const users = (this.recentUsers.length ? this.recentUsers : this.defaultRecentUsers).slice(0, count);
    return html`
      <div
        class=${classMap({
      users: true,
      large: isLarge,
      single: users.length === 1
    })}
      >
        ${users.map(
      (user) => html`
            <obc-user-button
              .variant=${Variant.initials}
              .styleType=${StyleType.normal}
              .size=${size}
              .initials=${user.initials}
              .label=${user.label}
              @click=${() => this.handleRecentUserClick(user)}
            ></obc-user-button>
          `
    )}
      </div>
    `;
  }
  renderUserProfile(layout, size, initials, label) {
    const userButtonSize = size === "large" ? Size.large : Size.regular;
    const fallbackUser = this.recentUsers[0] ?? this.defaultRecentUsers[0];
    const resolvedInitials = initials ?? this.userInitials ?? fallbackUser.initials;
    const resolvedLabel = label ?? this.userLabel ?? fallbackUser.label;
    return html`
      <div
        class=${classMap({
      "user-profile": true,
      [layout]: true
    })}
      >
        <obc-user-button
          class=${classMap({
      "user-avatar": true,
      [`size-${size}`]: true
    })}
          .variant=${Variant.initials}
          .styleType=${StyleType.normal}
          .size=${userButtonSize}
          .initials=${resolvedInitials}
          .label=${resolvedLabel}
        ></obc-user-button>
      </div>
    `;
  }
  getSignedInActionIcon(actionId) {
    switch (actionId) {
      case "calendar":
        return html`<obi-calendar-google></obi-calendar-google>`;
      case "log":
        return html`<obi-log-open-google></obi-log-open-google>`;
      case "preferences":
        return html`<obi-settings-iec></obi-settings-iec>`;
      case "user-account":
        return html`<obi-user></obi-user>`;
      default:
        return nothing;
    }
  }
  normalizeActionId(actionId) {
    return actionId.trim().toLowerCase().replace(/[^a-z0-9]+/g, "-");
  }
  handleSignedInActionClick(action) {
    this.dispatchEvent(
      new CustomEvent("signed-in-action-click", {
        detail: { id: action.id, label: action.label }
      })
    );
  }
  handleRecentUserClick(user) {
    this.dispatchEvent(
      new CustomEvent("recent-user-click", {
        detail: { initials: user.initials, label: user.label }
      })
    );
  }
  handleUsernameInput(event) {
    const target = event.target;
    this.username = target.value ?? "";
    if (this.username) {
      this.usernameError = "";
    }
  }
  handlePasswordInput(event) {
    const target = event.target;
    this.password = target.value ?? "";
    if (this.password) {
      this.passwordError = "";
    }
  }
  validateSignIn() {
    let valid = true;
    const needsUsername = this.type === "sign-in";
    if (needsUsername && !this.username) {
      this.usernameError = msg("Username is required");
      valid = false;
    }
    if (!this.password) {
      this.passwordError = msg("Password is required");
      valid = false;
    }
    return valid;
  }
  handleSignInClick() {
    if (!this.validateSignIn()) {
      return;
    }
    this.dispatchEvent(
      new CustomEvent("sign-in-click", {
        detail: { username: this.username, password: this.password }
      })
    );
  }
  handleSignOutClick() {
    this.dispatchEvent(new CustomEvent("sign-out-click"));
  }
  renderSignIn() {
    return html`
      <div class="title-container">
        <h3 class="title">${msg("Sign in")}</h3>
      </div>
      <div class="login-container">
        ${this.renderTextInput(
      msg("Username"),
      HTMLInputTypeAttribute.Text,
      this.username,
      this.handleUsernameInput.bind(this),
      this.usernameError
    )}
        ${this.renderTextInput(
      msg("Password"),
      HTMLInputTypeAttribute.Password,
      this.password,
      this.handlePasswordInput.bind(this),
      this.passwordError
    )}
        <obc-button
          variant=${ButtonVariant.raised}
          fullWidth
          @click=${this.handleSignInClick}
        >
          ${msg("Sign in")}
        </obc-button>
      </div>
      ${this.hasRecentlySignedIn ? html`
            <div class="recent-container">
              <div class="title-container">
                <div class="subtitle">${msg("Recently signed in")}</div>
              </div>
              <div class="actions-container">
                ${this.renderUserButtons(3, true)}
              </div>
            </div>
          ` : nothing}
    `;
  }
  renderSignInSmall() {
    return html`
      <div class="title-container">
        <h3 class="title">${msg("Sign in")}</h3>
      </div>
      <div class="login-container">
        ${this.renderTextInput(
      msg("Username"),
      HTMLInputTypeAttribute.Text,
      this.username,
      this.handleUsernameInput.bind(this),
      this.usernameError
    )}
        ${this.renderTextInput(
      msg("Password"),
      HTMLInputTypeAttribute.Password,
      this.password,
      this.handlePasswordInput.bind(this),
      this.passwordError
    )}
        <obc-button
          variant=${ButtonVariant.raised}
          fullWidth
          @click=${this.handleSignInClick}
        >
          ${msg("Sign in")}
        </obc-button>
      </div>
      <div class="divider" aria-hidden="true"></div>
      ${this.hasRecentlySignedIn ? html`
            <div class="recent-container recent">
              <div class="title-container">
                <div class="subtitle">${msg("Recent")}</div>
              </div>
              <div class="actions-container">
                ${this.renderUserButtons(3, false)}
              </div>
            </div>
          ` : nothing}
    `;
  }
  renderUserSignIn() {
    return html`
      <div class="title-container">
        <h3 class="title">${msg("Sign in")}</h3>
      </div>
      <div class="login-container">
        <div class="user-primary">
          ${this.renderUserProfile("vertical", "large")}
        </div>
        <div class="fields">
          ${this.renderTextInput(
      msg("Password"),
      HTMLInputTypeAttribute.Password,
      this.password,
      this.handlePasswordInput.bind(this),
      this.passwordError
    )}
          <obc-button
            variant=${ButtonVariant.raised}
            fullWidth
            @click=${this.handleSignInClick}
          >
            ${msg("Sign in")}
          </obc-button>
        </div>
      </div>
      ${this.hasRecentlySignedIn ? html`
            <div class="recent-container">
              <div class="title-container">
                <div class="subtitle">${msg("Recently signed in")}</div>
              </div>
              <div class="actions-container">
                ${this.renderUserButtons(3, true)}
              </div>
            </div>
          ` : nothing}
    `;
  }
  renderUserSignInSmall() {
    return html`
      <div class="title-container">
        <h3 class="title">${msg("Sign in")}</h3>
      </div>
      <div class="user-container">
        ${this.renderUserProfile("horizontal", "regular")}
      </div>
      <div class="login-container">
        ${this.renderTextInput(
      msg("Password"),
      HTMLInputTypeAttribute.Password,
      this.password,
      this.handlePasswordInput.bind(this),
      this.passwordError
    )}
        <obc-button
          variant=${ButtonVariant.raised}
          fullWidth
          @click=${this.handleSignInClick}
        >
          ${msg("Sign in")}
        </obc-button>
      </div>
      <div class="divider" aria-hidden="true"></div>
      ${this.hasRecentlySignedIn ? html`
            <div class="recent-container recent">
              <div class="title-container">
                <div class="subtitle">${msg("Recent")}</div>
              </div>
              <div class="actions-container">
                ${this.renderUserButtons(3, false)}
              </div>
            </div>
          ` : nothing}
    `;
  }
  renderLoadingSignIn() {
    return html`
      <div class="title-container">
        <h3 class="title">${msg("Sign in")}</h3>
      </div>
      <div class="user-primary loading">
        ${this.renderUserProfile("vertical", "large")}
        <obc-progress-bar
          class="progress"
          type=${ProgressBarType.linear}
          mode=${ProgressBarMode.indeterminate}
          .showValue=${false}
        ></obc-progress-bar>
      </div>
    `;
  }
  renderLoadingSignInSmall() {
    return html`
      <div class="title-container">
        <h3 class="title">${msg("Sign in")}</h3>
      </div>
      <div class="user-primary loading">
        ${this.renderUserProfile("horizontal", "regular")}
        <obc-progress-bar
          class="progress"
          type=${ProgressBarType.linear}
          mode=${ProgressBarMode.indeterminate}
          .showValue=${false}
        ></obc-progress-bar>
      </div>
    `;
  }
  renderSignedIn() {
    const actions = this.signedInActions.length ? this.signedInActions : this.defaultSignedInActions;
    return html`
      <div class="title-container">
        <h3 class="title">${msg("User")}</h3>
      </div>
      <div class="user-primary signed-in">
        ${this.renderUserProfile("vertical", "large")}
      </div>
      <div class="divider" aria-hidden="true"></div>
      <div class="nav-container">
        ${actions.map((action) => {
      const normalizedId = this.normalizeActionId(action.id);
      return html`
            <obc-navigation-item
              .label=${action.label}
              hasIcon
              @click=${() => this.handleSignedInActionClick(action)}
            >
              <span slot="icon">
                <slot name="signed-in-action-icon-${normalizedId}">
                  ${this.getSignedInActionIcon(normalizedId)}
                </slot>
              </span>
            </obc-navigation-item>
          `;
    })}
      </div>
      <div class="button-container">
        <obc-button
          variant=${ButtonVariant.normal}
          fullWidth
          @click=${this.handleSignOutClick}
        >
          ${msg("Sign out")}
        </obc-button>
      </div>
    `;
  }
  renderSignedInSmall() {
    const actions = this.signedInActions.length ? this.signedInActions : this.defaultSignedInActions;
    const primaryAction = actions[2];
    return html`
      <div class="title-container">
        <h3 class="title">${msg("User")}</h3>
      </div>
      <div class="user-container">
        ${this.renderUserProfile("horizontal", "regular")}
      </div>
      <div class="button-container">
        ${primaryAction ? html`
              <obc-button
                variant=${ButtonVariant.normal}
                fullWidth
                @click=${() => this.handleSignedInActionClick(primaryAction)}
              >
                ${primaryAction.label}
              </obc-button>
            ` : nothing}
        <obc-button
          variant=${ButtonVariant.normal}
          fullWidth
          @click=${this.handleSignOutClick}
        >
          ${msg("Sign out")}
        </obc-button>
      </div>
    `;
  }
  render() {
    let content = nothing;
    if (this.type === "sign-in") {
      content = this.size === "small" ? this.renderSignInSmall() : this.renderSignIn();
    }
    if (this.type === "user-sign-in") {
      content = this.size === "small" ? this.renderUserSignInSmall() : this.renderUserSignIn();
    }
    if (this.type === "loading-sign-in") {
      content = this.size === "small" ? this.renderLoadingSignInSmall() : this.renderLoadingSignIn();
    }
    if (this.type === "signed-in") {
      content = this.size === "small" ? this.renderSignedInSmall() : this.renderSignedIn();
    }
    return html`
      <div
        class=${classMap({
      card: true,
      [`size-${this.size}`]: true,
      [`type-${this.type}`]: true
    })}
      >
        ${content}
      </div>
    `;
  }
};
ObcUserMenu.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "type", 2);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "size", 2);
__decorateClass([
  property({ type: Boolean })
], ObcUserMenu.prototype, "hasRecentlySignedIn", 2);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "username", 2);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "password", 2);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "usernameError", 2);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "passwordError", 2);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "userInitials", 2);
__decorateClass([
  property({ type: String })
], ObcUserMenu.prototype, "userLabel", 2);
__decorateClass([
  property({ attribute: false })
], ObcUserMenu.prototype, "recentUsers", 2);
__decorateClass([
  property({ attribute: false })
], ObcUserMenu.prototype, "signedInActions", 2);
ObcUserMenu = __decorateClass([
  customElement("obc-user-menu"),
  localized()
], ObcUserMenu);
export {
  ObcUserMenu,
  ObcUserMenuSize,
  ObcUserMenuType
};
//# sourceMappingURL=user-menu.js.map
