import { Component, h, Prop, Event, Element } from '@stencil/core';
import { __, _n, sprintf } from '@wordpress/i18n';
export class ScProductLineItem {
  constructor() {
    /** Can we select the quantity */
    this.editable = true;
  }
  renderPriceAndInterval() {
    if (this.trialDurationDays) {
      return (h("div", { class: "item__price" },
        h("div", { class: "price" }, sprintf(_n('%d day free', '%d days free', this.trialDurationDays), this.trialDurationDays)),
        h("div", { class: "price__description" },
          __('Then', 'surecart'),
          " ",
          h("sc-format-number", { type: "currency", currency: this.currency, value: this.amount }),
          " ",
          !!this.interval && this.interval)));
    }
    return (h("div", { class: "item__price" },
      h("div", { class: "price" },
        h("sc-format-number", { type: "currency", currency: this.currency, value: this.amount })),
      !!this.interval && h("div", { class: "price__description" }, this.interval)));
  }
  render() {
    return (h("div", { class: { 'item': true, 'item--has-image': !!this.imageUrl } },
      !!this.imageUrl && h("img", { src: this.imageUrl, class: "item__image" }),
      h("div", { class: "item__text" },
        h("div", { class: "item__title" },
          h("slot", { name: "title" }, this.name)),
        this.editable && h("sc-quantity-select", { clickEl: this.el, quantity: this.quantity, onScChange: e => e.detail && this.scUpdateQuantity.emit(e.detail) }),
        !this.editable && this.quantity > 1 && (h("span", { class: "item__description" },
          __('Qty:', 'surecart'),
          " ",
          this.quantity))),
      h("div", { class: "item__suffix" },
        this.removable ? h("sc-icon", { class: "item__remove", name: "x", onClick: () => this.scRemove.emit() }) : h("div", null),
        this.renderPriceAndInterval())));
  }
  static get is() { return "sc-product-line-item"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-product-line-item.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-product-line-item.css"]
  }; }
  static get properties() { return {
    "imageUrl": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Url for the product image"
      },
      "attribute": "image-url",
      "reflect": false
    },
    "name": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Product name"
      },
      "attribute": "name",
      "reflect": false
    },
    "quantity": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Quantity"
      },
      "attribute": "quantity",
      "reflect": false
    },
    "amount": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Product monetary amount"
      },
      "attribute": "amount",
      "reflect": false
    },
    "currency": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Currency for the product"
      },
      "attribute": "currency",
      "reflect": false
    },
    "interval": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Recurring interval (i.e. monthly, once, etc.)"
      },
      "attribute": "interval",
      "reflect": false
    },
    "trialDurationDays": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Trial duration days"
      },
      "attribute": "trial-duration-days",
      "reflect": false
    },
    "removable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is the line item removable"
      },
      "attribute": "removable",
      "reflect": false
    },
    "editable": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Can we select the quantity"
      },
      "attribute": "editable",
      "reflect": false,
      "defaultValue": "true"
    }
  }; }
  static get events() { return [{
      "method": "scUpdateQuantity",
      "name": "scUpdateQuantity",
      "bubbles": false,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the quantity changes."
      },
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      }
    }, {
      "method": "scRemove",
      "name": "scRemove",
      "bubbles": false,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Emitted when the quantity changes."
      },
      "complexType": {
        "original": "void",
        "resolved": "void",
        "references": {}
      }
    }]; }
  static get elementRef() { return "el"; }
}
