// 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";
import * as VoteModel from "/services/model/vote-model.js";
import * as CandidateListModel from "/services/model/candidateList-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();
    this.VoteModel = VoteModel.getVoteModel();
    this.CandidateListModel = CandidateListModel.getCandidateListModel();
  }

  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.VoteModel.current_user = await Auth.GetUser();
    this.CandidateListModel.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-table" 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();
    await this.loadVotes();
  }

  voteTemplate(candidateList) {
    return /* HTML */ `
      <tr id="votes-vote-${candidateList.ID}">
        <td>
          ${candidateList.Name}
        </td>
        <td>
          <input
            class="input"
            type="number"
            id="${candidateList.ID}-vote-voice"
          />
        </td>
      </tr>
    `;
  }

  handleDom() {
    let voteHandler = this;
    document
      .getElementById(`votes-return`)
      .addEventListener("click", function () {
        voteHandler.parent.deskRoundHandler.mount("vote-section");
      });
    document
      .getElementById(`votes-cancel`)
      .addEventListener("click", function () {
        voteHandler.loadVotes();
      });
    document
      .getElementById(`votes-save`)
      .addEventListener("click", function () {
        voteHandler.saveVotes();
      });
  }

  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);
  }

  async loadVotes() {
    document.getElementById("votes-table").innerHTML = /* HTML */ `<div
      class="table-container"
    >
      <table class="table is-bordered is-narrow is-hoverable is-fullwidth">
        <thead>
          <tr class="is-selected">
            <th>Liste</th>
            <th>Nombre de voix</th>
          </tr>
        </thead>
        <tbody id="votes-list"></tbody>
      </table>
    </div> `;

    let voteHandler = this;
    let votes = await this.VoteModel.getVotes();
    votes = votes.filter((vote) => {
      return vote.DeskRoundID == voteHandler.DeskRoundID;
    });
    let candidateLists = await this.CandidateListModel.getCandidateLists();
    candidateLists = candidateLists.filter((candidateList) => {
      return (
        candidateList.AreaID == voteHandler.AreaID &&
        candidateList.RoundID == voteHandler.RoundID
      );
    });

    const markup = candidateLists
      .map((vote) => this.voteTemplate(vote))
      .join("");
    document.getElementById("votes-list").innerHTML = markup;
    document.getElementById("votes-list").innerHTML += /* HTML */ `
    <tr">
      <td>Votes blanc</td>
      <td>
        <input
          class="input"
          type="number"
          id="blank-vote-voice"
        />
      </td>
    </tr>
  `;
    document.getElementById("votes-list").innerHTML += /* HTML */ `
      <tr>
        <td>Votes nul</td>
        <td>
          <input class="input" type="number" id="null-vote-voice" />
        </td>
      </tr>
    `;

    votes.forEach((vote) => {
      if (vote.Blank) {
        document.getElementById("blank-vote-voice").value = vote.VoiceNumber;
      } else if (vote.NullVote) {
        document.getElementById("null-vote-voice").value = vote.VoiceNumber;
      } else {
        document.getElementById(vote.CandidateListID + "-vote-voice").value =
          vote.VoiceNumber;
      }
    });
  }

  async saveVotes() {
    let voteHandler = this;
    let candidateLists = await this.CandidateListModel.getCandidateLists();
    candidateLists = candidateLists.filter((candidateList) => {
      return (
        candidateList.AreaID == voteHandler.AreaID &&
        candidateList.RoundID == voteHandler.RoundID
      );
    });

    let votes = await this.VoteModel.getVotes();
    votes = votes.filter((vote) => {
      return vote.DeskRoundID == voteHandler.DeskRoundID;
    });

    let method;
    if (votes.length == 0) method = "POST";
    else method = "PUT";

    candidateLists.forEach((candidateList) => {
      voteHandler.VoteModel.saveVote(
        method,
        voteHandler.DeskRoundID,
        candidateList.ID,
        parseInt(
          document.getElementById(candidateList.ID + "-vote-voice").value
        ),
        false,
        false
      );
    });

    this.VoteModel.saveVote(
      method,
      this.DeskRoundID,
      null,
      parseInt(document.getElementById("blank-vote-voice").value),
      true,
      false
    );
    this.VoteModel.saveVote(
      method,
      this.DeskRoundID,
      null,
      parseInt(document.getElementById("null-vote-voice").value),
      false,
      true
    );
  }
}