// Imports
import * as Auth from "/services/auth/auth.js";
import * as Common from "/services/common/common.js";
import * as PartyModel from "/services/model/party-model.js";
import * as CandidateListModel from "/services/model/candidateList-model.js";
import * as ElectionModel from "/services/model/election-model.js";
import * as RoundModel from "/services/model/round-model.js";
import { AnimateCSS } from "/services/common/common.js";

// DOM elements
export async function mount(where) {
  const partyComponent = new Party();
  await partyComponent.mount(where);
}

class Party {
  constructor() {
    this.PartyModel = PartyModel.getPartyModel();
    this.CandidateListModel = CandidateListModel.getCandidateListModel();
    this.ElectionModel = ElectionModel.getElectionModel();
    this.RoundModel = RoundModel.getRoundModel();
  }

  async mount(where) {
    this.PartyModel.current_user = await Auth.GetUser();
    this.CandidateListModel.current_user = await Auth.GetUser();
    this.ElectionModel.current_user = await Auth.GetUser();
    this.RoundModel.current_user = await Auth.GetUser();
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ ` <div
        class="container"
      >
        <div id="parties-card" class="card">
          <header class="card-header">
            <p class="card-header-title">
              Partis
            </p>
            <button id="party-new" class="button is-success">
              <span class="icon is-small">
                <i class="fas fa-plus"></i>
              </span>
            </button>
          </header>
          <div class="card-content">
            <div id="party-list" class="content">Liste des partis</div>
          </div>
        </div>
      </div>
      <div class="modal" id="party-modal"></div>`;
    this.mountModal("party-modal");
    this.handleDom();
    this.displayParties();
  }

  handleDom() {
    let partyHandler = this;
    document.getElementById(`party-new`).addEventListener("click", function () {
      partyHandler.newParty();
    });

    document
      .getElementById(`party-modal-close`)
      .addEventListener("click", function () {
        Common.toggleModal("party-modal", "party-modal-card");
      });
    document
      .getElementById(`party-modal-cancel`)
      .addEventListener("click", function () {
        Common.toggleModal("party-modal", "party-modal-card");
      });
    document
      .getElementById(`party-modal-save`)
      .addEventListener("click", async function () {
        await partyHandler.saveParty();
      });
  }

  mountModal(where) {
    const mountpoint = where;
    document.getElementById(mountpoint).innerHTML = /* HTML */ `
      <div class="modal-background"></div>
      <div class="modal-card" id="party-modal-card">
        <header class="modal-card-head">
          <p class="modal-card-title">Ajout/modification d'un parti</p>
          <button
            class="delete"
            aria-label="close"
            id="party-modal-close"
          ></button>
        </header>
        <section class="modal-card-body">
          <div class="field">
            <label>Id</label>
            <div class="control">
              <input class="input" type="number" id="party-modal-id" disabled />
            </div>
          </div>
          <div class="field">
            <label>Nom</label>
            <div class="control">
              <input class="input" type="text" id="party-modal-name" />
            </div>
          </div>
          <div class="field">
            <label>Couleur</label>
            <div class="control">
              <input class="input" type="color" id="party-modal-color" />
            </div>
          </div>
        </section>
        <footer class="modal-card-foot">
          <button id="party-modal-save" class="button is-success">
            Sauvegarder
          </button>
          <button id="party-modal-cancel" class="button">Annuler</button>
        </footer>
      </div>
    `;
  }

  partyTemplate(party) {
    return /* HTML */ `<div class="card card-list">
      <div id="parties-party-${party.ID}" class="card-content">
        <div class="content">
          <nav class="level">
            <div class="level-left" style="color:${party.Color}">
              ${party.Name} &nbsp&nbsp
              <p style="background-color:${party.Color}">Couleur</p>
            </div>
            <div class="level-right">
              <a
                id="parties-party-edit-${party.ID}"
                class="button is-link is-small"
                title="Modifier"
              >
                <span class="icon is-small">
                  <i class="fas fa-pen"></i>
                </span>
              </a>
              <a
                id="parties-party-delete-${party.ID}"
                class="button is-danger is-small"
                title="Supprimer"
              >
                <span class="icon is-small">
                  <i class="fas fa-times"></i>
                </span>
              </a>
            </div>
          </nav>
        </div>
      </div>
    </div>`;
  }

