import{LitElement as t,html as e,css as o}from"lit";import{classMap as r}from"lit/directives/class-map.js";import{iconRemixFileTextLine as i}from"./assets/cc-remix.icons.js";import{ResizeController as c}from"./controllers/resize-controller.js";import{sortBy as n}from"./lib/utils.js";import{skeletonStyles as s}from"./styles/skeleton.js";import{ccLink as a,linkStyles as l}from"./templates/cc-link/cc-link.js";import{i18n as d}from"./translation.js";import"./cc-icon.js";const m=["PENDING","PAYMENTHELD","WONTPAY"],p="PROCESSING",v=["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 b extends t{static get properties(){return{state:{type:Object}}}constructor(){super(),this.state={type:"loading"},this._resizeController=new c(this)}_formatInvoices(t){return t.map((t=>{const e="CREDITNOTE"===t.type?-1:1;return{...t,total:{...t.total,amount:t.total.amount*e}}})).sort(n("emissionDate",!0))}render(){const t=this._resizeController.width>700,e="loading"===this.state.type,o="loaded"===this.state.type?this._formatInvoices(this.state.invoices):this._formatInvoices(u);return t?this._renderTable(e,o):this._renderList(e,o)}_renderTable(t,o){return e`<table><tr><th>${d("cc-invoice-table.date.emission")}</th><th>${d("cc-invoice-table.number")}</th><th class=number>${d("cc-invoice-table.total.label")}</th><th></th></tr>${o.map((o=>e`<tr><td><span class=${r({skeleton:t})}>${d("cc-invoice-table.date.value",{date:o.emissionDate})}</span></td><td><span class=${r({skeleton:t})}>${o.number}</span></td><td class=number><code class=${r({skeleton:t,"credit-note":"CREDITNOTE"===o.type})}>${d("cc-invoice-table.total.value",{amount:o.total.amount})}</code></td><td>${this._renderLinks(t,o)}</td></tr>`))}</table>`}_renderList(t,o){return e`<div class=invoice-list>${o.map((o=>e`<div class=invoice><cc-icon class=invoice-icon size=lg .icon=${i}></cc-icon><div class="${r({skeleton:t})} invoice-text">${d("cc-invoice-table.text",{number:o.number,date:o.emissionDate,amount:o.total.amount})}<br>${this._renderLinks(t,o)}</div></div>`))}</div>`}_renderLinks(t,o){return e`<div class=links>${a(o.downloadUrl,d("cc-invoice-table.open-pdf"),t)} ${m.includes(o.status)?e`${a(o.paymentUrl,d("cc-invoice-table.pay"),t)}`:""}</div>`}static get styles(){return[s,l,o`:host{display:block}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}.invoice-list{display:grid;gap:1.5em}.invoice{display:flex;line-height:1.5em}.invoice-icon,.invoice-text{margin-right:.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:700;white-space:nowrap}.invoice-list .skeleton code,.invoice-list .skeleton strong{background-color:#bbb;color:transparent}table{border-collapse:collapse;border-radius:5px;overflow:hidden}td,th{padding:.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)}.number{text-align:right}td.number{min-width:13ch}tr:hover td{background-color:var(--cc-color-bg-neutral-hovered,#f9f9f9)}table .skeleton{background-color:#bbb}`]}}window.customElements.define("cc-invoice-table",b);export{b as CcInvoiceTable,m as PENDING_STATUSES,v as PROCESSED_STATUSES,p as PROCESSING_STATUS};
//# sourceMappingURL=cc-invoice-table.js.map
