import { unsafeCSS, LitElement, nothing, html } from "lit";
import { property } from "lit/decorators.js";
import compentStyle from "./poi-button.css.js";
import { classMap } from "lit/directives/class-map.js";
import { customElement } from "../../../decorator.js";
import { ObcPoiHeaderState, ObcPoiHeaderType } from "../poi-header/poi-header.js";
import { ObcPoiObjectType, ObcPoiObjectState, ObcPoiObjectStyle } from "../poi-object/poi-object.js";
import { ObcPoiSelectionFrameType, ObcPoiSelectionFrameState } from "../poi-selection-frame/poi-selection-frame.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 ObcPoiButtonType = /* @__PURE__ */ ((ObcPoiButtonType2) => {
  ObcPoiButtonType2["Button"] = "button";
  ObcPoiButtonType2["Enhanced"] = "enhanced";
  return ObcPoiButtonType2;
})(ObcPoiButtonType || {});
var ObcPoiButtonLayout = /* @__PURE__ */ ((ObcPoiButtonLayout2) => {
  ObcPoiButtonLayout2["Anchored"] = "anchored";
  ObcPoiButtonLayout2["Inline"] = "inline";
  return ObcPoiButtonLayout2;
})(ObcPoiButtonLayout || {});
var ObcPoiButtonState = /* @__PURE__ */ ((ObcPoiButtonState2) => {
  ObcPoiButtonState2["Enabled"] = "enabled";
  ObcPoiButtonState2["Caution"] = "caution";
  ObcPoiButtonState2["Warning"] = "warning";
  ObcPoiButtonState2["Alarm"] = "alarm";
  return ObcPoiButtonState2;
})(ObcPoiButtonState || {});
var PoiButtonVisualState = /* @__PURE__ */ ((PoiButtonVisualState2) => {
  PoiButtonVisualState2["Unchecked"] = "unchecked";
  PoiButtonVisualState2["Checked"] = "checked";
  PoiButtonVisualState2["Activated"] = "activated";
  PoiButtonVisualState2["Overlapped"] = "overlapped";
  return PoiButtonVisualState2;
})(PoiButtonVisualState || {});
const BUTTON_TOUCH_TARGET_PX = 48;
const ENHANCED_TOUCH_TARGET_PX = 64;
const DEFAULT_ENHANCED_BOX_AREA_THRESHOLD_PX = (BUTTON_TOUCH_TARGET_PX * BUTTON_TOUCH_TARGET_PX + ENHANCED_TOUCH_TARGET_PX * ENHANCED_TOUCH_TARGET_PX) / 2;
function resolvePoiButtonTypeFromBoxSize(boxWidthPx, boxHeightPx, enhancedAreaThresholdPx = DEFAULT_ENHANCED_BOX_AREA_THRESHOLD_PX) {
  const width = Number(boxWidthPx);
  const height = Number(boxHeightPx);
  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
    return "button";
  }
  const area = width * height;
  return area >= enhancedAreaThresholdPx ? "enhanced" : "button";
}
let ObcPoiButton = class extends LitElement {
  constructor() {
    super(...arguments);
    this.relativeDirection = 0;
    this.selected = false;
    this.layout = "anchored";
    this.hasHeader = false;
    this.state = "enabled";
    this.value = "unchecked";
    this.overlapOpaque = false;
    this.type = "button";
    this.inExpandedGroup = false;
    this.data = [];
    this.hasRelation = false;
    this.headerContent = "";
    this.handleHeaderSlotChange = () => {
      this.syncSlottedHeaderState();
    };
  }
  connectedCallback() {
    super.connectedCallback();
    this.setupHeaderContentObserver();
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    this.headerContentObserver?.disconnect();
    this.headerContentObserver = void 0;
  }
  setupHeaderContentObserver() {
    this.headerContentObserver?.disconnect();
    this.headerContentObserver = new MutationObserver((mutations) => {
      for (const mutation of mutations) {
        if (mutation.type === "childList") {
          this.requestUpdate();
          return;
        }
        if (mutation.type === "attributes" && mutation.target instanceof HTMLElement && mutation.target.getAttribute("slot") === "header") {
          this.requestUpdate();
          return;
        }
      }
    });
    this.headerContentObserver.observe(this, {
      childList: true,
      subtree: true,
      attributes: true,
      attributeFilter: ["slot"]
    });
  }
  get hasData() {
    return this.data.length > 0;
  }
  get alertClassSuffix() {
    if (this.state === "enabled") {
      return "none";
    }
    return this.state;
  }
  get resolvedHeaderState() {
    switch (this.state) {
      case "caution":
        return ObcPoiHeaderState.Caution;
      case "warning":
        return ObcPoiHeaderState.Warning;
      case "alarm":
        return ObcPoiHeaderState.Alarm;
      case "enabled":
      default:
        return ObcPoiHeaderState.Selected;
    }
  }
  get hasHeaderContent() {
    return this.querySelector('[slot="header"]') !== null;
  }
  get hasGeneratedHeaderContent() {
    return this.headerContent.trim().length > 0;
  }
  syncSlottedHeaderState() {
    const headerSlot = this.renderRoot.querySelector(
      'slot[name="header"]'
    );
    if (!headerSlot) {
      return;
    }
    const state = this.resolvedHeaderState;
    const assigned = headerSlot.assignedElements({ flatten: true });
    const headers = /* @__PURE__ */ new Set();
    for (const element of assigned) {
      if (element.matches("obc-poi-header")) {
        headers.add(element);
      }
      for (const nested of element.querySelectorAll("obc-poi-header")) {
        headers.add(nested);
      }
    }
    for (const header of headers) {
      header.state = state;
      header.setAttribute("state", state);
    }
  }
  updated(_changedProperties) {
    this.syncSlottedHeaderState();
  }
  renderHeader() {
    if (!this.hasHeader || !this.hasHeaderContent && !this.hasGeneratedHeaderContent) {
      return nothing;
    }
    return html`
      <div class="id-label">
        ${this.hasHeaderContent ? html`<slot
              name="header"
              @slotchange=${this.handleHeaderSlotChange}
            ></slot>` : html`<obc-poi-header
              .content=${this.headerContent}
              .state=${this.resolvedHeaderState}
              .type=${ObcPoiHeaderType.Id}
            ></obc-poi-header>`}
      </div>
    `;
  }
  get poiObjectType() {
    return this.type === "enhanced" ? ObcPoiObjectType.Large : ObcPoiObjectType.Regular;
  }
  get poiObjectState() {
    if (this.value === "overlapped") {
      return ObcPoiObjectState.Overlapped;
    }
    if (this.state === "caution")
      return ObcPoiObjectState.Caution;
    if (this.state === "warning")
      return ObcPoiObjectState.Warning;
    if (this.state === "alarm") return ObcPoiObjectState.Alarm;
    if (this.hasData) {
      if (this.value === "activated") {
        return ObcPoiObjectState.Activated;
      }
      if (this.value === "checked") {
        return ObcPoiObjectState.StaticChecked;
      }
      return ObcPoiObjectState.StaticUnchecked;
    }
    if (this.value === "activated") {
      return ObcPoiObjectState.Activated;
    }
    if (this.value === "checked") {
      return ObcPoiObjectState.Checked;
    }
    return ObcPoiObjectState.Unchecked;
  }
  get wrapperVariantClasses() {
    return {};
  }
  render() {
    if (this.hasData) {
      return this.renderWithData();
    }
    return this.renderButton();
  }
  renderPoiObject() {
    return html`
      <obc-poi-object
        class="poi-object"
        .type=${this.poiObjectType}
        .objectStyle=${ObcPoiObjectStyle.Regular}
        .state=${this.poiObjectState}
        .interactive=${false}
        exportparts="icon"
      >
        <span
          class="icon"
          part="icon"
          style="transform: rotate(${this.relativeDirection}deg);"
        >
          <slot></slot>
        </span>
      </obc-poi-object>
    `;
  }
  renderButton() {
    return html`
      <button
        type="button"
        class=${classMap({
      wrapper: true,
      selected: this.selected,
      [`alert-${this.alertClassSuffix}`]: true,
      [`type-${this.type}`]: true,
      expanded: this.inExpandedGroup,
      ...this.wrapperVariantClasses
    })}
      >
        ${this.renderHeader()}
        <div class="button-wrapper">
          ${this.renderSelectionFrame()} ${this.renderPoiObject()}
          <div class="alert-ring"></div>
        </div>
      </button>
    `;
  }
  renderWithData() {
    return html`
      <button
        type="button"
        class=${classMap({
      wrapper: true,
      "has-data": true,
      selected: this.selected,
      "has-header": this.hasHeader && (this.hasHeaderContent || this.hasGeneratedHeaderContent),
      [`alert-${this.alertClassSuffix}`]: true,
      [`type-${this.type}`]: true,
      expanded: this.inExpandedGroup,
      ...this.wrapperVariantClasses
    })}
      >
        ${this.renderHeader()}
        <div class="data-wrapper">
          ${this.data.map(
      (item) => html`<div class="data">
                <div class="value">${item.value}</div>
                <div class="label">${item.label}</div>
                <div class="unit">${item.unit}</div>
              </div>`
    )}
        </div>
        <div class="button-wrapper">
          ${this.renderSelectionFrame()} ${this.renderPoiObject()}
        </div>
        ${this.hasRelation ? html`<div class="relation-wrapper" part="relation-wrapper">
              <slot name="relation" class="relation" part="relation"></slot>
            </div>` : nothing}
        <div class="alert-ring"></div>
      </button>
    `;
  }
  get selectionFrameType() {
    return this.type === "enhanced" ? ObcPoiSelectionFrameType.Enhanced : ObcPoiSelectionFrameType.Button;
  }
  get selectionFrameState() {
    return this.state === "enabled" ? ObcPoiSelectionFrameState.Regular : ObcPoiSelectionFrameState.Alert;
  }
  renderSelectionFrame() {
    if (!this.selected || this.layout === "inline") {
      return nothing;
    }
    return html`
      <obc-poi-selection-frame
        class="selection-frame"
        .type=${this.selectionFrameType}
        .state=${this.selectionFrameState}
      ></obc-poi-selection-frame>
    `;
  }
};
ObcPoiButton.styles = unsafeCSS(compentStyle);
__decorateClass([
  property({ type: Number })
], ObcPoiButton.prototype, "relativeDirection", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiButton.prototype, "selected", 2);
__decorateClass([
  property({ type: String, reflect: true })
], ObcPoiButton.prototype, "layout", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "has-header" })
], ObcPoiButton.prototype, "hasHeader", 2);
__decorateClass([
  property({ type: String, reflect: true })
], ObcPoiButton.prototype, "state", 2);
__decorateClass([
  property({ type: String, reflect: true })
], ObcPoiButton.prototype, "value", 2);
__decorateClass([
  property({ type: Boolean, reflect: true, attribute: "overlap-opaque" })
], ObcPoiButton.prototype, "overlapOpaque", 2);
__decorateClass([
  property({ type: String })
], ObcPoiButton.prototype, "type", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiButton.prototype, "inExpandedGroup", 2);
__decorateClass([
  property({ type: Array, attribute: false })
], ObcPoiButton.prototype, "data", 2);
__decorateClass([
  property({ type: Boolean })
], ObcPoiButton.prototype, "hasRelation", 2);
__decorateClass([
  property({ type: String, attribute: "header-content" })
], ObcPoiButton.prototype, "headerContent", 2);
ObcPoiButton = __decorateClass([
  customElement("obc-poi-button")
], ObcPoiButton);
export {
  ObcPoiButton,
  ObcPoiButtonLayout,
  ObcPoiButtonState,
  ObcPoiButtonType,
  PoiButtonVisualState,
  resolvePoiButtonTypeFromBoxSize
};
//# sourceMappingURL=poi-button.js.map
