import*as LitHtml from"../third_party/lit-html/lit-html.js";const{render:render,html:html,svg:svg}=LitHtml;import*as i18n from"../i18n/i18n.js";const UIStrings={total:"Total"},str_=i18n.i18n.registerUIStrings("perf_ui/PieChart.ts",UIStrings),i18nString=i18n.i18n.getLocalizedString.bind(void 0,str_);export class PieChart extends HTMLElement{constructor(){super(...arguments),this.shadow=this.attachShadow({mode:"open"}),this.chartName="",this.size=0,this.formatter=t=>String(t),this.showLegend=!1,this.total=0,this.slices=[],this.totalSelected=!0,this.sliceSelected=-1,this.innerR=.618,this.lastAngle=-Math.PI/2}set data(t){this.chartName=t.chartName,this.size=t.size,this.formatter=t.formatter,this.showLegend=t.showLegend,this.total=t.total,this.slices=t.slices,this.render()}render(){this.lastAngle=-Math.PI/2;const t=html`
      <style>
        .root {
          align-items: center;
          display: flex;
          min-width: fit-content;
          white-space: nowrap;
        }

        .chart-root {
          position: relative;
          overflow: hidden;
        }

        .pie-chart-foreground {
          position: absolute;
          width: 100%;
          height: 100%;
          z-index: 10;
          top: 0;
          display: flex;
          pointer-events: none;
        }

        .pie-chart-total {
          margin: auto;
          padding: 2px 5px;
          pointer-events: auto;
        }

        :focus {
          outline-width: 0;
        }

        .pie-chart-total.selected {
          font-weight: bold;
        }

        .chart-root .slice.selected {
          stroke: var(--selection-bg-color);
          stroke-opacity: 1;
          stroke-width: 0.04;
          stroke-linecap: round;
          stroke-linejoin: round;
        }

        .pie-chart-legend {
          margin-left: 30px;
        }

        .pie-chart-legend-row {
          margin: 5px 2px 5px auto;
          padding-right: 25px;
        }

        .pie-chart-legend-row.selected {
          font-weight: bold;
        }

        .pie-chart-legend-row:focus-visible {
          box-shadow: 0 0 0 2px var(--selection-bg-color) !important;
        }

        .pie-chart-swatch {
          display: inline-block;
          width: 11px;
          height: 11px;
          margin: 0 6px;
          top: 1px;
          position: relative;
          border: 1px solid rgb(100 100 100 / 20%); /* stylelint-disable-line plugin/use_theme_colors */
          /* See: crbug.com/1152736 for color variable migration. */
        }

        .pie-chart-swatch.pie-chart-empty-swatch {
          border: none;
        }

        .pie-chart-name {
          display: inline-block;
        }

        .pie-chart-size {
          display: inline-block;
          text-align: right;
          width: 70px;
        }

        @media (forced-colors: active) {
          .pie-chart-swatch {
            forced-color-adjust: none;
            border-color: ButtonText;
          }

          .pie-chart-total {
            forced-color-adjust: none;
            background-color: canvas;
          }
        }
      </style>
      <div class="root" role="group" @keydown=${this.onKeyDown} aria-label=${this.chartName}>
        <div class="chart-root" style="width: ${this.size}px; height: ${this.size}px;">
          ${svg`
          <svg>
          <g transform="scale(${this.size/2}) translate(1, 1) scale(0.99, 0.99)">
            <circle r="1" stroke="hsl(0, 0%, 80%)" fill="transparent" stroke-width=${1/this.size}></circle>
            <circle r=${this.innerR} stroke="hsl(0, 0%, 80%)" fill="transparent" stroke-width=${1/this.size}></circle>
            ${this.slices.map(((t,e)=>{const i=this.sliceSelected===e,s=i&&!this.showLegend?"0":"-1";return svg`<path class="slice ${i?"selected":""}"
                  @click=${this.onSliceClicked(e)} tabIndex=${s}
                  fill=${t.color} d=${this.getPathStringForSlice(t)}
                  aria-label=${t.title} id=${i?"selectedSlice":""}></path>`}))}
            <!-- This is so that the selected slice is re-drawn on top, to avoid re-ordering slices
            just to render them properly. -->
            <use href="#selectedSlice" />
            </g>
          </svg>
          `}
          <div class="pie-chart-foreground">
            <div class="pie-chart-total ${this.totalSelected?"selected":""}" @click=${this.selectTotal}
                tabIndex=${this.totalSelected&&!this.showLegend?"1":"-1"}>
              ${this.total?this.formatter(this.total):""}
            </div>
          </div>
        </div>
        ${this.showLegend?html`
        <div class="pie-chart-legend">
          ${this.slices.map(((t,e)=>{const i=this.sliceSelected===e;return html`
              <div class="pie-chart-legend-row ${i?"selected":""}"
                  @click=${this.onSliceClicked(e)} tabIndex=${i?"0":"-1"}>
                <div class="pie-chart-size">${this.formatter(t.value)}</div>
                <div class="pie-chart-swatch" style="background-color: ${t.color};"></div>
                <div class="pie-chart-name">${t.title}</div>
              </div>`}))}
          <div class="pie-chart-legend-row ${this.totalSelected?"selected":""}"
              @click=${this.selectTotal} tabIndex=${this.totalSelected?"0":"-1"}>
            <div class="pie-chart-size">${this.formatter(this.total)}</div>
            <div class="pie-chart-swatch pie-chart-empty-swatch"></div>
            <div class="pie-chart-name">${i18nString(UIStrings.total)}</div>
          </div>
        </div>
        `:""}
    `;render(t,this.shadow,{eventContext:this})}onSliceClicked(t){return()=>{this.selectSlice(t)}}selectSlice(t){this.totalSelected=!1,this.sliceSelected=t,this.render()}selectTotal(){this.totalSelected=!0,this.sliceSelected=-1,this.render()}selectAndFocusTotal(){this.selectTotal();const t=this.shadow.querySelector(".pie-chart-legend > :last-child");t&&t.focus()}selectAndFocusSlice(t){this.selectSlice(t);const e=this.shadow.querySelector(`.pie-chart-legend > :nth-child(${t+1})`);e&&e.focus()}focusNextElement(){this.totalSelected?this.selectAndFocusSlice(0):this.sliceSelected===this.slices.length-1?this.selectAndFocusTotal():this.selectAndFocusSlice(this.sliceSelected+1)}focusPreviousElement(){this.totalSelected?this.selectAndFocusSlice(this.slices.length-1):0===this.sliceSelected?this.selectAndFocusTotal():this.selectAndFocusSlice(this.sliceSelected-1)}onKeyDown(t){let e=!1;"ArrowDown"===t.key?(this.focusNextElement(),e=!0):"ArrowUp"===t.key&&(this.focusPreviousElement(),e=!0),e&&(t.stopImmediatePropagation(),t.preventDefault())}getPathStringForSlice(t){let e=t.value/this.total*2*Math.PI;if(!isFinite(e))return;e=Math.min(e,2*Math.PI*.9999);const i=Math.cos(this.lastAngle),s=Math.sin(this.lastAngle);this.lastAngle+=e;const l=Math.cos(this.lastAngle),o=Math.sin(this.lastAngle),c=this.innerR,r=l*c,a=o*c,h=i*c,n=s*c,d=e>Math.PI?1:0;return`M${i},${s} A1,1,0,${d},1,${l},${o} L${r},${a} A${c},${c},0,${d},0,${h},${n} Z`}}customElements.get("devtools-perf-piechart")||customElements.define("devtools-perf-piechart",PieChart);