import { Component, Element, Event, h, Prop, Watch } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { state as checkoutState } from '@store/checkout';
import { formBusy, formLoading } from '@store/form/getters';
import { animateTo, shimKeyframesHeightAuto, stopAnimations } from '../../../../functions/animate';
import { getAnimation, setDefaultAnimation } from '../../../../functions/animation-registry';
export class ScOrderSummary {
  constructor() {
    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 = checkoutState.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 = checkoutState === null || checkoutState === void 0 ? void 0 : checkoutState.checkout) === null || _d === void 0 ? void 0 : _d.live_mode) ? (checkoutState === null || checkoutState === void 0 ? void 0 : checkoutState.mode) === 'test' : (checkoutState === null || checkoutState === void 0 ? void 0 : checkoutState.mode) === 'live');
  }
  renderHeader() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
    // busy state
    if ((formBusy() || formLoading()) && !((_c = (_b = (_a = checkoutState.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 = checkoutState.checkout) === null || _d === void 0 ? void 0 : _d.total_amount) !== ((_e = checkoutState.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 = checkoutState.checkout) === null || _f === void 0 ? void 0 : _f.currency, value: (_g = checkoutState.checkout) === null || _g === void 0 ? void 0 : _g.amount_due }))) : (h("span", { slot: "price", class: { 'price': true, 'price--collapsed': this.collapsed } },
        !!((_h = checkoutState.checkout) === null || _h === void 0 ? void 0 : _h.total_savings_amount) && (h("sc-format-number", { class: "scratch-price", type: "currency", value: -((_j = checkoutState.checkout) === null || _j === void 0 ? void 0 : _j.total_savings_amount) + ((_k = checkoutState.checkout) === null || _k === void 0 ? void 0 : _k.total_amount), currency: ((_l = checkoutState.checkout) === null || _l === void 0 ? void 0 : _l.currency) || 'usd' })),
        h("sc-total", { total: 'total', order: checkoutState.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'))));
  }
  static get is() { return "sc-order-summary"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-order-summary.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-order-summary.css"]
  }; }
  static get properties() { return {
    "order": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Checkout",
        "resolved": "Checkout",
        "references": {
          "Checkout": {
            "location": "import",
            "path": "../../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "busy": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "busy",
      "reflect": false
    },
    "closedText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "closed-text",
      "reflect": false,
      "defaultValue": "__('Show Summary', 'surecart')"
    },
    "openText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "open-text",
      "reflect": false,
      "defaultValue": "__('Summary', 'surecart')"
    },
    "collapsible": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "collapsible",
      "reflect": false,
      "defaultValue": "false"
    },
    "collapsedOnMobile": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "collapsed-on-mobile",
      "reflect": false,
      "defaultValue": "false"
    },
    "collapsed": {
      "type": "boolean",
      "mutable": true,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "collapsed",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "scShow",
      "name": "scShow",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Show the toggle"
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }, {
      "method": "scHide",
      "name": "scHide",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Show the toggle"
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "collapsed",
      "methodName": "handleOpenChange"
    }]; }
}
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' },
});
