// Imports
import * as Results from "/components/help/results-help.js";
import * as Vote from "/components/help/vote-help.js";
import * as Management from "/components/help/management-help.js";
import * as User from "/components/help/user-help.js";

// DOM elements

export async function mount(where) {
  const helperPage = new Helper();
  await helperPage.mount(where);
}

class Helper {
  constructor() {}

  async mount(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="tabs is-boxed is-toggle is-fullwidth">
        <ul>
          <li id="results-helper" class="is-active">
            <a>
              <span class="icon is-small"
                ><i class="fas fa-poll" aria-hidden="true"></i
              ></span>
              <span>Résultats</span>
            </a>
          </li>
          <li id="votes-helper">
            <a>
              <span class="icon is-small"
                ><i class="fas fa-vote-yea" aria-hidden="true"></i
              ></span>
              <span>Votes</span>
            </a>
          </li>
          <li id="management-helper">
            <a>
              <span class="icon is-small"
                ><i class="fas fas fa-edit" aria-hidden="true"></i
              ></span>
              <span>Gestion</span>
            </a>
          </li>
          <li id="user-helper">
            <a>
              <span class="icon is-small"
                ><i class="fas fas fa-users" aria-hidden="true"></i
              ></span>
              <span>Utilisateurs</span>
            </a>
          </li>
        </ul>
      </div>
      <section id="help-section" class="container" style="margin-bottom: 230px;"></section>
    `;

    this.handleDOM();
    await Results.mount("help-section");

  }
  handleDOM() {
    document
      .getElementById("results-helper")
      .addEventListener("click", async function () {
        await Results.mount("help-section");
        document.getElementById("votes-helper").setAttribute("class", "");
        document.getElementById("management-helper").setAttribute("class", "");
        document.getElementById("user-helper").setAttribute("class", "");
        document
          .getElementById("results-helper")
          .setAttribute("class", "is-active");
      });

    document
      .getElementById("votes-helper")
      .addEventListener("click", async function () {
          await Vote.mount("help-section");
        document.getElementById("results-helper").setAttribute("class", "");
        document.getElementById("management-helper").setAttribute("class", "");
        document.getElementById("user-helper").setAttribute("class", "");
        document
          .getElementById("votes-helper")
          .setAttribute("class", "is-active");
      });

    document
      .getElementById("management-helper")
      .addEventListener("click", async function () {
          await Management.mount("help-section");
        document.getElementById("results-helper").setAttribute("class", "");
        document.getElementById("votes-helper").setAttribute("class", "");
        document.getElementById("user-helper").setAttribute("class", "");
        document
          .getElementById("management-helper")
          .setAttribute("class", "is-active");
      });

    document
      .getElementById("user-helper")
      .addEventListener("click", async function () {
          await User.mount("help-section");
        document.getElementById("results-helper").setAttribute("class", "");
        document.getElementById("votes-helper").setAttribute("class", "");
        document.getElementById("management-helper").setAttribute("class", "");
        document
          .getElementById("user-helper")
          .setAttribute("class", "is-active");
      });
  }
}