// createVerbDock.js

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

	var p = adventurejs.Display.prototype;

	/**
   * <strong>createVerbDock()</strong> is a method for creating 
   * custom verb docks. It takes a generic object containing an id, 
   * a list of verbs, and an optional list of css classes to be
   * applied to the element. Any verbs supplied will have buttons 
   * created for them. Verb docks will be created at runtime, and 
   * can be styled with any custom CSS.
   * To create a new verb dock: 
   * 
   * <pre class="display"><code class="language-javascript">MyGame.createVerbDock({ 
   *   "id":"MyVerbDock",
   *   "cssclasses":["custom"],
   *   "verbs": ["save","restore","examine","take","use","drop"],
   * });
   * </code></pre>
   * 
   * For more information, see
   * <a href="/doc/GUI_VerbDocks.html">GUI Verb Dock</a>.
	 * @method adventurejs.Display#createVerbDock
	 * @param {Object} properties HTML ID, CSS classes, and verbs.
	 * @returns {Element} Returns the HTML element of the verb dock.
	 */
	p.createVerbDock = function Display_createVerbDock(properties)
  {
    console.warn('createVerbDock',properties);
    let author_element;
    let dock;

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

    let verbs = document.createElement("div");
    verbs.classList.add("verbdock","verbs");
    dock.appendChild(verbs);

    if(properties.clear)
    {
      let clearbtn = document.createElement('button');
      clearbtn.classList.add("dock_button","btn_verb","btn_clearverbs");
      clearbtn.innerHTML = "&#x2716;";
      clearbtn.game = this.game;
      clearbtn.addEventListener('click',function(){
        this.game.clearInput();
      })
      verbs.appendChild(clearbtn);
    }
    
    properties.verbs.forEach(function(verb){
      if( "string" === typeof verb ) 
      {
        verb = { 
          verb: verb, 
          parse: this.game.dictionary[verb]?.canBeIntransitive()?false:true 
        };
      }
      let btn = document.createElement('button');
      btn.dataset.verb = verb.verb;
      btn.dataset.parse = verb.parse?verb.parse:false;
      btn.classList.add(btn.dataset.verb, "dock_button","btn_verb");
      if(verb.cssclasses)
      {
        for(var item in verb.cssclasses)
        {
          btn.classList.add(verb.cssclasses[item]);
        }
      }

      btn.innerHTML += `<span class="verb name">${verb.verb}</span>`;
      //console.warn(verb.verb,this.game.image_lookup[verb.verb]);
      if(this.game.image_lookup[verb.verb])
      {
        btn.classList.add('hasimage');
        btn.innerHTML += `<span class="verb icon"><img src="${this.game.image_lookup[verb.verb]}"/></span>`;
      }

      btn.game = this.game;
      btn.addEventListener('click',function(){
        console.warn('clicked',this);
        if(this.dataset.parse==="true") 
        {
          this.game.sendToParser(this.dataset.verb);
        }
        else 
        {
          this.game.sendToInput(this.dataset.verb);
        }
      })
      verbs.appendChild(btn);
    },this);

    this.verbdocks.push(dock);
    if( !author_element )
    {
      this.displayEl.appendChild(dock);
    }
		return dock;
	}
  
}());