import{Chart as t,ArcElement as e,DoughnutController as s,Legend as i,Tooltip as o}from"chart.js";import{LitElement as a,html as c,css as l}from"lit";import{cache as n}from"lit/directives/cache.js";import{classMap as r}from"lit/directives/class-map.js";import{createRef as d,ref as h}from"lit/directives/ref.js";import p from"statuses";import{iconCleverInfo as m}from"./assets/cc-clever.icons.js";import{iconRemixCloseLine as u,iconRemixAlertFill as _}from"./assets/cc-remix.icons.js";import{tileStyles as g}from"./styles/info-tiles.js";import{skeletonStyles as b}from"./styles/skeleton.js";import{i18n as f}from"./translation.js";import"./cc-button.js";import"./cc-link.js";t.register(e,s,i,o);const y={1:"#bbb",2:"#30ab61",3:"#365bd3",4:"#ff9f40",5:"#cf3942"},v={200:1};class k extends a{static get properties(){return{state:{type:Object},_docs:{type:Boolean,state:!0},_empty:{type:Boolean,state:!0},_skeleton:{type:Boolean,state:!0}}}constructor(){super(),this.state={type:"loading"},this._docs=!1,this._empty=!1,this._skeleton=!1,this._refCanvas=d()}_getChartColor(t){const e=t[0];return y[e]}_onToggleDocs(){this._docs=!this._docs}firstUpdated(){"error"!==this.state.type&&(this._chart=new t(this._refCanvas.value,{type:"doughnut",data:null,options:{responsive:!0,maintainAspectRatio:!1,plugins:{datalabels:{display:!1},legend:{onClick:function(t,e){this.chart.data.labels.forEach(((s,i)=>{const o=s===e.text;var a,c;a=t.native.shiftKey,c=o,Number(a)^Number(c)&&this.chart.toggleDataVisibility(i)})),this.chart.update()},onHover:()=>{this._refCanvas.value.style.cursor="pointer"},onLeave:()=>{this._refCanvas.value.style.cursor=null},position:"right",labels:{font:{family:"monospace"},usePointStyle:!0,filter:(t,e)=>t.text!==e.labels[t.index-1]}},tooltip:{backgroundColor:"#000",displayColors:!1,callbacks:{title:([t])=>{const e=this._labels[t.dataIndex];return null!=p.message[e]?`HTTP ${e}: ${p.message[e]}`:`HTTP ${e}`},label:t=>{const e=t.dataset.data,s=e.reduce(((t,e)=>t+e),0),i=e[t.dataIndex];return f("cc-tile-status-codes.tooltip",{value:i,percent:i/s})}}}},animation:{duration:0}}}))}updated(t){if(t.has("state")){if("error"===this.state.type)return;this._skeleton="loading"===this.state.type;const t="loaded"===this.state.type?this.state.statusCodes:v;this._empty=0===Object.keys(t).length,this._labels=Object.keys(t),this._chartLabels=this._skeleton?this._labels.map((()=>"???")):this._labels.map((t=>t[0]+"xx")),this._data=Object.values(t),this._backgroundColor=this._skeleton?this._labels.map((()=>"#bbb")):this._labels.map(this._getChartColor),this.updateComplete.then((()=>{this._chart.options.animation.duration=this._skeleton?0:300,this._chart.options.plugins.tooltip.enabled=!this._skeleton,this._chart.data={labels:this._chartLabels,datasets:[{data:this._data,backgroundColor:this._backgroundColor}]},this._chart.update()}))}super.updated(t)}render(){const t="error"===this.state.type,e=!t&&!this._empty&&!this._docs,s=t&&!this._docs,i=this._empty&&!this._docs,o=this._docs;return c`
      <div class="tile_title tile_title--image">
        ${f("cc-tile-status-codes.title")}
        <cc-button
          class="docs-toggle ${o?"close":"info"}"
          .icon=${o?u:m}
          hide-text
          outlined
          primary
          @cc-click=${this._onToggleDocs}
          >${this._docs?f("cc-tile-status-codes.close-btn"):f("cc-tile-status-codes.about-btn")}
        </cc-button>
      </div>

      ${n(e?c`
              <div class="tile_body">
                <!-- https://www.chartjs.org/docs/latest/general/responsive.html -->
                <div class="chart-container ${r({skeleton:this._skeleton})}">
                  <canvas id="chart" ${h(this._refCanvas)}></canvas>
                </div>
              </div>
            `:"")}
      ${i?c` <div class="tile_message">${f("cc-tile-status-codes.empty")}</div> `:""}
      ${s?c`
            <div class="tile_message">
              <div class="error-message">
                <cc-icon
                  .icon="${_}"
                  a11y-name="${f("cc-tile-status-codes.error.icon-a11y-name")}"
                  class="icon-warning"
                ></cc-icon>
                <p>${f("cc-tile-status-codes.error")}</p>
              </div>
            </div>
          `:""}

      <div class="tile_docs ${r({"tile_docs--hidden":!o})}">
        <p>${f("cc-tile-status-codes.docs.msg")}</p>
        <p>${f("cc-tile-status-codes.docs.link")}</p>
      </div>
    `}static get styles(){return[g,b,l`
        .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;
        }

        .tile_body {
          position: relative;
        }

        .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;
        }

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

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

        .tile_docs.tile_docs--hidden {
          visibility: hidden;
        }

        .tile_docs_link {
          color: var(--cc-color-text-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-status-codes",k);export{k as CcTileStatusCodes};
//# sourceMappingURL=cc-tile-status-codes.js.map
