// Imports
import * as Auth from "/services/auth/auth.js";
import * as ElectionModel from "/services/model/election-model.js";
import * as RoundModel from "/services/model/round-model.js";
import * as AreaModel from "/services/model/area-model.js";
import * as SectionModel from "/services/model/section-model.js";
import * as DeskModel from "/services/model/desk-model.js";
import * as DeskRoundModel from "/services/model/deskRound-model.js";

export async function mount(parent) {
  const voteComponent = new Vote(parent);
  return voteComponent;
}

class Vote {
  constructor(parent) {
    this.method = null;
    this.parent = parent;
    this.ElectionModel = ElectionModel.getElectionModel();
    this.RoundModel = RoundModel.getRoundModel();
    this.AreaModel = AreaModel.getAreaModel();
    this.SectionModel = SectionModel.getSectionModel();
    this.DeskModel = DeskModel.getDeskModel();
    this.DeskRoundModel = DeskRoundModel.getDeskRoundModel();
  }

  async displayVotes(RoundID, AreaID, DeskRoundID) {
    this.ElectionModel.current_user = await Auth.GetUser();
    this.RoundModel.current_user = await Auth.GetUser();
    this.AreaModel.current_user = await Auth.GetUser();
    this.SectionModel.current_user = await Auth.GetUser();
    this.DeskModel.current_user = await Auth.GetUser();
    this.DeskRoundModel.current_user = await Auth.GetUser();

    this.RoundID = RoundID;
    this.AreaID = AreaID;
    this.DeskRoundID = DeskRoundID;

    document.getElementById("vote-section").innerHTML = /* HTML */ `
      <header class="card-header">
      <p >
        <nav class="breadcrumb card-header-title"  aria-label="breadcrumbs">
          <ul id="vote-breadcrumb"></ul>
        </nav>
        </p>
      </header>
      <div id="votes-tables" class="card-content"></div>
      <nav class="level">
        <div class="level-left"></div>
        <div class="level-right">
          <button id="votes-return" class="button is-danger level-item">
            Retour
          </button>
          <button id="votes-cancel" class="button level-item">
            Annuler
          </button>
          <button id="votes-save" class="button is-success level-item">
            Sauvegarder
          </button>
        </div>
      </nav>
    `;
    this.handleDom();

    await this.refreshBreadCrumb();
  }

  handleDom() {}
  async refreshBreadCrumb() {
    let round = await this.RoundModel.getRound(this.RoundID);
    let election = await this.ElectionModel.getElection(round.ElectionID);
    let area = await this.AreaModel.getArea(this.AreaID);
    let deskRound = await this.DeskRoundModel.getDeskRound(this.DeskRoundID);
    let desk = await this.DeskModel.getDesk(deskRound.DeskID);
    let section = await this.SectionModel.getSection(desk.SectionID);

    let breadcrumb = document.getElementById("vote-breadcrumb");
    let el = document.createElement("li");
    el.innerHTML = "<a>" + election.Name + "</a>";
    breadcrumb.appendChild(el);
    el = document.createElement("li");
    el.innerHTML =
      "<a>tour : " +
      round.Round +
      ", date : " +
      new Date(round.Date).toLocaleDateString() +
      "</a>";
    breadcrumb.appendChild(el);
    el = document.createElement("li");
    el.innerHTML = "<a>" + area.Name + "</a>";
    breadcrumb.appendChild(el);
    el = document.createElement("li");
    el.innerHTML = "<a>" + section.Name + "</a>";
    breadcrumb.appendChild(el);
    el = document.createElement("li");
    el.innerHTML = "<a>" + desk.Name + "</a>";
    breadcrumb.appendChild(el);
  }
}