// Imports
import * as Auth from "/services/auth/auth.js";
import * as RoundsCard from "/components/management/rounds-card.js";
import * as RoundDesks from "/components/management/round-desks.js";
import * as CandidateList from "/components/management/candidate-lists.js";

// DOM elements

export async function mount(where) {
  const roundComponent = new Round();
  await roundComponent.mount(where);
}

class Round {
  constructor() {}

  async mount(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="columns">
        <div class="column is-full">
          <div id="rounds-list" class="card-no-hover">
            Liste des tours
          </div>
        </div>
        <div class="column" style="padding-right:40px;">
          <div id="round-desks" class="card-no-hover card-list">
            Liste des bureaux d'un tour
          </div>
          <div id="candidate-lists" class="card-no-hover card-list" ">
            Liste des listes de candidats d'un tour
          </div>
        </div>
      </div>

      <div class="modal" id="round-modal"></div>
      <div class="modal" id="capturers-modal"></div>
      <div class="modal" id="candidateList-modal"></div>
    `;
    this.roundsHandler = await RoundsCard.mount("rounds-list", this);
    this.deskRoundsHandler = await RoundDesks.mount("round-desks", this);
    this.candidateListHandler = await CandidateList.mount(
      "candidate-lists",
      this
    );
    document.getElementById("candidate-lists-dropdown-content").style.display =
      "none";
    document.getElementById("candidate-lists").style.height = "auto";
    this.handleDOM();
  }

  handleDOM() {
    let dropdownRoundDesks = document.getElementById("dropdown-round-desks");
    let dropdownCandidateList = document.getElementById(
      "dropdown-candidate-lists"
    );

    dropdownRoundDesks.addEventListener("click", () => {
      if (document.getElementById("round-desks").style.height == "auto") {
        this.hideCandidateLists();
      } else {
        this.hideDesks();
      }
    });

    dropdownCandidateList.addEventListener("click", () => {
      if (document.getElementById("round-desks").style.height == "auto") {
        this.hideCandidateLists();
      } else {
        this.hideDesks();
      }
    });
  }

  hideDesks() {
    document.getElementById("desk-rounds-dropdown-content").style.display =
      "none";
    document.getElementById("round-desks").style.height = "auto";
    document.getElementById("candidate-lists-dropdown-content").style.display =
      "flex";
    document.getElementById("candidate-lists").style.height = "70vh";
  }

  hideCandidateLists() {
    document.getElementById("desk-rounds-dropdown-content").style.display =
      "flex";
    document.getElementById("round-desks").style.height = "70vh";
    document.getElementById("candidate-lists-dropdown-content").style.display =
      "none";
    document.getElementById("candidate-lists").style.height = "auto";
  }
}