import {
  __decorateClass,
  __privateAdd,
  __privateGet,
  __privateMethod,
  __privateSet
} from "../../chunks/chunk.QU3DSPNU.js";
var _returnValue, _clickStartedInside, _handleNativeClose, _dispatchCloseEvent, _dispatchShowEvent, _dispatchUiStateEvent, _GdsDialog_instances, handleTriggerSlotChange_fn, _handleTriggerClick, _handleClickOutside;
import { localized, msg } from "@lit/localize";
import { nothing } 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 { when } from "lit/directives/when.js";
import { GdsElement } from "../../gds-element.js";
import { watch } from "../../utils/decorators/watch.js";
import {
  gdsCustomElement,
  html
} from "../../utils/helpers/custom-element-scoping.js";
import { isIOS } from "../../utils/helpers/platform.js";
import {
  withPaddingProps,
  withSizeXProps,
  withSizeYProps
} from "../../utils/mixins/declarative-layout-mixins.js";
import { GdsButton } from "../button/button.component.js";
import { GdsCard } from "../card/card.component.js";
import { GdsDiv } from "../div/div.component.js";
import { GdsFlex } from "../flex/flex.component.js";
import { IconCrossLarge } from "../icon/icons/cross-large.component.js";
import DialogStyles from "./dialog.styles.js";
import {
  lockBodyScrolling,
  registerGlobalScrollLockStyles,
  unlockBodyScrolling
} from "./scroll-lock.js";
registerGlobalScrollLockStyles();
let GdsDialog = class extends withSizeXProps(
  withSizeYProps(withPaddingProps(GdsElement))
) {
  constructor() {
    super(...arguments);
    __privateAdd(this, _GdsDialog_instances);
    this.open = false;
    this.variant = "default";
    this.placement = "initial";
    this.scrollable = false;
    __privateAdd(this, _returnValue);
    __privateAdd(this, _clickStartedInside, false);
    __privateAdd(this, _handleNativeClose, (e) => {
      const dialog = e.target;
      let returnValue = dialog.returnValue;
      if (returnValue !== "prop-change") {
        returnValue = returnValue || "native-close";
        if (!__privateGet(this, _dispatchCloseEvent).call(this, returnValue)) {
          return;
        }
        this.close(returnValue);
        return;
      }
      this.close(returnValue);
    });
    __privateAdd(this, _dispatchCloseEvent, (reason) => {
      if (__privateGet(this, _dispatchUiStateEvent).call(this, reason)) {
        this.dispatchCustomEvent("gds-close", {
          detail: reason
        });
        return true;
      }
      return false;
    });
    __privateAdd(this, _dispatchShowEvent, (reason) => {
      if (__privateGet(this, _dispatchUiStateEvent).call(this, reason)) {
        this.dispatchCustomEvent("gds-show", {
          detail: reason
        });
        return true;
      }
      return false;
    });
    __privateAdd(this, _dispatchUiStateEvent, (reason) => {
      return this.dispatchCustomEvent("gds-ui-state", {
        detail: { reason, open: this.open }
      });
    });
    __privateAdd(this, _handleTriggerClick, (e) => {
      this.show("slotted-trigger");
    });
    __privateAdd(this, _handleClickOutside, (evt) => {
      const e = evt;
      const dialog = this._elDialog;
      const isNotEnterKey = e.clientX > 0 || e.clientY > 0;
      if (isNotEnterKey && e.target === this && dialog && this.open) {
        const rect = dialog.getBoundingClientRect();
        const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
        const closeReason = "click-outside";
        if (!isInDialog && !__privateGet(this, _clickStartedInside) && __privateGet(this, _dispatchCloseEvent).call(this, closeReason)) {
          this.close(closeReason);
        }
      }
      __privateSet(this, _clickStartedInside, false);
    });
  }
  /**
   * Opens the dialog.
   */
  show(reason) {
    this.open = true;
    reason && __privateGet(this, _dispatchShowEvent).call(this, reason);
  }
  /**
   * Closes the dialog.
   * @param returnValue - The value to return when the dialog is closed.
   */
  close(reason) {
    __privateSet(this, _returnValue, reason);
    this.open = false;
  }
  disconnectedCallback() {
    super.disconnectedCallback();
    unlockBodyScrolling(this);
  }
  render() {
    return html`<slot
        name="trigger"
        @slotchange=${__privateMethod(this, _GdsDialog_instances, handleTriggerSlotChange_fn)}
      ></slot>
      ${when(
      this.open,
      () => html`<dialog
            closedby="closerequest"
            @close=${__privateGet(this, _handleNativeClose)}
            class=${classMap({
        [this.variant]: true,
        [`placement-${this.placement}`]: true
      })}
            aria-label=${ifDefined(this.heading)}
          >
            <gds-card
              class="card"
              padding="xl"
              variant="secondary"
              box-shadow="xl"
              border-radius="m"
              max-width="100%"
              border-width="0"
              @mousedown=${() => __privateSet(this, _clickStartedInside, true)}
            >
              <slot name="dialog">
                <gds-flex justify-content="space-between">
                  <h2 id="heading">${this.heading}</h2>
                  <gds-button
                    id="close-btn"
                    rank="tertiary"
                    size="small"
                    label=${msg("Close")}
                    @click=${() => this.close("btn-close")}
                  >
                    <gds-icon-cross-large
                      size="m"
                      stroke="2"
                    ></gds-icon-cross-large>
                  </gds-button>
                </gds-flex>
                <gds-div
                  id="content"
                  flex="1"
                  overflow=${ifDefined(this.scrollable) ? "auto" : nothing}
                >
                  <slot></slot>
                </gds-div>
                <gds-flex
                  class="footer"
                  justify-content="center"
                  gap="s"
                  padding="s 0 0 0"
                  flex-wrap="wrap"
                >
                  <slot name="footer">
                    <gds-button
                      value="cancel"
                      @click=${() => this.close("btn-cancel")}
                      rank="secondary"
                      >${msg("Cancel")}</gds-button
                    >
                    <gds-button value="ok" @click=${() => this.close("btn-ok")}>
                      Ok
                    </gds-button>
                  </slot>
                </gds-flex>
              </slot>
            </gds-card>
          </dialog>`
    )}`;
  }
  _handleOpenChange() {
    if (this.open) {
      __privateSet(this, _returnValue, void 0);
      this.updateComplete.then(() => {
        this._elDialog?.showModal();
        lockBodyScrolling(this);
        this.removeEventListener("click", __privateGet(this, _handleClickOutside));
        requestAnimationFrame(
          () => this.addEventListener("click", __privateGet(this, _handleClickOutside))
        );
        if (isIOS) {
          this._elDialog?.focus();
        }
      });
    } else {
      __privateSet(this, _returnValue, __privateGet(this, _returnValue) || "prop-change");
      this._elDialog?.close(__privateGet(this, _returnValue));
      unlockBodyScrolling(this);
      document.removeEventListener("click", __privateGet(this, _handleClickOutside));
      this.requestUpdate("open");
    }
  }
};
_returnValue = new WeakMap();
_clickStartedInside = new WeakMap();
_handleNativeClose = new WeakMap();
_dispatchCloseEvent = new WeakMap();
_dispatchShowEvent = new WeakMap();
_dispatchUiStateEvent = new WeakMap();
_GdsDialog_instances = new WeakSet();
handleTriggerSlotChange_fn = function() {
  if (this._elTriggerSlot && this._elTriggerSlot.assignedElements()[0]) {
    const trigger = this._elTriggerSlot.assignedElements()[0];
    trigger?.addEventListener("click", __privateGet(this, _handleTriggerClick));
    trigger?.setAttribute("aria-haspopup", "dialog");
  }
};
_handleTriggerClick = new WeakMap();
_handleClickOutside = new WeakMap();
GdsDialog.styles = [DialogStyles];
GdsDialog.styleExpressionBaseSelector = "dialog";
__decorateClass([
  property({ type: Boolean, reflect: true })
], GdsDialog.prototype, "open", 2);
__decorateClass([
  property()
], GdsDialog.prototype, "heading", 2);
__decorateClass([
  property()
], GdsDialog.prototype, "variant", 2);
__decorateClass([
  property()
], GdsDialog.prototype, "placement", 2);
__decorateClass([
  property({ type: Boolean })
], GdsDialog.prototype, "scrollable", 2);
__decorateClass([
  query("dialog")
], GdsDialog.prototype, "_elDialog", 2);
__decorateClass([
  query('slot[name="trigger"]')
], GdsDialog.prototype, "_elTriggerSlot", 2);
__decorateClass([
  watch("open")
], GdsDialog.prototype, "_handleOpenChange", 1);
GdsDialog = __decorateClass([
  gdsCustomElement("gds-dialog", {
    dependsOn: [GdsButton, GdsCard, GdsDiv, GdsFlex, IconCrossLarge]
  }),
  localized()
], GdsDialog);
export {
  GdsDialog
};
