const template = document.createElement("template");
template.innerHTML = `
<style>
  :host {
    display: block;
  }
  a {color: black;}
  #container {
    text-align: center;
    border-top: 4px solid !important;
    border-bottom: 1px solid !important;
  }
  #container.major {
    background-color: #d65150 !important;
    border-color: #cb1a19 !important;
    color: white;
  }
  #container.major a {
    color: white;
  }
  #container.partial {
    background-color: #eb9147 !important;
    border-color: #dd7722 !important;
    color: white;
  }
  #container.partial a {
    color: white;
  }
  #container.degraded {
    background-color: #f7c962 !important;
    border-color: #e7ac26 !important;
  }
  p {
    font-family: 'Poppins', 'sans-serif';
    font-size: 13px;
    margin: 10px 0;
  }
</style>
<div id="container">
  <p>We are currently experiencing <span id="status-text"></span> affecting <span id="area-text"></span>. For more information, please refer to our <a id="status-link" href="" target="_blank">status page</a>.</p>
</div>
`;

const STATUS = {
  OPERATIONAL: "operational",
  MAJOR_OUTAGE: "major-outage",
  PARTIAL_OUTAGE: "partial-outage",
  DEGRADED_PERFORMANCE: "degraded-performance",
};

const PHRASE = {
  MAJOR_OUTAGE: "a major outage",
  PARTIAL_OUTAGE: "a partial outage",
  DEGRADED_PERFORMANCE: "degraded performance",
  MULTIPLE_AREAS: "multiple areas",
};

const UPTIME_URL = "https://api.fuuse.io/uptime";

class UptimeStatus extends HTMLElement {
  constructor() {
    super();
    this.shadow = this.attachShadow({ mode: "closed" });
  }

  async connectedCallback() {
    try {
      const response = await fetch(UPTIME_URL);
      if (!response.ok) {
        throw new Error(`Response status: ${response.status}`);
      }
      const json = await response.json();
      const { isOk, components, statusPageUri } = json;

      if (!isOk) {
        const statuses = components.map((x) => x.status);

        let statusText, className;

        if (statuses.includes(STATUS.MAJOR_OUTAGE)) {
          statusText = PHRASE.MAJOR_OUTAGE;
          className = "major";
        } else if (statuses.includes(STATUS.PARTIAL_OUTAGE)) {
          statusText = PHRASE.PARTIAL_OUTAGE;
          className = "partial";
        } else if (statuses.includes(STATUS.DEGRADED_PERFORMANCE)) {
          statusText = PHRASE.DEGRADED_PERFORMANCE;
          className = "degraded";
        }

        const nonOperationalComponents = components.filter(
          (x) => x.status !== STATUS.OPERATIONAL
        );

        let areaText = PHRASE.MULTIPLE_AREAS;
        if (nonOperationalComponents.length === 1) {
          areaText = nonOperationalComponents[0].name;
        }

        this.render({ className, statusText, areaText, statusPageUri });
      }
    } catch (error) {
      console.error(error.message);
    }
  }

  render({ className, statusText, areaText, statusPageUri }) {
    this.shadow.innerHTML = "";
    this.shadow.appendChild(template.content.cloneNode(true));
    this.shadow.querySelector("#status-text").innerText = statusText;
    this.shadow.querySelector("#area-text").innerText = areaText;
    this.shadow.querySelector("#status-link").href = statusPageUri;
    this.shadow.querySelector("#container").classList.add(className);
  }
}

customElements.define("uptime-status", UptimeStatus);