import{Chart as t,BarController as e,BarElement as s,Tooltip as i,CategoryScale as o,LinearScale as a,Title as r}from"chart.js";import c from"chartjs-plugin-datalabels";import{LitElement as n,html as l,css as d}from"lit";import{classMap as h}from"lit/directives/class-map.js";import{createRef as p,ref as u}from"lit/directives/ref.js";import{iconCleverInfo as m}from"./assets/cc-clever.icons.js";import{iconRemixCloseLine as g,iconRemixAlertFill as _}from"./assets/cc-remix.icons.js";import{ResizeController as y}from"./controllers/resize-controller.js";import{tileStyles as b}from"./styles/info-tiles.js";import{skeletonStyles as f}from"./styles/skeleton.js";import{i18n as v}from"./translation.js";import"./cc-button.js";t.register(e,s,i,o,a,r);const w=Array.from(new Array(24)).map((()=>[0,0,1]));class x extends n{static get properties(){return{state:{type:Object},_barCount:{type:Number,state:!0},_docs:{type:Boolean,state:!0},_empty:{type:Boolean,state:!0}}}constructor(){super(),this.state={type:"loading"},this._barCount=6,this._ctxRef=p(),this._docs=!1,this._empty=!1,this._resizeController=new y(this)}_onToggleDocs(){this._docs=!this._docs}async _refreshChart(){const t="loading"===this.state.type,e="loaded"===this.state.type?this.state.data:w;if(this._empty=0===e.length,this._empty)return;const s=24/this._barCount;this._groupedData=Array.from(new Array(this._barCount)).map(((t,i)=>{const o=i*s,a=(i+1)*s;return[e[o][0],e[a-1][1],e.slice(o,a).map((t=>t[2])).reduce(((t,e)=>t+e),0)]})),this._groupedValues=this._groupedData.map((([t,e,s])=>s)),this._xLabels=t?this._groupedData.map((()=>"??")):this._groupedData.map((([t])=>v("cc-tile-requests.date-hours",{date:t})));const i=t?"#bbb":"#30ab61";await this.updateComplete;const o=Math.ceil(1.2*Math.max(...this._groupedValues));this._chart.options.scales.y.suggestedMax=o,this._chart.options.plugins.tooltip.enabled=!t;const a=this._groupedValues.reduce(((t,e)=>t+e),0);this._chart.options.plugins.title.text=t?"...":v("cc-tile-requests.requests-nb.total",{totalRequests:a}),this._chart.data={labels:this._xLabels,datasets:[{backgroundColor:i,data:this._groupedValues}]},this._chart.options.animation.duration=t?0:300,this._chart.update(),this._chart.resize()}firstUpdated(){this._chart=new t(this._ctxRef.value,{plugins:[c],type:"bar",options:{responsive:!1,maintainAspectRatio:!1,plugins:{title:{display:!0,position:"bottom",padding:0,font:{style:"italic",weight:"normal"}},legend:{display:!1},tooltip:{backgroundColor:"#000",displayColors:!1,callbacks:{title:([t])=>{const[e,s]=this._groupedData[t.dataIndex];return v("cc-tile-requests.date-tooltip",{from:e,to:s})},label:t=>{const e=24/this._barCount;return v("cc-tile-requests.requests-nb",{value:this._groupedValues[t.dataIndex],windowHours:e})}}},datalabels:{anchor:"end",offset:0,align:"end",formatter:t=>"loading"===this.state.type?"?":v("cc-tile-requests.requests-count",{requestCount:t})}},scales:{x:{grid:{drawOnChartArea:!1,drawTicks:!1},ticks:{padding:10,font:{size:12}}},y:{display:!1,beginAtZero:!0}},animation:{duration:0}}})}willUpdate(){const{width:t}=this._resizeController;t<380&&(this._barCount=6),t>=380&&t<540&&(this._barCount=8),t>=540&&(this._barCount=12),this._refreshChart()}updated(t){!t.has("state")||"loaded"!==this.state.type&&"loading"!==this.state.type||this._refreshChart(),super.updated(t)}render(){const t=!("loaded"!==this.state.type&&"loading"!==this.state.type||this._empty||this._docs),e="error"===this.state.type&&!this._docs,s="loaded"===this.state.type&&this._empty&&!this._docs,i=this._docs;return l`
      <div class="tile_title tile_title--image">
        ${v("cc-tile-requests.title")}
        <cc-button
          class="docs-toggle ${i?"close":"info"}"
          .icon=${i?g:m}
          hide-text
          outlined
          primary
          @cc-click=${this._onToggleDocs}
          >${this._docs?v("cc-tile-requests.close-btn"):v("cc-tile-requests.about-btn")}
        </cc-button>
      </div>

      <div class="tile_body ${h({"tile--hidden":!t})}">
        <div class="chart-container ${h({skeleton:"loading"===this.state.type})}">
          <canvas ${u(this._ctxRef)}></canvas>
        </div>
      </div>

      <div class="tile_message ${h({"tile--hidden":!s})}">${v("cc-tile-requests.empty")}</div>

      <div class="tile_message ${h({"tile--hidden":!e})}">
        <div class="error-message">
          <cc-icon
            .icon="${_}"
            a11y-name="${v("cc-tile-requests.error.icon-a11y-name")}"
            class="icon-warning"
          ></cc-icon>
          <p>${v("cc-tile-requests.error")}</p>
        </div>
      </div>

      <div class="tile_docs ${h({"tile--hidden":!i})}">
        <p>${v("cc-tile-requests.docs.msg",{windowHours:24/this._barCount})}</p>
      </div>
    `}static get styles(){return[b,f,d`
        .tile_title {
          align-items: center;
          display: flex;
          justify-content: space-between;
        }

        .docs-toggle {
          font-size: 0.8em;
          margin: 0 0 0 1em;
        }

        .docs-toggle.close {
          --cc-icon-size: 1.5em;
        }

        .docs-toggle.info {
          --cc-icon-size: 1.25em;
        }

        .chart-container {
          /* We need this because: https://github.com/chartjs/Chart.js/issues/4156 */
          height: 100%;
          min-width: 0;
          position: absolute;
          width: 100%;
        }

        /*
    body, message and docs are placed in the same area (on top of each other)
    this way, we can just hide the docs
    and let the tile take at least the height of the docs text content
   */

        .tile_body,
        .tile_message,
        .tile_docs {
          grid-area: 2 / 1 / 2 / 1;
        }

        /* See above why we hide instead of display:none */

        .tile--hidden {
          visibility: hidden;
        }

        .tile_body {
          min-height: 140px;
          position: relative;
        }

        .tile_docs {
          align-self: center;
          font-size: 0.9em;
          font-style: italic;
        }

        .tile_docs_link {
          color: var(--cc-color-text-primary-highlight);
          text-decoration: underline;
        }

        .error-message {
          display: grid;
          gap: 0.75em;
          grid-template-columns: min-content 1fr;
          text-align: left;
        }

        .error-message p {
          margin: 0;
        }

        .icon-warning {
          align-self: center;
          color: var(--cc-color-text-warning);

          --cc-icon-size: 1.25em;
        }
      `]}}window.customElements.define("cc-tile-requests",x);export{x as CcTileRequests};
//# sourceMappingURL=cc-tile-requests.js.map
