/**
 * Extend the base Dialog entity by defining a custom window to perform spell.
 * @extends {Dialog}
 */
import { RdDUtility } from "./rdd-utility.js";

export class RdDTMRDialog extends Dialog {
  
  /* -------------------------------------------- */  
  constructor(sort, html, actor) {
       
    // Common conf
    let dialogConf = {          
      content: html,
      buttons:
          {
            rollButton:
            {
              label: "Lancer",
              callback: html => this.performRoll(html)
            }
          },
          default: "rollButton"
      }
    let dialogOptions = { classes: [ "tmrdialog"] } 

    dialogConf.title = "Terres Médianes de Rêve",
    dialogOptions.width =  740;
    dialogOptions.height = 960;
    super(dialogConf, dialogOptions);
        
    this.col1_y = 30;
    this.col2_y = 55;
    this.cellh  = 55;
    this.cellw  = 55;
    this.sort  = sort; 
    this.actor = actor;    
    this.TMRimg = new Image();    
  } 

  /* -------------------------------------------- */  
  performRoll (html) {
    this.actor.performRoll( this.rollData );
  }
  
  /* -------------------------------------------- */  
  updateTMR( myself ) {
    function rads(x) { return Math.PI*x/180; }
  
    console.log("IMG", this, this.TMRimg);
    
    let canvas = document.getElementById('canvas_tmr');
    let ctx = canvas.getContext('2d');    
    ctx.drawImage(myself.TMRimg, 0, 0, 720, 860);
    
    // Draw current position
    let coordTMR = myself.actor.data.data.reve.tmrpos.coord;
    console.log("TMR coord", coordTMR);
    let coordXY = RdDUtility.convertToCellCoord( coordTMR );    
    let basey = (coordXY.x % 2 == 0) ? this.col1_y : this.col2_y;
    ctx.globalAlpha = 0.3;
    ctx.beginPath();
    ctx.arc(28+(coordXY.x * this.cellw), basey+28+(coordXY.y * this.cellh), 15, 0, rads(360), false);
    ctx.fill();
    ctx.closePath();  
    ctx.stroke();
    ctx.globalAlpha = 1;

    setTimeout(myself.updateTMR, 500, myself);
  }
  
  /* -------------------------------------------- */  
  getCursorPosition(event) {
    let canvasRect = event.currentTarget.getBoundingClientRect();
    let x = event.clientX - canvasRect.left;
    let y = event.clientY - canvasRect.top;
    
    let cellx = Math.floor( x / this.cellw);//  [From 0 -> 12]
    if (cellx % 2 == 0)
      y -= this.col1_y;
    else
      y -= this.col2_y;
    let celly = Math.floor( y / this.cellh);//  [From 0 -> 14]
    
    let coordTMR  = RdDUtility.convertToTMRCoord(cellx, celly);
    let cellDescr = RdDUtility.getTMRDescription( coordTMR );
    this.actor.data.data.reve.tmrpos.coord = coordTMR;
    console.log("TMR column is", coordTMR, cellx, celly, cellDescr);
  }

  /* -------------------------------------------- */  
	async activateListeners(html) {
    super.activateListeners(html);
    
    this.TMRimg.onload = this.updateTMR(this);
    this.TMRimg.src = "systems/foundryvtt-reve-de-dragon/styles/ui/tmp_main_r1.webp";
    
    html.find('#canvas_tmr').click(event => {
      this.getCursorPosition(event);
    } );
  }
}