var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { FASTElement, customElement, html, attr, repeat, when, } from "@microsoft/fast-element";
import { run } from "axe-core";
import { triggerAxeCore } from "../Utils/setup";
import { generateViolationHTML, getViolationList, encodeHTMLTags, highlightViolation, unHighlightViolation, } from "../Utils/utils";
import styles from "./Index.scss";
const generateNodeHTML = (node) => html `<section
    @mouseenter=${() => {
    highlightViolation(node);
}}
    @mouseleave=${() => {
    unHighlightViolation(node);
}}
  >
    <p>${encodeHTMLTags(node.failureSummary)}</p>
    <code>${encodeHTMLTags(node.html)}</code>
  </section>`;
const template = html `${when((x) => !!x.violationCount, html `<div class="wrapper">
      <div class="heading">
        <p>
          <strong>${(x) => x.violationCount}</strong> accessibility issues found
          in this web page
        </p>
        <div class="buttons">
          <button class="refresh" @click=${() => triggerAxeCore()}>
            Refresh
          </button>
          <button @click=${(x) => x.collapse()}>
            ${(x) => (x.collapsed ? "Expand" : "Collapse")}
          </button>
          <button class="close" @click=${(x) => x.remove()}>Close</button>
        </div>
      </div>
      <hr />
      <abr-accordion>
        ${repeat((x) => x.violations, html `<abr-accordion-item
            ><abr-status-dot
              status="${(x) => x.impact}"
              slot="start"
            ></abr-status-dot
            ><span slot="heading"
              >${(x) => html `${encodeHTMLTags(x.help)}`}
              (<code>${(x) => x.id}</code>)</span
            >
            <blockquote>${(x) => encodeHTMLTags(x.description)}</blockquote>
            ${repeat((x) => x.nodes, html `${(y) => generateNodeHTML(y)}`)}
            <a href="${(x) => x.helpUrl}" target="_blank"
              >Read more...</a
            ></abr-accordion-item
          >`)}
      </abr-accordion>
    </div>
  </div>`)}`;
let IndexComponent = class IndexComponent extends FASTElement {
    constructor() {
        super(...arguments);
        this.violationCount = 0;
        this.collapsed = JSON.parse(sessionStorage.getItem("collapsed"));
        this.violations = [];
        this.allowlist = [];
    }
    connectedCallback() {
        super.connectedCallback();
        run()
            .then((results) => {
            const allErrors = getViolationList(results, this.allowlist);
            if (allErrors === null || allErrors === void 0 ? void 0 : allErrors.length) {
                this.violationCount = allErrors.length;
                allErrors.forEach((violation) => {
                    console.warn("axe-browser-reporter - a11y violation found ", {
                        violation,
                    });
                    this.violations.push(violation);
                    const child = document.createElement("abr-accordion-item");
                    child.innerHTML = generateViolationHTML(violation);
                });
            }
            else {
                console.log("axe-browser-reporter - No accessibility issue found (:");
            }
        })
            .catch((err) => {
            console.error("axe-browser-reporter - Something bad happened:", err);
        });
    }
    collapse() {
        this.collapsed = !this.collapsed;
        sessionStorage.setItem("collapsed", JSON.stringify(this.collapsed));
    }
};
__decorate([
    attr
], IndexComponent.prototype, "violationCount", void 0);
__decorate([
    attr({ mode: "boolean" })
], IndexComponent.prototype, "collapsed", void 0);
__decorate([
    attr
], IndexComponent.prototype, "violations", void 0);
__decorate([
    attr
], IndexComponent.prototype, "allowlist", void 0);
IndexComponent = __decorate([
    customElement({
        name: "abr-index",
        template,
        styles,
    })
], IndexComponent);
export default IndexComponent;
