class UI {

  /**
  * constructor
  * @param game {Game} : un instancier de la classe Game
  * @return {UI}
  */
  constructor(game) {

    this.game = game;

    this.assetManager = this.game.assetManager;

    this.canvas = this.game.canvas;
    this.ctx = this.game.ctx;

    // on stockera ici l'asset de l'UI
    this.spriteSheet = null;

    // l'indice
    this.currentChoice = 0;

    // le nombre de boutons
    this.countButtons = 4;

    // le temps que dure le moment où le coeur du joueur se retrouve tout seul sur le fond noir (sans être briser)
    this.gameOverKeepHeartDuration = 1200;
    this.gameOverKeepHeartTime = Date.now();

    // le temps que dure le moment où le coeur se brise
    this.gameOverKeepBreakHeartDuration = 500;
    this.gameOverKeepBreakHeartTime = Date.now();

    // on stockera ici les différentes étapes de l'affiche du game over
    this.gameOverState = 0x0;


  }

  /**
  * reset: permet de reset l'UI
  */
  reset() {

    this.gameOverState = 0x0;
    this.currentChoice = 0;

  }

  /**
  * gameOverPrepare: permet de préparer le game over
  */
  gameOverPrepare() {
    // on passe à l'état 0x1 (j'aurais pu utiliser une énumération pour ça)
    this.gameOverKeepHeartTime = Date.now();
    this.gameOverKeepBreakHeartTime = Date.now();
    this.gameOverState = 0x1;
  }

  /**
  * init: permet d'initialiser l'UI
  */
  init() {
    // on récupère simplement l'asset
    this.spriteSheet = this.assetManager.getAsset('interface.sprite');
  }

  /**
  * draw: permet de dessiner l'UI
  */
  draw() {

    // pour l'instant, on dessine les boutons
    this.drawChoiceButton();

  }

  /**
  * disable: permet de désactiver le choix du menu
  */
  disable() {
    this.currentChoice = 0;
  }

  /**
  * enable: permet d'activer le choix du menu
  * @param keyCodeToSelect {array} : contient la touche qui permet de naviguer vers la gauche, et la touche qui permet de naviguer vers la droite
  * @param keyCodeToValidate {array} : contient les touches qui permettent de valider le choix
  * @param next {function} : callback qui sera appelé une fois le choix fait
  */
  enable(keyCodeToSelect,keyCodeToValidate,next) {

    // par défaut, on sélectionne le 1er bouton
    this.currentChoice = 1;

    // on stocke le scope "this"
    var _this = this;

    // on prépare la création d'un event local (un event qui ne s'exécute qu'une seule fois)
    var localevent;

    localevent = function(event) {

      // si on arrive ici, c'est que l'utilisateur a appuyé sur une touche

      // on regarde si le joueur a appuyé sur une touche permettant de valider le choix
      for (var i = 0; i < keyCodeToValidate.length; i++) {

        if (keyCodeToValidate[i] == event.keyCode) {

          // si on arrive là, c'est que le joueur a validé son choix

          // on supprime toutes les touches
          for (var j = 0; j < keyCodeToValidate.length; j++) {
            _this.game.keyState[keyCodeToValidate[j]] = false;
            delete _this.game.keyState[keyCodeToValidate[j]];
          }

          // on appelle le callback
          // si ce callback renvoie true, on supprime cette event, sinon on fait rien
          if (next(_this.currentChoice)) {
            document.removeEventListener('keydown', localevent);
          }

          // on arrete la fonction ici
          return;
        }

      }

      // on regarde si l'utilisateur tente de naviguer dans le menu
      for (var i = 0; i < keyCodeToSelect.length; i++) {

        if (keyCodeToSelect[i] == event.keyCode) {

          // si on arrive là, c'est que l'utilisateur appuie sur des bouttons permettant de naviguer dans le menu

          // comme on a que 2 bouttons dans le tableau, on définit arbitrairement que le 1er c'est pour aller à gauche
          // et le 2ème pour aller à droite
          if (i==0) {
            _this.currentChoice--; // on va vers la gauche
          } else {
            _this.currentChoice++; // on va vers la droite
          }

          // si on va trop à gauche, on revient tout à droite, si on va trop à droite, on revient tout à gauche (sinon on fait rien)
          _this.currentChoice = _this.currentChoice < 1 ? _this.countButtons : _this.currentChoice > _this.countButtons ? 1 : _this.currentChoice;

        }

      }
    };

    // on ajoute l'event
    document.addEventListener('keydown', localevent);

  }

  /**
  * drawChoiceButton: permet de dessiner les bouttons
  */
  drawChoiceButton() {

    // on récupère le canvas et le contexte
    var canvas = this.canvas;
    var ctx = this.ctx;

    // j'ai littéralement copier/coller ton code ici :D
    var a = '#FF7E24';
    var b = '#FF7E24';
    var c = '#FF7E24';
    var d = '#FF7E24';
    if (this.currentChoice == 1) a = '#FFFF00';
    if (this.currentChoice == 2) b = '#FFFF00';
    if (this.currentChoice == 3) c = '#FFFF00';
    if (this.currentChoice == 4) d = '#FFFF00';

    ctx.lineWidth = 1;
    ctx.strokeStyle = a;
    ctx.strokeRect(40, 400, 100, 40);
    ctx.strokeStyle = b;
    ctx.strokeRect(180, 400, 100, 40);
    ctx.strokeStyle = c;
    ctx.strokeRect(320, 400, 100, 40);
    ctx.strokeStyle = d;
    ctx.strokeRect(460, 400, 100, 40);

    ctx.font = '23px Verdana';
    ctx.textAlign = 'right';
    ctx.fillStyle = a;
    ctx.fillText('FIGHT', 136, 429);
    ctx.fillStyle = b;
    ctx.fillText('ACT', 262, 429);
    ctx.fillStyle = c;
    ctx.fillText('ITEM', 410, 429);
    ctx.font = '22px Verdana';
    ctx.fillStyle = d;
    ctx.fillText('MERCY', 557, 429);

    // là, on utilise les méthodes des assets (je te laisse faire des aller-retour pour comprendre ce qu'il se passe)
    // ne tkt pas, on fait la classe Player juste après :)
    if (this.currentChoice == 1) { this.game.player.drawHeart(52, 420); } else { this.spriteSheet.drawSprite(ctx, 'fight', 45, 405, 15, 28); }
    if (this.currentChoice == 2) { this.game.player.drawHeart(199, 420); } else { this.spriteSheet.drawSprite(ctx, 'act', 192, 412, 15, 28); }
    if (this.currentChoice == 3) { this.game.player.drawHeart(337, 420); } else { this.spriteSheet.drawSprite(ctx, 'item', 330, 408, 15, 28); }
    if (this.currentChoice == 4) { this.game.player.drawHeart(471, 420); } else { this.spriteSheet.drawSprite(ctx, 'mercy', 463, 410, 15, 28); }

  }

}