  async displayParties() {
    let parties = await this.PartyModel.getParties();
    const markup = parties.map((party) => this.partyTemplate(party)).join("");
    document.getElementById("party-list").innerHTML = markup;

    let partyHandler = this;
    parties.map((party) => {
      document
        .getElementById(`parties-party-edit-${party.ID}`)
        .addEventListener("click", function () {
          partyHandler.editParty(party);
        });
      document
        .getElementById(`parties-party-delete-${party.ID}`)
        .addEventListener("click", async function () {
          let deleteModal = document.createElement("div");
          deleteModal.classList.add(
            "modal",
            "animated",
            "fadeIn",
            "faster",
            "is-active"
          );
          deleteModal.innerHTML = /* HTML */ `
            <div class="modal-background"></div>
            <div class="modal-content">
              <div class="box" style="margin: 2rem;">
                <div class="content">
                  <label class="label"
                    >Les listes suivantes seront supprimées :</label
                  >
                  <ul id="candidate-lists-list"></ul>
                </div>
                <div class="field is-grouped">
                  <div class="control">
                    <button id="delete-ok" class="button is-danger">
                      <span class="icon"><i class="fas fa-check"></i></span
                      ><span>Supprimer</span>
                    </button>
                  </div>
                  <div class="control">
                    <button id="delete-cancel" class="button">
                      <span class="icon"
                        ><i class="fas fa-times-circle"></i></span
                      ><span>Annuler</span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          `;
          deleteModal
            .querySelector("#" + "delete-ok")
            .addEventListener("click", async () => {
              await partyHandler.deleteParty(party);
              AnimateCSS(deleteModal, "fadeOut", function () {
                deleteModal.parentNode.removeChild(deleteModal);
              });
            });
          deleteModal
            .querySelector("#" + "delete-cancel")
            .addEventListener("click", () => {
              AnimateCSS(deleteModal, "fadeOut", function () {
                deleteModal.parentNode.removeChild(deleteModal);
              });
            });
          document.body.appendChild(deleteModal);
          partyHandler.party = party;
          let candidateLists = await partyHandler.CandidateListModel.getCandidateLists();
          candidateLists = candidateLists.filter(function (candidateList) {
            return candidateList.PartyID == partyHandler.party.ID;
          });
          candidateLists.forEach(async (candidateList) => {
            let round = await partyHandler.RoundModel.getRound(
              candidateList.RoundID
            );
            let election = await partyHandler.ElectionModel.getElection(
              round.ElectionID
            );
            let el = document.createElement("li");
            el.innerHTML =
              candidateList.Name +
              " (" +
              election.Name +
              ", " +
              new Date(round.Date).toLocaleDateString() +
              ")";
            document.getElementById("candidate-lists-list").appendChild(el);
          });
        });
    });
  }

  newParty() {
    this.method = "POST";
    document.getElementById("party-modal-id").value = null;
    document.getElementById("party-modal-name").value = null;
    document.getElementById("party-modal-color").value = null;
    Common.toggleModal("party-modal", "party-modal-card");
  }

  editParty(party) {
    this.method = "PUT";
    document.getElementById("party-modal-id").value = party.ID;
    document.getElementById("party-modal-name").value = party.Name;
    document.getElementById("party-modal-color").value = party.Color;
    Common.toggleModal("party-modal", "party-modal-card");
  }

  async saveParty() {
    let party;
    if (this.method == "POST")
      document.getElementById("party-modal-id").value = null;

    party = await this.PartyModel.saveParty(
      this.method,
      parseInt(document.getElementById("party-modal-id").value),
      document.getElementById("party-modal-name").value,
      document.getElementById("party-modal-color").value
    );

    await this.displayParties();
    Common.toggleModal("party-modal", "party-modal-card");
    return party;
  }

  async deleteParty(party) {
    await this.PartyModel.deleteParty(party.ID);
    this.displayParties();
  }
}