import{LitElement as e,html as i,css as r}from"lit";import{iconRemixCodeLine as a,iconRemixChromeLine as c,iconRemixFirefoxLine as t,iconRemixSafariLine as o,iconRemixComputerLine as s,iconRemixSmartphoneLine as d}from"./assets/cc-remix.icons.js";import{camelCaseToSpacedCapitalized as n}from"./lib/change-case.js";import{e as l}from"./story-names-3a74cae9.js";import"./cc-img-comparator.js";import"./cc-link.js";import"./cc-toggle.js";const m=[{label:"Three way diff",value:"diff"},{label:"Image comparison",value:"comparison"}],f={chrome:c,chromium:c,firefox:t,safari:o,webkit:o},p={desktop:s,mobile:d};class b extends e{static get properties(){return{testResult:{type:Object,attribute:"test-result"},viewerMode:{type:String,attribute:"viewer-mode"}}}constructor(){super(),this.testResult=null,this.viewerMode="diff"}_onSelect({detail:e}){this.viewerMode=e}render(){if(null==this.testResult)return"";const{componentTagName:e,storyName:r,viewportType:c,browserName:t,screenshots:o}=this.testResult,s=l(n(r));return i`
      <header class="header">
        <div class="main-heading">
          <span>
            <cc-icon .icon="${a}"></cc-icon>
            <span>${e}</span>
          </span>
          <span>&nbsp;| ${s}</span>
          <cc-icon .icon="${p[c]}" a11y-name="${c}"></cc-icon>
          <cc-icon .icon="${f[t]}" a11y-name="${t}"></cc-icon>
        </div>
        <cc-toggle .choices="${m}" @cc-select="${this._onSelect}" .value="${this.viewerMode}"></cc-toggle>
      </header>
      <div class="image-viewer">
        ${"diff"===this.viewerMode?this._renderThreeWayDiff(o):""}
        ${"comparison"===this.viewerMode?i`
              <cc-img-comparator
                base-img-src="${o.expectationScreenshotUrl}"
                base-img-text="Expectation"
                changed-img-src="${o.actualScreenshotUrl}"
                changed-img-text="Actual"
              ></cc-img-comparator>
            `:""}
      </div>
    `}_renderThreeWayDiff({expectationScreenshotUrl:e,actualScreenshotUrl:r,diffScreenshotUrl:a}){return i`
      <div class="three-way-diff">
        <div class="three-way-diff__side-by-side">
          <div class="viewbox viewbox--half">
            <div class="heading">
              <cc-link href="${e}">Expectation</cc-link>
            </div>
            <img class="viewbox__img" src="${e}" alt="" />
          </div>
          <div class="viewbox viewbox--half">
            <div class="heading">
              <cc-link href="${r}">Actual</cc-link>
            </div>
            <img class="viewbox__img" src="${r}" alt="" />
          </div>
        </div>
        <div class="viewbox">
          <div class="heading">
            <cc-link href="${a}">Diff</cc-link>
          </div>
          <img class="viewbox__img" src="${a}" alt="" />
        </div>
      </div>
    `}static get styles(){return[r`
        :host {
          display: grid;
          gap: 1em;
          grid-template-rows: max-content 1fr;
        }

        cc-icon {
          flex: 0 0 auto;
        }

        .header {
          display: flex;
          flex-wrap: wrap;
          gap: 2em;
          justify-content: space-between;
        }

        .main-heading {
          align-items: center;
          color: var(--cc-color-text-primary-strongest, #012a51);
          display: flex;
          flex-wrap: wrap;
          font-size: 1.2em;
          font-weight: bold;
        }

        .main-heading cc-icon {
          margin-left: 0.5em;
        }

        .main-heading span {
          align-items: center;
          display: flex;
          gap: 0.5em;
        }

        .heading {
          background-color: var(--cc-color-bg-neutral, #f5f5f5);
          font-weight: bold;
          padding: 1em;
        }

        .three-way-diff {
          display: grid;
          gap: 1em;
        }

        .three-way-diff__side-by-side {
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          gap: 1em;
        }

        .viewbox {
          border: solid 1px var(--cc-color-border-neutral, #bfbfbf);
          border-radius: var(--cc-border-radius-default, 0.25em);
          box-sizing: border-box;
          overflow: hidden;
        }

        .viewbox--half {
          flex: 1 1 45%;
          min-width: min(16em, 100%);
          overflow: hidden;
          width: 45%;
        }

        .viewbox__img {
          display: block;
          max-height: 30rem;
          max-width: 100%;
          object-fit: contain;
          width: 100%;
        }

        .diff {
          border: solid 1px var(--cc-color-border-neutral, #bfbfbf);
          border-radius: var(--cc-border-radius-default, 0.25em);
          display: block;
        }

        cc-img-comparator {
          border: solid 1px var(--cc-color-border-neutral, #bfbfbf);
          border-radius: var(--cc-border-radius-default, 0.25em);
          margin-inline: auto;
          max-width: max-content;
          overflow: hidden;
        }
      `]}}customElements.define("cc-visual-tests-report-entry",b);export{b as CcVisualTestsReportEntry};
//# sourceMappingURL=cc-visual-tests-report-entry.js.map
