import{LitElement as e,html as t,css as o}from"lit";import{classMap as n}from"lit/directives/class-map.js";import{iconRemixFileTextLine as r}from"./assets/cc-remix.icons.js";import{ResizeController as i}from"./controllers/resize-controller.js";import{sortBy as c}from"./lib/utils.js";import{skeletonStyles as s}from"./styles/skeleton.js";import{i18n as l}from"./translation.js";import"./cc-icon.js";import"./cc-link.js";const a=["PENDING","PAYMENTHELD","WONTPAY"],d="PROCESSING",m=["PAID","CANCELED","REFUNDED"],u=[{emissionDate:"2020-01-01",number:"????????????",type:"INVOICE",status:"PENDING",total:{currency:"EUR",amount:10},downloadUrl:"",paymentUrl:"",invoiceHtml:""},{emissionDate:"2020-02-01",number:"????????????",type:"INVOICE",status:"PENDING",total:{currency:"EUR",amount:200},downloadUrl:"",paymentUrl:"",invoiceHtml:""},{emissionDate:"2020-03-01",number:"????????????",type:"INVOICE",status:"PENDING",total:{currency:"EUR",amount:3e3},downloadUrl:"",paymentUrl:"",invoiceHtml:""}];class p extends e{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"},this._resizeController=new i(this)}_formatInvoices(e){return e.map((e=>{const t="CREDITNOTE"===e.type?-1:1;return{...e,total:{...e.total,amount:e.total.amount*t}}})).sort(c("emissionDate",!0))}render(){const e=this._resizeController.width>700,t="loading"===this.state.type,o="loaded"===this.state.type?this._formatInvoices(this.state.invoices):this._formatInvoices(u);return e?this._renderTable(t,o):this._renderList(t,o)}_renderTable(e,o){return t`
      <table>
        <tr>
          <th>${l("cc-invoice-table.date.emission")}</th>
          <th>${l("cc-invoice-table.number")}</th>
          <th class="number">${l("cc-invoice-table.total.label")}</th>
          <th></th>
        </tr>
        ${o.map((o=>t`
            <tr>
              <td>
                <span class="${n({skeleton:e})}"
                  >${l("cc-invoice-table.date.value",{date:o.emissionDate})}</span
                >
              </td>
              <td>
                <span class="${n({skeleton:e})}">${o.number}</span>
              </td>
              <td class="number">
                <code class="${n({skeleton:e,"credit-note":"CREDITNOTE"===o.type})}">
                  ${l("cc-invoice-table.total.value",{amount:o.total.amount,currency:o.total.currency})}
                </code>
              </td>
              <td>${this._renderLinks(e,o)}</td>
            </tr>
          `))}
      </table>
    `}_renderList(e,o){return t`
      <div class="invoice-list">
        ${o.map((o=>t`
            <div class="invoice">
              <cc-icon class="invoice-icon" size="lg" .icon=${r}></cc-icon>
              <div class="invoice-text ${n({skeleton:e})}">
                ${l("cc-invoice-table.text",{number:o.number,date:o.emissionDate,amount:o.total.amount,currency:o.total.currency})}
                <br />
                ${this._renderLinks(e,o)}
              </div>
            </div>
          `))}
      </div>
    `}_renderLinks(e,o){return t`
      <div class="links">
        <cc-link href="${o.downloadUrl}" ?skeleton="${e}">${l("cc-invoice-table.open-pdf")}</cc-link>
        ${a.includes(o.status)?t`
              <cc-link href="${o.paymentUrl}" ?skeleton="${e}">${l("cc-invoice-table.pay")}</cc-link>
            `:""}
      </div>
    `}static get styles(){return[s,o`
        :host {
          display: block;
        }

        /* region COMMON */
        /* we should use a class (something like "number-value") but it's not possible right now in i18n */

        code {
          font-family: var(--cc-ff-monospace, monospace);
        }

        .credit-note {
          font-style: italic;
        }

        cc-link {
          white-space: nowrap;
        }

        .links {
          align-items: center;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        /* endregion */

        /* region SMALL */

        .invoice-list {
          display: grid;
          gap: 1.5em;
        }

        .invoice {
          display: flex;
          line-height: 1.5em;
        }

        .invoice-icon,
        .invoice-text {
          margin-right: 0.5em;
        }

        .invoice-icon {
          --cc-icon-color: var(--cc-color-text-primary);

          flex: 0 0 auto;
        }

        .invoice-text {
          color: var(--cc-color-text-weak);
        }

        .invoice-text code,
        .invoice-text strong {
          color: var(--cc-color-text-strongest);
          font-weight: bold;
          white-space: nowrap;
        }

        .invoice-list .skeleton code,
        .invoice-list .skeleton strong {
          background-color: #bbb;
          color: transparent;
        }
        /* endregion */

        /* region BIG */

        table {
          border-collapse: collapse;
          border-radius: 5px;
          overflow: hidden;
        }

        th,
        td {
          padding: 0.5em 1em;
          text-align: left;
        }

        th {
          background-color: var(--cc-color-bg-neutral-alt, #eee);
          color: var(--cc-color-text-strongest);
        }

        td {
          background-color: var(--cc-color-bg-neutral);
          color: var(--cc-color-text-normal);
        }

        tr:not(:last-child) td {
          border-bottom: 1px solid var(--cc-color-border-neutral-weak, #eee);
        }

        /* applied on th and td */

        .number {
          text-align: right;
        }

        td.number {
          /* "-ø###,###.##" OR "-### ###,## ø" => 13ch */
          min-width: 13ch;
        }

        tr:hover td {
          background-color: var(--cc-color-bg-neutral-hovered, #f9f9f9);
        }

        table .skeleton {
          background-color: #bbb;
        }

        /* endregion */
      `]}}window.customElements.define("cc-invoice-table",p);export{p as CcInvoiceTable,a as PENDING_STATUSES,m as PROCESSED_STATUSES,d as PROCESSING_STATUS};
//# sourceMappingURL=cc-invoice-table.js.map
