'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-cd6fab62.js');
const defaultI18n = require('./default-i18n-072e75d7.js');
require('./index-20b57ec7.js');
const consumer = require('./consumer-1372755b.js');
const animationRegistry = require('./animation-registry-4d98b2bf.js');
require('./_commonjsHelpers-537d719a.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-color-gray-500)}.item__product+.item__product{margin-top:20px}.empty{color:var(--sc-color-gray-500)}.summary{position:relative;user-select:none;cursor:pointer}.summary .collapse-link__icon{transition:transform 0.25s ease-in-out}.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 = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.scShow = index.createEvent(this, "scShow", 7);
    this.scHide = index.createEvent(this, "scHide", 7);
    this.closedText = defaultI18n.__('Show Summary', 'surecart');
    this.openText = defaultI18n.__('Summary', 'surecart');
    this.collapsible = false;
  }
  componentDidLoad() {
    this.body.hidden = this.collapsed;
    this.body.style.height = !this.collapsed ? 'auto' : '0';
  }
  handleClick(e) {
    e.preventDefault();
    if (this.empty && !this.loading)
      return;
    this.collapsed = !this.collapsed;
  }
  renderHeader() {
    var _a;
    // loading state
    if (this.loading && !((_a = this.order) === null || _a === void 0 ? void 0 : _a.id)) {
      return (index.h("sc-line-item", null, index.h("sc-skeleton", { slot: "title", style: { width: '120px', display: 'inline-block' } }), index.h("sc-skeleton", { slot: "price", style: { 'width': '70px', 'display': 'inline-block', '--border-radius': '6px' } }), index.h("sc-skeleton", { slot: "currency", style: { width: '30px', display: 'inline-block' } })));
    }
    return (index.h("sc-line-item", { style: { '--price-size': 'var(--sc-font-size-x-large)' } }, index.h("span", { class: "collapse-link", slot: "title", onClick: e => this.handleClick(e) }, this.collapsed ? this.closedText : this.openText, index.h("svg", { xmlns: "http://www.w3.org/2000/svg", class: "collapse-link__icon", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor" }, index.h("path", { "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M19 9l-7 7-7-7" }))), index.h("span", { slot: "description" }, index.h("slot", { name: "description" })), index.h("span", { slot: "price" }, index.h("sc-total", { total: 'total', order: this.order }))));
  }
  async handleOpenChange() {
    if (!this.collapsed) {
      this.scShow.emit();
      await animationRegistry.stopAnimations(this.body);
      this.body.hidden = false;
      const { keyframes, options } = animationRegistry.getAnimation(this.el, 'summary.show');
      await animationRegistry.animateTo(this.body, animationRegistry.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.style.height = 'auto';
    }
    else {
      this.scHide.emit();
      await animationRegistry.stopAnimations(this.body);
      const { keyframes, options } = animationRegistry.getAnimation(this.el, 'summary.hide');
      await animationRegistry.animateTo(this.body, animationRegistry.shimKeyframesHeightAuto(keyframes, this.body.scrollHeight), options);
      this.body.hidden = true;
      this.body.style.height = 'auto';
    }
  }
  render() {
    return (index.h("div", { class: { 'summary': true, 'summary--open': !this.collapsed } }, this.collapsible && this.renderHeader(), index.h("div", { ref: el => (this.body = el), class: {
        'summary__content': true,
        'summary__content--empty': this.empty && !this.loading,
      } }, index.h("slot", null)), this.empty && !this.loading && index.h("p", { class: "empty" }, defaultI18n.__('Your cart is empty.', 'surecart'))));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "collapsed": ["handleOpenChange"]
  }; }
};
animationRegistry.setDefaultAnimation('summary.show', {
  keyframes: [
    { height: '0', opacity: '0' },
    { height: 'auto', opacity: '1' },
  ],
  options: { duration: 250, easing: 'ease' },
});
animationRegistry.setDefaultAnimation('summary.hide', {
  keyframes: [
    { height: 'auto', opacity: '1' },
    { height: '0', opacity: '0' },
  ],
  options: { duration: 250, easing: 'ease' },
});
consumer.openWormhole(ScOrderSummary, ['order', 'loading', 'empty'], false);
ScOrderSummary.style = scOrderSummaryCss;

exports.sc_order_summary = ScOrderSummary;
