import{LitElement as e,html as t,css as i}from"lit";import{iconRemixInformationFill as c}from"./assets/cc-remix.icons.js";import{ResizeController as o}from"./controllers/resize-controller.js";import{getDocUrl as s}from"./lib/dev-hub-url.js";import{unique as n,sortBy as l}from"./lib/utils.js";import{i18n as r}from"./translation.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-button.js";import{PENDING_STATUSES as a,PROCESSING_STATUS as v,PROCESSED_STATUSES as d}from"./cc-invoice-table.js";import"./cc-link.js";import"./cc-notice.js";import"./cc-select.js";import"./cc-toggle.js";const p=[520],b=s("/billing/unified-invoices");function m(e){const t=new Date(e).getUTCFullYear();return String(t)}class g extends e{static get properties(){return{state:{type:Object},_yearFilter:{type:String,state:!0}}}constructor(){super(),this.state={type:"loading"},this._yearFilter=null,new o(this,{widthBreakpoints:p})}_onYearFilterValue({detail:e}){this._yearFilter=e}render(){if("error"===this.state.type)return this._renderView(t`
        <cc-notice slot="content" intent="warning" message="${r("cc-invoice-list.error")}"></cc-notice>
      `);if("loading"===this.state.type)return this._renderView(t`
        <cc-block-section slot="content-body">
          <div slot="title">${r("cc-invoice-list.pending")}</div>
          <cc-invoice-table></cc-invoice-table>
        </cc-block-section>

        <cc-block-section slot="content-body">
          <div slot="title">${r("cc-invoice-list.processed")}</div>
          <cc-invoice-table></cc-invoice-table>
        </cc-block-section>
      `);const e={type:"loaded",invoices:this.state.invoices.filter((e=>a.includes(e.status)))},i={type:"loaded",invoices:this.state.invoices.filter((e=>e.status===v))},c={type:"loaded",invoices:this.state.invoices.filter((e=>d.includes(e.status)))},o=c.invoices.map((e=>m(e.emissionDate))).flatMap(n),s=o.map((e=>({label:e,value:e}))).sort(l("label")),p=null==this._yearFilter?function(e){const t=e.map((e=>Number(e))),i=Math.max(...t);return String(i)}(o):this._yearFilter,b={type:"loaded",invoices:c.invoices.filter((e=>m(e.emissionDate)===p))},g=b.invoices.length>0&&s.length>1;return this._renderView(t`
      <cc-block-section slot="content-body">
        <div slot="title">${r("cc-invoice-list.pending")}</div>
        ${e.invoices.length>0?t` <cc-invoice-table .state=${e}></cc-invoice-table> `:""}
        ${0===e.invoices.length?t` <div class="empty-msg">${r("cc-invoice-list.pending.no-invoices")}</div> `:""}
      </cc-block-section>

      ${i.invoices.length>0?t`
            <cc-block-section slot="content-body">
              <div slot="title">${r("cc-invoice-list.processing")}</div>
              <cc-invoice-table .state=${i}></cc-invoice-table>
            </cc-block-section>
          `:""}

      <cc-block-section slot="content-body">
        <div slot="title">${r("cc-invoice-list.processed")}</div>
        ${g?t`
              <cc-toggle
                legend=${r("cc-invoice-list.year")}
                .choices=${s}
                value=${p}
                inline
                @cc-select=${this._onYearFilterValue}
              ></cc-toggle>
              <cc-select
                label=${r("cc-invoice-list.year")}
                .options=${s}
                value=${p}
                inline
                @cc-select=${this._onYearFilterValue}
              ></cc-select>
            `:""}
        ${b.invoices.length>0?t` <cc-invoice-table .state=${b}></cc-invoice-table> `:""}
        ${0===b.invoices.length?t` <div class="empty-msg ">${r("cc-invoice-list.processed.no-invoices")}</div> `:""}
      </cc-block-section>
    `)}_renderView(e){return t`
      <cc-block>
        <div slot="header-title">${r("cc-invoice-list.title")}</div>
        ${e}
        <div slot="footer-right">
          <cc-link href="${b}" .icon="${c}">
            ${r("cc-invoice-list.documentation.text")}
          </cc-link>
        </div>
      </cc-block>
    `}static get styles(){return[i`
        :host {
          display: block;
        }

        cc-toggle {
          justify-self: start;
        }

        :host([w-lt-520]) cc-toggle {
          display: none;
        }

        :host([w-gte-520]) cc-select {
          display: none;
        }

        cc-select {
          width: max-content;
        }

        .empty-msg {
          color: var(--cc-color-text-weak);
          font-style: italic;
        }
      `]}}window.customElements.define("cc-invoice-list",g);export{g as CcInvoiceList};
//# sourceMappingURL=cc-invoice-list.js.map
