// We will define a reusuable component called ZoomButtons.
// If you write <ZoomButtons></ZoomButtons> anywhere in the main <zwibbler> element, 
// it will be replaced with the HTML defined where and the controller method will be
// run on it.
Zwibbler.component("ZoomButtons", {
    // This CSS will be injected into the document when the component is used.
    // It is good practice to limit the effects of the style to your component
    // using selectors, since this is not automatically done for you.
    style: `
        .ZoomButtons {
            display: flex;
            flex-flow: row;
            align-items: center;
        }
        
        .ZoomButtons span {
           border-radius: 3px;
           margin: 5px;
           background: pink;
           padding: 3px;
        }
    `,

    template: `
    <div class="ZoomButtons">
      <button z-on:click="ctx.zoomIn()">Zoom in</button>
      <button z-on:click="ctx.zoomOut()">Zoom out</button>
      <span z-text="getDisplayedZoom()"></span>
      <span z-text="mycaption"></span>
    </div>
    `,
  
     // Here is a list of attributes that Zwibbler should take from the element.
     // Everytime something changes in document, zwibbler will set
     // scope.mycaption to the value of this parameter. That is why they have to be
     // double-quoted when you use them. They must be a valid javascript expression that
     // can be evaluated.
     properties: ["mycaption"],

    controller(scope) {
      // scope.$parent refers to the parent scope that this one is defined in. We will
      // reach into it and get the main zwibbler context.
      let ctx = scope.ctx = scope.$parent.ctx;
      
      // We define this method on the scope to get the zoom level to display.
      scope.getDisplayedZoom = () =>{
        return `${Math.round(ctx.getCanvasScale()*100)}%`;
      }
    }
})