import{LitElement as t,html as e,css as a}from"lit";import{createRef as s,ref as i}from"lit/directives/ref.js";import{iconRemixGitPullRequestLine as c,iconRemixGitBranchLine as o,iconRemixFlowChart as r,iconRemixGitCommitLine as l,iconRemixCalendarScheduleLine as n}from"./assets/cc-remix.icons.js";import{DateFormatter as d}from"./lib/date/date-formatter.js";import{getDevHubUrl as m}from"./lib/dev-hub-url.js";import{accessibilityStyles as p}from"./styles/accessibility.js";import"./cc-block-section.js";import"./cc-block.js";import"./cc-datetime-relative.js";import"./cc-icon.js";import"./cc-img.js";import"./cc-link.js";import"./cc-visual-tests-report-entry.js";import"./cc-visual-tests-report-menu.js";const u=new d("datetime-short","local");class _ extends t{static get properties(){return{activeTestResultId:{type:String,attribute:"active-test-result-id"},report:{type:Object}}}constructor(){super(),this.activeTestResultId=null,this.report=null,this._mainElementRef=s(),this._sortedTestResults=[]}_sortTestResults(t){return[...t].sort(((t,e)=>{const a=t.componentTagName.localeCompare(e.componentTagName);if(0!==a)return a;if("defaultStory"===t.storyName&&"defaultStory"!==e.storyName)return-1;if("defaultStory"!==t.storyName&&"defaultStory"===e.storyName)return 1;const s=t.storyName.localeCompare(e.storyName);if(0!==s)return s;const i=t.browserName.localeCompare(e.browserName);return 0!==i?i:t.viewportType.localeCompare(e.viewportType)}))}_skipToMain(){this._mainElementRef.value?.focus()}willUpdate(t){t.has("report")&&(this._sortedTestResults=this._sortTestResults(this.report.results))}render(){if(null==this.report)return"";const{repositoryOwner:t,repositoryName:a,prNumber:s,workflowId:c,branchName:o,expectationMetadata:r,actualMetadata:l}=this.report,n=this._sortedTestResults.find((t=>t.id===this.activeTestResultId))??this._sortedTestResults[0];return e`
      <a class="skip-link" href="#main-content" @click="${this._skipToMain}">Skip to content</a>
      <div class="left">
        <header>
          <a
            class="storybook-link"
            href="${m("clever-components/?path=/docs/readme--docs")}"
            title="Clever Components - Storybook - new window"
            target="_blank"
            rel="noopener"
          >
            <cc-img
              src="https://assets.clever-cloud.com/login-assets/img/logo.svg"
              a11y-name="Clever Components - Storybook"
            ></cc-img>
          </a>
          <h1>Visual tests report</h1>
        </header>
        <nav aria-label="Visual tests report menu">
          <cc-visual-tests-report-menu
            .testsResults="${this._sortedTestResults}"
            active-test-result-id="${n.id}"
          ></cc-visual-tests-report-menu>
        </nav>
      </div>
      <main id="main-content" tabindex="-1" ${i(this._mainElementRef)}>
        ${this._renderMetadata({repositoryOwner:t,repositoryName:a,prNumber:s,workflowId:c,branchName:o,expectationMetadata:r,actualMetadata:l})}
        <cc-visual-tests-report-entry .testResult="${n}"></cc-visual-tests-report-entry>
      </main>
    `}_renderMetadata({repositoryOwner:t,repositoryName:a,prNumber:s,workflowId:i,branchName:d,expectationMetadata:m,actualMetadata:p}){return e`
      <cc-block toggle="close">
        <h2 slot="header-title">Metadata</h2>
        <cc-block-section slot="content">
          <h3 slot="title">General info</h3>
          <dl class="metadata-list">
            <div class="metadata-list__item">
              <dt class="metadata-list__item__name">
                <cc-icon .icon="${c}"></cc-icon>
                <span>PR Number</span>
              </dt>
              <dd class="metadata-list__item__value">
                <cc-link href="https://github.com/${t}/${a}/pulls/${s}">
                  <span class="visually-hidden">Access PR -</span>
                  ${s}
                </cc-link>
              </dd>
            </div>
            <div class="metadata-list__item">
              <dt class="metadata-list__item__name">
                <cc-icon .icon="${o}"></cc-icon>
                <span>Branch</span>
              </dt>
              <dd class="metadata-list__item__value">
                <cc-link href="https://github.com/${t}/${a}/tree/${d}">
                  <span class="visually-hidden">Access branch -</span>
                  ${d}
                </cc-link>
              </dd>
            </div>
            <div class="metadata-list__item">
              <dt class="metadata-list__item__name">
                <cc-icon .icon="${r}"></cc-icon>
                <span>Workflow</span>
              </dt>
              <dd class="metadata-list__item__value">
                <cc-link href="https://github.com/${t}/${a}/actions/runs/${i}">
                  <span class="visually-hidden">Access workflow -</span>
                  ${i}
                </cc-link>
              </dd>
            </div>
          </dl>
        </cc-block-section>
        <cc-block-section slot="content">
          <h3 slot="title">Expectation</h3>
          <dl class="metadata-list">
            <div class="metadata-list__item">
              <dt class="metadata-list__item__name">
                <cc-icon .icon="${l}"></cc-icon>
                <span>Commit sha</span>
              </dt>
              <dd class="metadata-list__item__value">
                <cc-link
                  href="https://github.com/${t}/${a}/commit/${m.commitReference}"
                >
                  <span class="visually-hidden">Access expectation commit -</span>
                  ${m.commitReference.slice(0,7)}
                </cc-link>
              </dd>
            </div>
            <div class="metadata-list__item">
              <dt class="metadata-list__item__name">
                <cc-icon .icon="${n}"></cc-icon>
                <span>Last update</span>
              </dt>
              <dd class="metadata-list__item__value">
                <span>${u.format(new Date(m.lastUpdated))}</span>
                <cc-datetime-relative datetime="${m.lastUpdated}"></cc-datetime-relative>
              </dd>
            </div>
          </dl>
        </cc-block-section>
        <cc-block-section slot="content">
          <h3 slot="title">Actual</h3>
          <dl class="metadata-list">
            <div class="metadata-list__item">
              <dt class="metadata-list__item__name">
                <cc-icon .icon="${l}"></cc-icon>
                <span>Commit sha</span>
              </dt>
              <dd class="metadata-list__item__value">
                <cc-link
                  href="https://github.com/${t}/${a}/commit/${p.commitReference}"
                >
                  <span class="visually-hidden">Access actual commit -</span>
                  ${p.commitReference.slice(0,7)}
                </cc-link>
              </dd>
            </div>
            <div class="metadata-list__item">
              <dt class="metadata-list__item__name">
                <cc-icon .icon="${n}"></cc-icon>
                <span>Last update</span>
              </dt>
              <dd class="metadata-list__item__value">
                <span>${u.format(new Date(p.lastUpdated))}</span>
                <cc-datetime-relative datetime="${p.lastUpdated}"></cc-datetime-relative>
              </dd>
            </div>
          </dl>
        </cc-block-section>
      </cc-block>
    `}static get styles(){return[p,a`
        :host {
          display: grid;
          grid-template-columns: min(20em, 100%) 1fr;
          grid-template-rows: 1fr;
        }

        dl,
        dt,
        dd,
        h1,
        h2,
        h3,
        h4 {
          margin: 0;
          padding: 0;
        }

        .skip-link {
          background-color: #fff;
          left: -9999px;
          padding: 1em;
          position: absolute;
          top: 1em;
        }

        .skip-link:focus {
          left: 1em;
          z-index: 1;
        }

        .left {
          background-color: var(--cc-color-bg-neutral, #f5f5f5);
          border-right: solid 1px var(--cc-color-border-neutral-weak, #e7e7e7);
          display: grid;
          grid-template-rows: auto auto 1fr;
          height: 100svh;
          position: sticky;
          top: 0;
        }

        header {
          align-items: center;
          display: grid;
          gap: 1em;
          grid-template-columns: 2em 1fr;
          padding: 1.5em 1em;
        }

        h1 {
          font-size: 1.3em;
        }

        .storybook-link {
          align-items: center;
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: flex;
          text-decoration: none;
        }

        .storybook-link:focus-visible {
          outline: var(--cc-focus-outline, #3569aa solid 2px);
          outline-offset: var(--cc-focus-outline-offset, 2px);
        }

        .storybook-link cc-img {
          --cc-img-fit: contain;

          height: 2em;
          width: 2em;
        }

        nav {
          height: 100%;
          min-height: 0;
        }

        cc-visual-tests-report-menu {
          height: 100%;
          min-height: 0;
        }

        main {
          box-sizing: border-box;
          display: grid;
          gap: 2em;
          grid-template-rows: max-content 1fr;
          overflow-x: hidden;
          overflow-y: auto;
          padding: 1em;
          scrollbar-gutter: stable;
        }

        h3 {
          font-size: 1em;
        }

        cc-block-section {
          margin-top: 0;
          padding-top: 1em;
        }

        .metadata-list {
          --bdw: 2px;
          --color: var(--cc-color-bg-primary, #3569aa);
          --padding: 0.5em;

          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .metadata-list__item {
          background-color: var(--color);
          border: var(--bdw) solid var(--color);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: flex;
          flex-wrap: wrap;
          font-size: 0.8em;
        }

        .metadata-list__item__name,
        .metadata-list__item__value {
          box-sizing: border-box;
          flex: 1 1 auto;
          font-weight: bold;
          padding: calc(var(--padding) / 2) var(--padding);
          text-align: center;
        }

        .metadata-list__item__name {
          align-items: center;
          color: var(--cc-color-text-inverted, #fff);
          display: flex;
          gap: 0.5em;
        }

        .metadata-list__item__value {
          align-items: center;
          background-color: var(--cc-color-bg-default, #fff);
          border-radius: var(--cc-border-radius-small, 0.15em);
          color: var(--cc-color-text-primary, #3569aa);
          display: flex;
          flex-wrap: wrap;
          gap: 0.5em;
        }

        cc-datetime-relative {
          border-inline-start: solid 2px var(--cc-color-bg-primary, #3569aa);
          font-style: italic;
          padding-left: 0.5em;
        }
      `]}}customElements.define("cc-visual-tests-report",_);export{_ as CcVisualTestsReport};
//# sourceMappingURL=cc-visual-tests-report.js.map
