// Button is a high level construct that can be used
// to define button types with a specific behaviors
let { Button } = require("sdk/ui");

// Button with specicic behavior can be defined by passing a function
// defining a behaivor of a button on the specific state changes.
var button = Button(function behavior(state, {owner}) {
  // First argument represents current `state` snapshot for the button
  // in the context of the given `options.owner` window.
  
  // Button behavior may cause other state changes as a recation
  // to specific state chnage. For example whenever button is
  // pressed it's image and checked status changes:
  var checked = state.pressed ? !state.checked : state.checked
  return {
    checked: checked,
    image: checked ? "./coffee.png" : "./beer.png"
  };
});

// Buttons can be added to the UI by writing inital state into them:
button({ image: "./beer.png", label: "My Button", checked: false });
// Button state can be updated in the individual contexts, by passing
// a second context argument. This will also let you instantiate buttons
// only on the spicific windows if you want to.
button({ checked: true }, activeWindow); // you could pass tab instead we'll figure window
// Buttons can be removed from the UI by writing a `null` state:
button(null);


// Making buttons with shared state is also non brainer:
let sharedButton = Button(function sharedBehavior(state) {
  var checked = state.checked;
  var image = state.checked ? "./coffee.png" : "./beer.png "; 

  sharedButton({ checked: checked, image: image })
})

// Add shared button to the UI
sharedButton({ image: "./beer.png", label: "My Shared Button", checked: false })

// State computation is buisness of the behavior, but any arbitare state
// changes could be feed into it to do that:

const tabs = require("sdk/tabs");

var myButton = Button(function(state) {
  // ....
  return { image: state.isImageType && state.checked ? "./on.png" : "./off.png" }
})

tabs.on("activate", function (tab) {
  let isImageType = tab.contentType.indexOf("image/") === 0;
  myButton(isImageType, tab);
});