// createCompass.js

(function() {
  /*global adventurejs A*/ 
  "use strict";

	var p = adventurejs.Display.prototype;

	/**
   * <strong>createCompass()</strong> is a method for creating 
   * compasses, including the default compass in the status bar,
   * and any custom compasses. It takes a generic object 
   * containing an id and an optional list of css classes to be 
   * applied to a compass's HTML element.
   * Compasses will be created at runtime. 
   * Compasses can be styled with any custom CSS. 
   * Compasses will be updated to show available exits
   * any time the location changes.
   * To create a new compass: 
   * 
   * <pre class="display"><code class="language-javascript">MyGame.createCompass({ 
   *   "id":"MyCompass",
   *   "cssclasses":["custom"]
   * });
   * </code></pre>
   * 
   * For more information, see
   * <a href="/doc/GUI_Compasses.html">GUI Compasses</a>.
	 * @method adventurejs.Display#createCompass
	 * @param {Object} properties HTML ID and CSS classes.
	 * @returns {Element} Returns the HTML element of the compass.
	 */
	p.createCompass = function Display_createCompass(properties)
  { //ordinal marine
    let compass;
    let author_element;
    let exits;
    let status;
    if(properties.type === 'marine')
    {
      exits = [
        ['ud','updown'],
        ['fore','marine'],
        ['aft','marine'],
        ['port','marine'],
        ['starboard','marine'],
      ];
    }
    else
    {
      exits = [
        ['northwest','ordinal'],
        ['north','cardinal'],
        ['northeast','ordinal'],
        ['west','cardinal'],
        ['ud','updown'],
        ['east','cardinal'],
        ['southwest','ordinal'],
        ['south','cardinal'],
        ['southeast','ordinal'],
      ];
    }

    if(properties.id){
      author_element = document.querySelector('#'+properties.id);
    }
    compass = author_element ? author_element : document.createElement("div");
    if(properties.id) 
    {
      compass.setAttribute('id',properties.id);
    }
    compass.classList.add("ajs-compass-wrapper","ajs-dock-wrapper");
    if(properties.cssclasses) 
    {
      for(var item in properties.cssclasses)
      {
        compass.classList.add(properties.cssclasses[item]);
      }
    }
    
    if(properties.createnodes)
    {
      let exitsEl = document.createElement("div");
      exitsEl.classList.add("ajs-compasspoints");
      compass.appendChild(exitsEl);

      let exitsHoverCatchEl = document.createElement("div");
      exitsHoverCatchEl.classList.add("ajs-compass-hover-trap");
      exitsHoverCatchEl.game = this.game;
      exitsEl.appendChild(exitsHoverCatchEl);
      exitsHoverCatchEl.addEventListener('mouseenter',()=>{
        //console.log('hovered!');
        // hovercatch was imagined as a way to magnify
        // the status bar compass rose on rollover.
        // Could also be used for custom methods.
      })
      for(let exit in exits)
      {
        let exitEl;
        if(exits[exit][0]==='ud') {
          exitEl = document.createElement("div");

          // exitEl.classList.add("ajs-compasspoint", "ajs-compasspoint-button", exits[exit][0], exits[exit][1]);
          // exitEl.game = this.game;

          let u = document.createElement("div");
          u.classList.add("ajs-compasspoint", "up", "ajs-compasspoint-button");
          u.dataset.exit = "up";
          u.innerHTML = "up";
          u.game = this.game;
          u.setAttribute("aria-disabled","true");
          exitEl.appendChild(u);

          let d = document.createElement("div");
          d.classList.add("ajs-compasspoint", "down", "ajs-compasspoint-button");
          d.dataset.exit = "down";
          d.innerHTML = "down";
          d.game = this.game;
          d.setAttribute("aria-disabled","true");
          exitEl.appendChild(d);
        }
        else {
          exitEl = document.createElement("button");
          exitEl.setAttribute("aria-disabled","true");
          exitEl.innerHTML = exits[exit][0];

        }
        exitEl.classList.add("ajs-compasspoint", "ajs-compasspoint-button", exits[exit][0], exits[exit][1]);
        exitEl.dataset.exit = exits[exit][0];
        exitEl.game = this.game;

        exitsEl.appendChild(exitEl);  
      }

      compass.querySelectorAll('.ajs-compasspoint-button').forEach(function(el){
        el.addEventListener('mouseenter',function(event){
          this.classList.add('active');
        });
        el.addEventListener('mouseleave',function(event){
          this.classList.remove('active');
        });
        el.addEventListener('click',function(event){
          console.warn('clicked',this);
          this.game.sendToParser(el.dataset.exit);
        })
      })

    } // createnodes

    if( !properties.statusbar && !author_element )
    {
      this.displayEl.appendChild(compass);
    }
    this.compasses.push(compass);
		return compass;
	}
  
}());