import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property, query } from "lit/decorators.js";
import { classMap } from "lit/directives/class-map.js";
import { ifDefined } from "lit/directives/if-defined.js";
import { customElement } from "../../decorator.js";
import componentStyle from "./checkbox-item.css.js";
import { CheckboxStatus, CheckboxState } from "../checkbox/checkbox.js";
import "../../icons/icon-chevron-right-google.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 ObcCheckboxItemState = /* @__PURE__ */ ((ObcCheckboxItemState2) => {
  ObcCheckboxItemState2["enabled"] = "enabled";
  ObcCheckboxItemState2["disabled"] = "disabled";
  return ObcCheckboxItemState2;
})(ObcCheckboxItemState || {});
var ObcCheckboxItemHoverStyle = /* @__PURE__ */ ((ObcCheckboxItemHoverStyle2) => {
  ObcCheckboxItemHoverStyle2["touchTarget"] = "touch-target";
  ObcCheckboxItemHoverStyle2["visualTarget"] = "visual-target";
  return ObcCheckboxItemHoverStyle2;
})(ObcCheckboxItemHoverStyle || {});
let ObcCheckboxItem = class extends LitElement {
  constructor() {
    super(...arguments);
    this.status = CheckboxStatus.unchecked;
    this.state = "enabled";
    this.disabled = false;
    this.label = "";
    this.isNested = false;
    this.isLevel1 = false;
    this.isLevel2 = false;
    this.hoverStyle = "touch-target";
    this.ariaDescribedBy = "";
  }
  toggleStatusFromItem() {
    const isDisabled = this.disabled || this.state === "disabled";
    if (this.status === CheckboxStatus.checked) {
      this.status = CheckboxStatus.unchecked;
    } else {
      this.status = CheckboxStatus.checked;
    }
    this.dispatchEvent(
      new CustomEvent("change", {
        detail: {
          status: this.status,
          disabled: isDisabled
        }
      })
    );
  }
  handleItemClick(event) {
    if (this.disabled || this.state === "disabled") return;
    const path = event.composedPath();
    const checkboxElement = this.checkboxElement;
    if (checkboxElement && path.includes(checkboxElement)) return;
    this.toggleStatusFromItem();
  }
  handleCheckboxChange(event) {
    const checkboxEvent = event;
    this.status = checkboxEvent.detail.status;
    this.dispatchEvent(
      new CustomEvent("change", {
        detail: checkboxEvent.detail
      })
    );
  }
  render() {
    const isDisabled = this.disabled || this.state === "disabled";
    const hasCheckboxHoverEffects = !(this.hoverStyle === "touch-target" && !isDisabled);
    const shouldRenderNestedSpacer = this.isNested && this.isLevel2;
    const shouldRenderChevronContainer = this.isNested;
    const shouldRenderChevronIcon = this.isNested && this.isLevel1;
    const checkboxAriaLabel = this.label.trim().length > 0 ? this.label : void 0;
    return html`
      <div
        class=${classMap({
      "checkbox-item-container": true,
      [`status-${this.status}`]: true,
      [`hover-style-${this.hoverStyle}`]: true,
      "is-nested": this.isNested,
      "is-level-1": this.isLevel1,
      "is-level-2": this.isLevel2,
      disabled: isDisabled
    })}
        @click=${this.handleItemClick}
      >
        ${shouldRenderChevronContainer ? html`<div class="chevron-container" aria-hidden="true">
              ${shouldRenderChevronIcon ? html`<obi-chevron-right-google
                    class="chevron-icon"
                  ></obi-chevron-right-google>` : nothing}
            </div>` : nothing}
        ${shouldRenderNestedSpacer ? html`<div class="nested-spacer" aria-hidden="true"></div>` : nothing}
        <div class="content-container">
          <obc-checkbox
            .status=${this.status}
            .state=${CheckboxState.enabled}
            .disabled=${isDisabled}
            .hasHoverEffects=${hasCheckboxHoverEffects}
            aria-label=${ifDefined(checkboxAriaLabel)}
            aria-describedby=${ifDefined(this.ariaDescribedBy || void 0)}
            @change=${this.handleCheckboxChange}
          ></obc-checkbox>
          <div class="checkbox-label-container">
            <span class="checkbox-label">${this.label}</span>
          </div>
        </div>
      </div>
    `;
  }
};
ObcCheckboxItem.styles = unsafeCSS(componentStyle);
__decorateClass([
  property({ type: String })
], ObcCheckboxItem.prototype, "status", 2);
__decorateClass([
  property({ type: String })
], ObcCheckboxItem.prototype, "state", 2);
__decorateClass([
  property({ type: Boolean })
], ObcCheckboxItem.prototype, "disabled", 2);
__decorateClass([
  property({ type: String })
], ObcCheckboxItem.prototype, "label", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcCheckboxItem.prototype, "isNested", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcCheckboxItem.prototype, "isLevel1", 2);
__decorateClass([
  property({ type: Boolean, reflect: true })
], ObcCheckboxItem.prototype, "isLevel2", 2);
__decorateClass([
  property({ type: String })
], ObcCheckboxItem.prototype, "hoverStyle", 2);
__decorateClass([
  property({ type: String, attribute: "aria-describedby", reflect: true })
], ObcCheckboxItem.prototype, "ariaDescribedBy", 2);
__decorateClass([
  query("obc-checkbox")
], ObcCheckboxItem.prototype, "checkboxElement", 2);
ObcCheckboxItem = __decorateClass([
  customElement("obc-checkbox-item")
], ObcCheckboxItem);
export {
  ObcCheckboxItem,
  ObcCheckboxItemHoverStyle,
  ObcCheckboxItemState
};
//# sourceMappingURL=checkbox-item.js.map
