// 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 CapturerModel from "/services/model/capturer-model.js";

export async function mount(where, parent) {
  const deskRoundComponent = new DeskRoundSelector(parent);
  await deskRoundComponent.mount(where);
  return deskRoundComponent;
}

class DeskRoundSelector {
  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.CapturerModel = CapturerModel.getCapturerModel();
  }

  async mount(where) {
    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.CapturerModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <header class="card-header">
        <p class="card-header-title">
          Choix du bureau de vote
        </p>
      </header>
      <div class="card-content">
        <div class="columns">
          <div class="column">
            <div id="select-filters">
              <div class="field">
                <label>Élection</label><br />
                <div class="control select">
                  <select name="election-select" id="election-select">
                    <option>Veuillez sélectionner une élection</option>
                  </select>
                </div>
              </div>
              <div class="field">
                <label>Tour</label><br />
                <div class="control select">
                  <select name="round-select" id="round-select">
                    <option>Veuillez sélectionner un tour</option>
                  </select>
                </div>
              </div>
              <div class="field">
                <label>Circonscription</label><br />
                <div class="control select">
                  <select name="area-select" id="area-select">
                    <option>Veuillez sélectionner une circonscription</option>
                  </select>
                </div>
              </div>
              <div class="field">
                <label>Section</label><br />
                <div class="control select">
                  <select name="section-select" id="section-select">
                    <option>Veuillez sélectionner une section</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="column">
            <div id="select-desks"></div>
          </div>
        </div>
      </div>
    `;
    this.handleDom();
    await this.loadElection();
  }

  deskRoundTemplate(deskRound) {
    return /* HTML */ `<div class="card card-list">
      <div id="deskrounds-deskround-${deskRound.ID}" class="card-content clickable">
        <div class="content">
          <nav class="level">
            <div
              id="deskrounds-deskround-desc-${deskRound.ID}"
              class="level-left"
            ></div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  handleDom() {
    let deskRoundHandler = this;
    document.addEventListener(
      "input",
      function (event) {
        if (event.target.id === "election-select") {
          deskRoundHandler.loadRounds(event.target.value);
        }
        if (event.target.id === "round-select") {
          deskRoundHandler.loadAreas(event.target.value);
        }
        if (event.target.id === "area-select") {
          deskRoundHandler.loadSections(event.target.value);
        }
        if (event.target.id === "section-select") {
          deskRoundHandler.loadDesks(event.target.value);
        }
      },
      false
    );
  }

  async loadElection() {
    let selectElection = document.getElementById("election-select");
    let elections = await this.ElectionModel.getElections();

    for (let i = selectElection.options.length - 1; i >= 0; i--) {
      selectElection.remove(i);
    }
    elections.forEach((election) => {
      let el = document.createElement("option");
      el.textContent = election.Name;
      el.value = election.ID;
      selectElection.appendChild(el);
    });

    this.loadRounds(elections[0].ID);
  }

  async loadRounds(ElectionID) {
    this.ElectionID = ElectionID;
    let deskRoundHandler = this;
    let selectRound = document.getElementById("round-select");
    let rounds = await this.RoundModel.getRounds();
    rounds.filter((round) => {
      return round.ElectionID == deskRoundHandler.ElectionID;
    });

    for (let i = selectRound.options.length - 1; i >= 0; i--) {
      selectRound.remove(i);
    }
    rounds.forEach(async (round) => {
      let election = await this.ElectionModel.getElection(round.ElectionID);
      let el = document.createElement("option");
      el.textContent =
        election.Name +
        " (tour : " +
        round.Round +
        ", date : " +
        new Date(round.Date).toLocaleDateString() +
        ")";
      el.value = round.ID;
      selectRound.appendChild(el);
    });

    this.loadAreas(rounds[0].ID);
  }

  async loadAreas(RoundID) {
    this.RoundID = RoundID;
    let deskRoundHandler = this;
    let selectArea = document.getElementById("area-select");
    let areas = await this.AreaModel.getAreas();
    areas = areas.filter((area) => {
      return area.ElectionID == deskRoundHandler.ElectionID;
    });

    for (let i = selectArea.options.length - 1; i >= 0; i--) {
      selectArea.remove(i);
    }
    areas.forEach(async (area) => {
      let el = document.createElement("option");
      el.textContent = area.Name;
      el.value = area.ID;
      selectArea.appendChild(el);
    });

    this.loadSections(areas[0].ID);
  }

  async loadSections(AreaID) {
    this.AreaID = AreaID;
    let deskRoundHandler = this;
    let selectSection = document.getElementById("section-select");
    let sections = await this.SectionModel.getSections();
    sections = sections.filter((section) => {
      return section.AreaID == deskRoundHandler.AreaID;
    });

    for (let i = selectSection.options.length - 1; i >= 0; i--) {
      selectSection.remove(i);
    }
    sections.forEach((section) => {
      let el = document.createElement("option");
      el.textContent = section.Name;
      el.value = section.ID;
      selectSection.appendChild(el);
    });

    this.loadDesks(sections[0].ID);
  }

  async loadDesks(SectionID) {
    this.SectionID = SectionID;
    let deskRoundHandler = this;
    let deskRounds = await this.DeskRoundModel.getDeskRounds();
    deskRounds = deskRounds.filter((deskRound) => {
      return deskRound.RoundID == deskRoundHandler.RoundID;
    });
    if (this.DeskRoundModel.current_user.role === "CAPTURER") {
      let capturer = await this.CapturerModel.getCapturerByUserID(
        this.DeskRoundModel.current_user.id
      );
      let deskRoundsToKeep = [];
      for (let i in deskRounds) {
        for (let j in capturer.DeskRounds) {
          if (capturer.DeskRounds[j].ID == deskRounds[i].ID)
            deskRoundsToKeep.push(deskRounds[i]);
        }
      }
      deskRounds = deskRoundsToKeep;
    }
    let deskRoundsFiltered = [];
    for (let deskRound of deskRounds) {
      let desk = await deskRoundHandler.DeskModel.getDesk(deskRound.DeskID);
      if (desk.SectionID == deskRoundHandler.SectionID)
        deskRoundsFiltered.push(deskRound);
    }
    deskRounds = deskRoundsFiltered;
    const markup = deskRounds
      .map((deskRound) => this.deskRoundTemplate(deskRound))
      .join("");
    document.getElementById("select-desks").innerHTML = markup;

    deskRounds.map(async (deskRound) => {
      let desk = await deskRoundHandler.DeskModel.getDesk(deskRound.DeskID);
      document.getElementById(
        `deskrounds-deskround-desc-${deskRound.ID}`
      ).innerHTML = desk.Name;
      document
        .getElementById(`deskrounds-deskround-${deskRound.ID}`)
        .addEventListener("click", async function () {
          deskRoundHandler.openVotes(deskRound);
        });
    });
  }

  async openVotes(deskRound) {
    this.parent.voteHandler.displayVotes(
      this.RoundID,
      this.AreaID,
      deskRound.ID
    );
  }
}