import{LitElement as t,html as e,css as s}from"lit";import{classMap as o}from"lit/directives/class-map.js";import{createRef as i,ref as r}from"lit/directives/ref.js";import{iconRemixArrowLeftSLine as n,iconRemixArrowRightSLine as a,iconRemixArrowDownSLine as l}from"./assets/cc-remix.icons.js";import{kebabCase as c,camelCaseToSpacedCapitalized as u}from"./lib/change-case.js";import{isVisibleInContainer as m}from"./lib/utils.js";import{e as p}from"./story-names-3a74cae9.js";import"./cc-icon.js";class d extends t{static get properties(){return{activeTestResultId:{type:String,attribute:"active-test-result-id"},testsResults:{type:Array,attribute:"tests-results"},_activeMenuEntry:{type:Object,state:!0}}}constructor(){super(),this.activeTestResultId=null,this.testsResults=[],this._activeMenuEntry={component:null,story:null},this._menuEntries=[],this._testsResultsIds=[],this._componentListRef=i()}_sortTestResults(t){return[...t].sort(((t,e)=>{const s=t.componentTagName.localeCompare(e.componentTagName);if(0!==s)return s;const o=t.storyName.localeCompare(e.storyName);return 0!==o?o:t.viewportType!==e.viewportType?"desktop"===t.viewportType?-1:1:t.browserName.localeCompare(e.browserName)}))}_getMenuEntries(t){const e=[];let s=null,o=null;for(const i of t)null!=s&&s.componentTagName===i.componentTagName||(s={componentTagName:i.componentTagName,stories:[]},o=null,e.push(s)),null!=o&&o.storyName===i.storyName||(o={storyName:i.storyName,viewports:[]},s.stories.push(o)),o.viewports.push({viewportType:i.viewportType,browserName:i.browserName,id:i.id});return e}_toggleComponent(t){const e=this._activeMenuEntry.component===t;this._activeMenuEntry={component:e?null:t,story:null}}_toggleStory(t){const e=this._activeMenuEntry.story===t;this._activeMenuEntry={...this._activeMenuEntry,story:e?null:t}}willUpdate(t){if(t.has("testsResults")&&this.testsResults.length>0){const t=this._sortTestResults(this.testsResults);this._testsResultsIds=t.map((t=>t.id)),this._menuEntries=this._getMenuEntries(t)}if(t.has("activeTestResultId")||t.has("testsResults")){const t=this.testsResults.find((t=>this.activeTestResultId===t.id));null!=t&&(this._activeMenuEntry={component:t.componentTagName,story:c(t.storyName)}),this._setPreviousAndNextTestResultIds()}}updated(t){if(t.has("activeTestResultId")&&null!=this.activeTestResultId){const t=this.shadowRoot.querySelector(".viewport-browser-list__item__link--active");null==t||m(t,this._componentListRef.value)||t.scrollIntoView({behavior:"smooth",block:"center"})}}_setPreviousAndNextTestResultIds(){const t=this._testsResultsIds.indexOf(this.activeTestResultId),e=this._testsResultsIds.length,s=(t-1+e)%e,o=(t+1)%e;this._previousTestResultId=this._testsResultsIds[s],this._nextTestResultId=this._testsResultsIds[o]}render(){return 0===this.testsResults.length?"":e`
      <ul class="quick-nav">
        <li>
          <a href="/test-result/${this._previousTestResultId}">
            <cc-icon .icon="${n}"></cc-icon>
            <span>Previous</span>
          </a>
        </li>
        <li>
          <a href="/test-result/${this._nextTestResultId}">
            <span>Next</span>
            <cc-icon .icon="${a}"></cc-icon>
          </a>
        </li>
      </ul>
      <ul class="component-list" ${r(this._componentListRef)}>
        ${this._menuEntries.map((({componentTagName:t,stories:s})=>{const o=this._activeMenuEntry.component===t;return e`
            <li class="component-list__item">
              <button
                class="component-list__item__btn btn"
                @click="${()=>this._toggleComponent(t)}"
                aria-expanded="${o}"
                aria-controls="stories-${t}"
              >
                <cc-icon .icon="${l}"></cc-icon>
                <span>${t}</span>
              </button>
              <ul id="stories-${t}" class="story-list" ?hidden="${!o}">
                ${s.map((({storyName:e,viewports:s})=>this._renderStoryLevelEntries({componentTagName:t,storyName:e,viewports:s})))}
              </ul>
            </li>
          `}))}
      </ul>
    `}_renderStoryLevelEntries({componentTagName:t,storyName:s,viewports:i}){const r=c(s),n=this._activeMenuEntry.story===r,m=p(u(s));return e`
      <li class="story-list__item">
        <button
          class="story-list__item__btn btn"
          @click="${()=>this._toggleStory(r)}"
          aria-expanded="${n}"
          aria-controls="${t}-${r}"
        >
          <cc-icon .icon="${l}"></cc-icon>
          <span>${m}</span>
        </button>
        <ul id="${t}-${r}" class="viewport-browser-list" ?hidden="${!n}">
          ${i.map((({viewportType:t,browserName:s,id:i})=>e`
              <li class="viewport-browser-list__item">
                <a
                  class="viewport-browser-list__item__link ${o({"viewport-browser-list__item__link--active":this.activeTestResultId===i})}"
                  href="/test-result/${i}"
                >
                  <span>${t} - ${s}</span>
                  <cc-icon .icon="${a}"></cc-icon>
                </a>
              </li>
            `))}
        </ul>
      </li>
    `}static get styles(){return[s`
        :host {
          display: grid;
          grid-template-rows: auto 1fr;
        }

        cc-icon {
          flex: 0 0 auto;
        }

        ul,
        li {
          list-style: none;
          margin: 0;
          padding: 0;
        }

        .quick-nav {
          display: flex;
          gap: 1em;
          padding: 1em;
        }

        .quick-nav li {
          flex: 1 1 0;
        }

        .quick-nav a {
          align-items: center;
          background-color: var(--cc-color-bg-primary, #3569aa);
          border-radius: var(--cc-border-radius-default, 0.25em);
          color: var(--cc-color-text-inverted, #fff);
          display: flex;
          flex: 1 1 0;
          gap: 0.5em;
          justify-content: space-between;
          padding: 0.5em 1em;
          text-decoration: none;
        }

        .btn {
          align-items: center;
          background: none;
          border: none;
          cursor: pointer;
          display: flex;
          font: inherit;
          gap: 0.5em;
          padding: 0.2em 0.5em;
          text-align: start;
          width: 100%;
        }

        .btn cc-icon {
          transition: transform 0.3s;
        }

        .btn[aria-expanded='true'] cc-icon {
          transform: rotate(180deg);
        }

        .btn:hover cc-icon {
          transform: rotate(90deg);
        }

        .viewport-browser-list__item__link:focus-visible,
        .btn:focus-visible,
        .quick-nav a:focus {
          border-radius: var(--cc-border-radius-default, 0.25em);
          outline: var(--cc-focus-outline, #3569aa solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .component-list {
          display: flex;
          flex-direction: column;
          gap: 0.5em;
          overflow-x: hidden;
          overflow-y: auto;
          scrollbar-gutter: stable;
        }

        .component-list__item {
          transition: background-color 0.3s;
        }

        .component-list__item__btn {
          padding: 1em;
        }

        .story-list:not([hidden]) {
          background-color: var(--cc-color-bg-neutral-alt, #e7e7e7);
          display: flex;
          flex-direction: column;
          padding: 0.5em 1em;
          transition: background-color 0.3s;
        }

        .story-list__item {
          padding: 0.5em;
        }

        .story-list__item:not(:last-of-type) {
          border-bottom: solid 1px var(--cc-color-border-neutral, #bfbfbf);
        }

        .viewport-browser-list {
          padding: 0.5em 0;
        }

        .viewport-browser-list__item__link {
          align-items: center;
          color: var(--cc-color-text-default, #262626);
          display: flex;
          justify-content: space-between;
          margin-left: 1.5em;
          padding: 0.5em;
          text-decoration: none;
          text-transform: capitalize;
        }

        .viewport-browser-list__item__link:hover {
          text-decoration: underline;
        }

        .viewport-browser-list__item__link--active {
          background-color: var(--cc-color-bg-primary, #3569aa);
          border-radius: var(--cc-border-radius-small, 0.15em);
          color: var(--cc-color-text-inverted, #fff);
        }
      `]}}customElements.define("cc-visual-tests-report-menu",d);export{d as CcVisualTestsReportMenu};
//# sourceMappingURL=cc-visual-tests-report-menu.js.map
