import { unsafeCSS, LitElement } from "lit";
import { html } from "lit/static-html.js";
import { property } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import checkButtonStyle from "./check-button.css.js";
import "../../icons/icon-checkbox-checked-filled.js";
import "../../icons/icon-checkbox-uncheck-google.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { customElement } from "../../decorator.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;
};
var CheckButtonType = /* @__PURE__ */ ((CheckButtonType2) => {
  CheckButtonType2["regular"] = "regular";
  CheckButtonType2["checkbox"] = "checkbox";
  return CheckButtonType2;
})(CheckButtonType || {});
var CheckButtonCheckboxAppearance = /* @__PURE__ */ ((CheckButtonCheckboxAppearance2) => {
  CheckButtonCheckboxAppearance2["default"] = "default";
  CheckButtonCheckboxAppearance2["updated"] = "updated";
  return CheckButtonCheckboxAppearance2;
})(CheckButtonCheckboxAppearance || {});
let ObcCheckButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.type = "regular";
    this.checked = false;
    this.disabled = false;
    this.fullWidth = false;
    this.width = "";
    this.showIcon = false;
    this.hasCheckedIcon = false;
    this.hasUncheckedIcon = false;
    this.checkboxAppearance = "default";
  }
  get isUpdatedCheckboxAppearance() {
    return this.type === "checkbox" && this.checkboxAppearance === "updated";
  }
  get customWidthStyle() {
    if (!this.fullWidth || this.width === "") return "";
    return `--custom-width: ${this.width}`;
  }
  handleClick() {
    if (this.disabled) return;
    this.checked = !this.checked;
    this.dispatchEvent(
      new CustomEvent("check-button-click", {
        detail: {
          checked: this.checked,
          type: this.type
        }
      })
    );
  }
  renderIcon() {
    if (this.type === "checkbox") {
      return html`
        <div class="icon-container">
          ${this.checked ? this.renderCheckedIcon() : this.renderUncheckedIcon()}
        </div>
      `;
    }
    if (this.type === "regular" && this.showIcon) {
      return html`
        <div class="icon-container">
          <slot name="icon"></slot>
        </div>
      `;
    }
    return html``;
  }
  renderCheckedIcon() {
    if (this.isUpdatedCheckboxAppearance && !this.hasCheckedIcon) {
      return this.renderUpdatedCheckedIcon();
    }
    if (this.hasCheckedIcon) {
      return html`<slot name="checked-icon"></slot>`;
    }
    return html`<obi-checkbox-checked-filled></obi-checkbox-checked-filled>`;
  }
  renderUncheckedIcon() {
    if (this.isUpdatedCheckboxAppearance && !this.hasUncheckedIcon) {
      return this.renderUpdatedUncheckedIcon();
    }
    if (this.hasUncheckedIcon) {
      return html`<slot name="unchecked-icon"></slot>`;
    }
    return html`<obi-checkbox-uncheck-google></obi-checkbox-uncheck-google>`;
  }
  renderUpdatedUncheckedIcon() {
    return html`
      <span class="checkbox-appearance-updated-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <rect
            x="0.5"
            y="0.5"
            width="23"
            height="23"
            rx="3.5"
            fill="var(--obc-check-button-checkbox-unchecked-background, var(--indent-enabled-background-color))"
            stroke="var(--obc-check-button-checkbox-unchecked-border, var(--element-symbol-color))"
          />
        </svg>
      </span>
    `;
  }
  renderUpdatedCheckedIcon() {
    return html`
      <span class="checkbox-appearance-updated-icon" aria-hidden="true">
        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
          <rect
            x="0.5"
            y="0.5"
            width="23"
            height="23"
            rx="3.5"
            fill="var(--obc-check-button-checkbox-checked-background, var(--selected-enabled-background-color))"
            stroke="var(--obc-check-button-checkbox-checked-border, var(--selected-enabled-border-color))"
          />
          <path
            d="M8.99991 16.17L4.82991 12L3.40991 13.41L8.99991 19L20.9999 7L19.5899 5.59L8.99991 16.17Z"
            fill="var(--on-selected-active-color)"
          />
        </svg>
      </span>
    `;
  }
  render() {
    return html`
      <button
        class=${classMap({
      wrapper: true,
      "state-checked": this.checked,
      "state-unchecked": !this.checked,
      "type-regular": this.type === "regular",
      "type-checkbox": this.type === "checkbox",
      "checkbox-appearance-updated": this.isUpdatedCheckboxAppearance,
      hasIcon: this.type === "checkbox" || this.type === "regular" && this.showIcon,
      "full-width": this.fullWidth,
      "has-custom-width": this.fullWidth && this.width !== ""
    })}
        ?disabled=${this.disabled}
        @click=${this.handleClick}
        part="wrapper"
        style=${this.customWidthStyle}
        aria-checked=${ifDefined(
      this.type === "checkbox" ? this.checked ? "true" : "false" : void 0
    )}
        aria-pressed=${ifDefined(
      this.type === "regular" ? this.checked ? "true" : "false" : void 0
    )}
      >
        <div class="visible-wrapper" part="visible-wrapper">
          <div class="content-container">
            ${this.renderIcon()}
            <span class="label-container" part="label">
              <slot></slot>
            </span>
          </div>
        </div>
      </button>
    `;
  }
};
ObcCheckButton.styles = unsafeCSS(checkButtonStyle);
__decorateClass([
  property({ type: String })
], ObcCheckButton.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckButton.prototype, "checked", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckButton.prototype, "disabled", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckButton.prototype, "fullWidth", 2);
__decorateClass([
  property({ type: String })
], ObcCheckButton.prototype, "width", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckButton.prototype, "showIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckButton.prototype, "hasCheckedIcon", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckButton.prototype, "hasUncheckedIcon", 2);
__decorateClass([
  property({ type: String, attribute: "checkbox-appearance" })
], ObcCheckButton.prototype, "checkboxAppearance", 2);
ObcCheckButton = __decorateClass([
  customElement("obc-check-button")
], ObcCheckButton);
export {
  CheckButtonCheckboxAppearance,
  CheckButtonType,
  ObcCheckButton
};
//# sourceMappingURL=check-button.js.map
