import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { a as state } from './watchers.js';
import { f as formBusy, a as formLoading } from './getters3.js';
import { s as setDefaultAnimation, a as stopAnimations, g as getAnimation, b as animateTo, c as shimKeyframesHeightAuto } from './animation-registry.js';
import { d as defineCustomElement$5 } from './sc-format-number2.js';
import { d as defineCustomElement$4 } from './sc-line-item2.js';
import { d as defineCustomElement$3 } from './sc-skeleton2.js';
import { d as defineCustomElement$2 } from './sc-total2.js';

const scOrderSummaryCss = ":host{display:block;font-family:var(--sc-font-sans);font-size:var(--sc-checkout-font-size, 16px)}.collapse-link{display:flex;align-items:center;gap:0.35em}.summary__content--empty{display:none}.collapse-link__icon{width:18px;height:18px;color:var(--sc-order-collapse-link-icon-color, var(--sc-color-gray-500))}.item__product+.item__product{margin-top:20px}.empty{color:var(--sc-order-summary-color, var(--sc-color-gray-500))}.price{display:inline-block;opacity:0;visibility:hidden;transform:translateY(5px);transition:var(--sc-input-transition, var(--sc-transition-medium)) visibility ease, var(--sc-input-transition, var(--sc-transition-medium)) opacity ease, var(--sc-input-transition, var(--sc-transition-medium)) transform ease}.price--collapsed{opacity:1;visibility:visible;transform:translateY(0)}.summary{position:relative;user-select:none;cursor:pointer}.summary .collapse-link__icon{transition:transform 0.25s ease-in-out}.summary .scratch-price{text-decoration:line-through;color:var(--sc-color-gray-500);font-size:var(--sc-font-size-small);margin-right:var(--sc-spacing-xx-small)}.summary--open .collapse-link__icon{transform:rotate(180deg)}::slotted(*){margin:4px 0 !important}::slotted(sc-divider){margin:16px 0 !important}sc-line-item~sc-line-item{margin-top:14px}";

