// Load fonts
let background = require("clockbg");
let lockIcon=atob("DhABH+D/wwMMDDAwwMf/v//4f+H/h/8//P/z///f/g==");
var settings = Object.assign(
  {
    accentColor: "#f00",
    mainColor:"#000"
  },
  require("Storage").readJSON("ultrainfo.json", true) || {}
);

require("Font7x11Numeric7Seg").add(Graphics);

let drawTimeout;

let draw = function () {
  var date = new Date();
  let locked=Bangle.isLocked()
  background.fillRect(36, 62, g.getWidth() - 36, 110);
  var timeStr = require("locale").time(date, 1); // Hour and minute
  g.setFontAlign(0, -1)
    .setColor(settings.mainColor)
    .setFont("Vector", 30)
    .drawString(timeStr, g.getWidth() / 2+3, 62 + 3);

  // Show date and day of week
  var dateStr =
    require("locale").dow(date, 1) +
    ", " +
    require("locale").month(date, 1) +
    " " +
    date.getDate();
  g.setFont("14")
    .setFontAlign(locked?-1:0, 1)
    .drawString(dateStr,locked? g.getWidth() / 2- 24 : g.getWidth() / 2, 110 - 2);

  if(locked){
      g.drawImage(lockIcon,49,91,{scale:0.85})

  }
  // queue next draw
  if (drawTimeout) clearTimeout(drawTimeout);
  drawTimeout = setTimeout(
    function () {
      drawTimeout = undefined;
      draw();
    },
    60000 - (Date.now() % 60000)
  );
};

// Clear the screen once, at startup
g.clear();

background.fillRect(Bangle.appRect);

draw();


// CLOCKINFOS:

let clockInfoItems = require("clock_info").load();

function drawProgBar(x, y, w, val, col) {
  g.setColor(col).fillRect({
    x: x,
    y: y - 2,
    w: w * Math.min(1, val),
    h: 3,
    r: 100
  });
}

let drawRectClockInfo = function (itm, info, options, top) {
  background.fillRect(
    options.x,
    options.y,
    options.x + options.w,
    options.y + options.h
  );

  drawProgBar(
    options.x + 3,
    top ? options.y + options.h - 3 : options.y + 3,
    options.w - 6,
    1,
    settings.mainColor
  );
  
  if (info.max&&info.v) {
    let min=info.min?info.min:0;
    let val=(info.v-min) / (info.max-min);
    val=Math.max(0,val);
    val=Math.min(1,val);
    drawProgBar(
      options.x + 3,
      top ? options.y + options.h - 3 : options.y + 3,
      options.w - 6,
      val,
      settings.accentColor
    );
  }
  let font = g.findFont(info.text, {
    w: options.w - 5,
    h: 30,
    max: 15,
    wrap: true,
    trim: true
  });
  g.setFont(font.font)
    .setColor(options.focus ? settings.accentColor : settings.mainColor)
    .drawImage(
      info.img,
      options.x + options.w / 2 - 12,
      options.y + options.h / 2 + (top ? -3 : 2)
    )
    .setFontAlign(0, 0)
    .drawString(
      font.text,
      options.x + options.w / 2,
      options.y + options.h / 2 + (top ? -15 : 2 - 10)
    );
};

const edge = 0;
const gap = 2;
const itemW = (g.getWidth() - 2 * edge - 2 * gap) / 3;

let tlClkInfo=require("clock_info").addInteractive(clockInfoItems, {
  x: edge,
  y: 3,
  w: itemW,
  h: 60,
  draw: function (itm, info, options) {
    drawRectClockInfo(itm, info, options, true);
  }
});

let tmClkInfo=require("clock_info").addInteractive(clockInfoItems, {
  x: edge + itemW + gap,
  y: 3,
  w: itemW,
  h: 60,
  draw: function (itm, info, options) {
    drawRectClockInfo(itm, info, options, true);
  }
});

let trClkInfo=require("clock_info").addInteractive(clockInfoItems, {
  x: edge + itemW + gap + itemW + gap,
  y: 3,
  w: itemW,
  h: 60,
  draw: function (itm, info, options) {
    drawRectClockInfo(itm, info, options, true);
  }
});

let blClkInfo=require("clock_info").addInteractive(clockInfoItems, {
  x: edge,
  y: g.getHeight() - 60 - 3,
  w: itemW,
  h: 60,
  draw: function (itm, info, options) {
    drawRectClockInfo(itm, info, options, false);
  }
});

let bmClkInfo=require("clock_info").addInteractive(clockInfoItems, {
  x: edge + itemW + gap,
  y: g.getHeight() - 60 - 3,
  w: itemW,
  h: 60,
  draw: function (itm, info, options) {
    drawRectClockInfo(itm, info, options, false);
  }
});

let brClkInfo=require("clock_info").addInteractive(clockInfoItems, {
  x: edge + itemW + gap + itemW + gap,
  y: g.getHeight() - 60 - 3,
  w: itemW,
  h: 60,
  draw: function (itm, info, options) {
    drawRectClockInfo(itm, info, options, false);
  }
});
Bangle.on("lock",draw);
Bangle.setUI({
  mode : "clock",
  remove : function() {
    if (drawTimeout) {
      clearTimeout(drawTimeout);
      drawTimeout = undefined;
    }
    Bangle.removeListener("lock",draw);
    if (background && background.unload) background.unload();
    if (tlClkInfo && tlClkInfo.remove) tlClkInfo.remove();
    if (tmClkInfo && tmClkInfo.remove) tmClkInfo.remove();
    if (trClkInfo && trClkInfo.remove) trClkInfo.remove();
    if (blClkInfo && blClkInfo.remove) blClkInfo.remove();
    if (bmClkInfo && bmClkInfo.remove) bmClkInfo.remove();
    if (brClkInfo && brClkInfo.remove) brClkInfo.remove();
  }
});
