import Component from "grimoirejs/ref/Node/Component";
import IAttributeDeclaration from "grimoirejs/ref/Node/IAttributeDeclaration";
import RenderSlideComponent from "./RenderSlideComponent";

export default class SlideControllerComponent extends Component{
  public static attributes:{[key:string]:IAttributeDeclaration} = {
    clickRegion:{
      default:".gr-container",
      converter:"String"
    },
    clickEnabled:{
      default:false,
      converter:"Boolean"
    }
  };

  public $mount():void{
    const query = this.getAttribute("clickRegion");
    const elem = document.querySelector(query);
    const slideRenderer = this.node.getComponent(RenderSlideComponent);
    elem.addEventListener("mousedown",()=>{
      if(this.getAttribute("clickEnabled")){
        slideRenderer.next();
      }
    });
    document.addEventListener("keydown",(e)=>{
      if(e.keyCode === 39){ // 右
        slideRenderer.next();
      }
      if(e.keyCode === 37){
        slideRenderer.prev();
      }
    });
  }
}