const ScOrderSummary$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scShow = createEvent(this, "scShow", 7);
    this.scHide = createEvent(this, "scHide", 7);
    this.closedText = __('Show Summary', 'surecart');
    this.openText = __('Summary', 'surecart');
    this.collapsible = false;
    this.collapsedOnMobile = false;
  }
  componentWillLoad() {
    var _a;
    if (this.collapsedOnMobile) {
      const bodyRect = document.body.getClientRects();
      if (bodyRect.length)
        this.collapsed = ((_a = bodyRect[0]) === null || _a === void 0 ? void 0 : _a.width) < 781;
    }
    this.handleOpenChange();
  }
  handleClick(e) {
    e.preventDefault();
    if (this.empty() && !formBusy())
      return;
    this.collapsed = !this.collapsed;
  }
  /** It's empty if there are no items or the mode does not match. */
  empty() {
    var _a, _b, _c, _d;
    return !((_c = (_b = (_a = state.checkout) === null || _a === void 0 ? void 0 : _a.line_items) === null || _b === void 0 ? void 0 : _b.pagination) === null || _c === void 0 ? void 0 : _c.count) || (((_d = state === null || state === void 0 ? void 0 : state.checkout) === null || _d === void 0 ? void 0 : _d.live_mode) ? (state === null || state === void 0 ? void 0 : state.mode) === 'test' : (state === null || state === void 0 ? void 0 : state.mode) === 'live');
  }
  renderHeader() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
    // busy state
    if ((formBusy() || formLoading()) && !((_c = (_b = (_a = state.checkout) === null || _a === void 0 ? void 0 : _a.line_items) === null || _b === void 0 ? void 0 : _b.data) === null || _c === void 0 ? void 0 : _c.length)) {
      return (h("sc-line-item", null, h("sc-skeleton", { slot: "title", style: { width: '120px', display: 'inline-block' } }), h("sc-skeleton", { slot: "price", style: { 'width': '70px', 'display': 'inline-block', '--border-radius': '6px' } }), h("sc-skeleton", { slot: "currency", style: { width: '30px', display: 'inline-block' } })));
    }
    return (h("sc-line-item", { style: { '--price-size': 'var(--sc-font-size-x-large)' } }, h("span", { class: "collapse-link", slot: "title", onClick: e => this.handleClick(e) }, this.collapsed ? this.closedText || __('Order Summary', 'surecart') : this.openText || __('Order Summary', 'surecart'), h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "collapse-link__icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M19 9l-7 7-7-7" }))), h("span", { slot: "description" }, h("slot", { name: "description" })), ((_d = state.checkout) === null || _d === void 0 ? void 0 : _d.total_amount) !== ((_e = state.checkout) === null || _e === void 0 ? void 0 : _e.amount_due) ? (h("span", { slot: "price", class: { 'price': true, 'price--collapsed': this.collapsed } }, h("sc-format-number", { type: "currency", currency: (_f = state.checkout) === null || _f === void 0 ? void 0 : _f.currency, value: (_g = state.checkout) === null || _g === void 0 ? void 0 : _g.amount_due }))) : (h("span", { slot: "price", class: { 'price': true, 'price--collapsed': this.collapsed } }, !!((_h = state.checkout) === null || _h === void 0 ? void 0 : _h.total_savings_amount) && (h("sc-format-number", { class: "scratch-price", type: "currency", value: -((_j = state.checkout) === null || _j === void 0 ? void 0 : _j.total_savings_amount) + ((_k = state.checkout) === null || _k === void 0 ? void 0 : _k.total_amount), currency: ((_l = state.checkout) === null || _l === void 0 ? void 0 : _l.currency) || 'usd' })), h("sc-total", { total: 'total', order: state.checkout })))));
  }
  async handleOpenChange() {
    if (!this.collapsed) {
      this.scShow.emit();
      await stopAnimations(this.body);
      this.body.hidden = false;
      this.body.style.overflow = 'hidden';
      const { keyframes, options } = getAnimation(this.el, 'summary.show');
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.style.height = 'auto';
      this.body.style.overflow = 'visible';
    }
    else {
      this.scHide.emit();
      await stopAnimations(this.body);
      this.body.style.overflow = 'hidden';
      const { keyframes, options } = getAnimation(this.el, 'summary.hide');
      await animateTo(this.body, shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.hidden = true;
      this.body.style.height = 'auto';
      this.body.style.overflow = 'visible';
    }
  }
  render() {
    return (h("div", { class: { 'summary': true, 'summary--open': !this.collapsed } }, this.collapsible && this.renderHeader(), h("div", { ref: el => (this.body = el), class: {
        'summary__content': true,
        'summary__content--empty': this.empty() && !formBusy(),
      } }, h("slot", null)), this.empty() && !formBusy() && h("p", { class: "empty" }, __('Your cart is empty.', 'surecart'))));
  }
  get el() { return this; }
  static get watchers() { return {
    "collapsed": ["handleOpenChange"]
  }; }
  static get style() { return scOrderSummaryCss; }
}, [1, "sc-order-summary", {
    "order": [16],
    "busy": [4],
    "closedText": [1, "closed-text"],
    "openText": [1, "open-text"],
    "collapsible": [4],
    "collapsedOnMobile": [4, "collapsed-on-mobile"],
    "collapsed": [1028]
  }]);
setDefaultAnimation('summary.show', {
  keyframes: [
    { height: '0', opacity: '0' },
    { height: 'auto', opacity: '1' },
  ],
  options: { duration: 250, easing: 'ease' },
});
setDefaultAnimation('summary.hide', {
  keyframes: [
    { height: 'auto', opacity: '1' },
    { height: '0', opacity: '0' },
  ],
  options: { duration: 250, easing: 'ease' },
});
function defineCustomElement$1() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-order-summary", "sc-format-number", "sc-line-item", "sc-skeleton", "sc-total"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-order-summary":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScOrderSummary$1);
      }
      break;
    case "sc-format-number":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-line-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-skeleton":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-total":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
  } });
}
defineCustomElement$1();

const ScOrderSummary = ScOrderSummary$1;
const defineCustomElement = defineCustomElement$1;

export { ScOrderSummary, defineCustomElement };
