// Imports
import * as Election from "/components/management/election.js";
import * as Areas from "/components/management/area.js";
import * as Sections from "/components/management/section.js";
import * as Desks from "/components/management/desk.js";

// DOM elements

export async function mount(where) {
  const genericElectionComponent = new GenericElection();
  await genericElectionComponent.mount(where);
}

class GenericElection {
  constructor() {}

  async mount(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="columns">
        <div class="column">
          <div id="election" class="card-no-hover"></div>
        </div>
        <div class="column">
          <div id="areas" class="card-no-hover" style="display: none ;"></div>
        </div>
        <div class="column">
          <div
            id="sections"
            class="card-no-hover"
            style="display: none ;"
          ></div>
        </div>
        <div class="column">
          <div id="desks" class="card-no-hover" style="display: none ;"></div>
        </div>
      </div>

      <div class="modal" id="election-modal"></div>
      <div class="modal" id="election-clone-modal"></div>
      <div class="modal" id="area-modal"></div>
      <div class="modal" id="section-modal"></div>
      <div class="modal" id="desk-modal"></div>
    `;
    this.electionHandler = await Election.mount("election", this);
    this.areaHandler = await Areas.mount("areas", this);
    this.sectionHandler = await Sections.mount("sections", this);
    this.deskHandler = await Desks.mount("desks", this);
  }
}