// Note: this won't currently fast load as no 'remove' handler is set
var Layout = require("Layout");

var font = g.getFonts().includes("6x15") ? "6x15" : "6x8:2";
var largeFont = g.getFonts().includes("12x20") ? "12x20" : "6x8:3";
var currentApp = 0;
var overscroll = 0;
var blankImage = Graphics.createImage(`\n \n`);
var rowHeight = g.getHeight()/3;

// Load apps list
var launchCache = require("launch_utils").cache({});
var apps = launchCache.apps; // get a list of apps to show

// Uncomment for testing in the emulator without apps:
// apps = [
//   {
//     name:"Test",
//     type:"app",
//     icon:blankImage,
//     sortorder:undefined,
//     src:""
//   },
//   {
//     name:"Test 2",
//     type:"app",
//     icon:blankImage,
//     sortorder:undefined,
//     src:""
//   },
// ];

// Initialize layout
var layout = new Layout({
  type:"v", c:[
    // A row for the previous app
    { type:"h", height:rowHeight, c:[
      {type: "img", id:"prev_icon", src:blankImage, width:48, height:48, scale:0.8, pad:8},
      {type: "txt", id:"prev_name", label:"", font:font, fillx:1, wrap:1},
    ]},
    // A row for the current app
    { type:"h", height:rowHeight, c:[
      {type: "img", id:"cur_icon", src:blankImage, width:48, height:48},
      {type: "txt", id:"cur_name", label:"", font:largeFont, fillx:1, wrap:1},
    ]},
    // A row for the next app
    { type:"h", height:rowHeight, c:[
      {type: "img", id:"next_icon", src:blankImage, width:48, height:48, scale:0.8, pad:8},
      {type: "txt", id:"next_name", label:"", font:font, fillx:1, wrap:1},
    ]},
  ]
});

// Load icons on demand
function setIconSrc(icon, app) {
  icon.src=function() {
    let icon = app.icon ? require("Storage").read(app.icon) : blankImage;
    icon.src = icon;
    return icon;
  };
}

// Drawing logic
function render() {
  if (!apps.length) {
    E.showMessage(/*LANG*/"No apps");
    return Bangle.showClock();
  }

  // Previous app
  if (currentApp > 0) {
    setIconSrc(layout.prev_icon, apps[currentApp-1]);
    layout.prev_name.label = apps[currentApp-1].name;
  } else {
    layout.prev_icon.src = blankImage;
    layout.prev_name.label = "";
  }

  // Current app
  setIconSrc(layout.cur_icon, apps[currentApp]);
  layout.cur_name.label = apps[currentApp].name;

  // Next app
  if (currentApp < apps.length-1) {
    setIconSrc(layout.next_icon, apps[currentApp+1]);
    layout.next_name.label = apps[currentApp+1].name;
  } else {
    layout.next_icon.src = blankImage;
    layout.next_name.label = "";
  }

  g.clear();
  layout.render();
}

// Launch the currently selected app
function launch() {
  var app = apps[currentApp];
  if (!app) return;
  E.showMessage(/*LANG*/"Loading...");
  require("launch_utils").loadApp(app);
}

// Select previous/next app
function move(step) {
  if ((currentApp == 0 && step < 0) || (currentApp >= apps.length-1 && step > 0)) {
    // When we hit the end of the list (top or bottom), the step is
    // counted towards the overscroll value. When the overscroll
    // threshold is exceeded, we return to the clock face.
    overscroll += step;
  } else {
    // This is the default case: the step is countedf towards the currentApp index
    currentApp += step;
    overscroll = 0;
    return render();
  }

  // Overscroll threshold reached, return to clock
  if (Math.abs(overscroll) > 3) {
    Bangle.buzz(500, 1);
    return Bangle.showClock();
  }
}

// Wire up user input
Bangle.setUI('updown', dir => {
  if (!dir) launch();
  else {
    if (process.env.HWVERSION==2) dir *= -1; // "natural scrolling" on touch screen
    move(dir);
  }
});

render();
