(()=>{
  const w = 26;
  const h = 13;
  const yOffset = 3;
  const touchMargin = 20;
  const animateUpdateInterval = 300;
  const staticUpdateInterval = 1000 * 60 * 10; // 10 minutes

  WIDGETS.widanibat={
    area: "tr",
    sortOrder: 30,
    width: w,
    height: h,
    batWidth: w,
    batHeight: h,
    scale: 1,
    dir: 0,
    drawIntervalID: undefined,
    showPercent: false,

    draw: function(){
      const midX = ((2 * this.x) + this.width)/2;
      const midY = ((2 * (this.y + yOffset)) + this.height)/2;
      g.setColor(g.theme.fg);
      g.reset();

      var drawBattery = () => {
        var halfS = this.batWidth/2;
        var halfT = this.batHeight/2;

        g.clearRect(this.x, this.y, this.x+this.width, this.y+this.height+yOffset);
        g.fillRect(midX-halfS, midY-halfT, midX+halfS-3, midY+halfT); // outer
        g.clearRect(midX-halfS+2, midY-halfT+2, midX+halfS-3-2, midY+halfT-2); // centre
        g.fillRect(midX+halfS-3, midY-2, midX+halfS, midY+2); // contact
        g.fillRect(midX-halfS+3, midY-halfT+3,((this.batWidth-9)/100*E.getBattery())+midX-halfS+3, midY+halfT-3); // the level
      };

      var drawPercent = () => {
        g.clearRect(this.x, this.y, this.x+this.width, this.y+this.height+yOffset);
        g.drawRect(this.x, this.y, this.x+this.width, this.y+this.height+yOffset);
        var str = E.getBattery() + "%";
        g.setFont("6x15").getFontHeight();
        var strW = g.stringWidth(str);
        g.drawString(str, this.x + ((this.width - strW)/2), this.y + 3);  //y = y + ((h + yOffset - strH)/2))
      };

      var animateBattery = () => {
          this.batWidth = this.width * this.scale;
          this.batHeight = this.height * this.scale;
          drawBattery();
          this.scale = this.dir==0?this.scale-0.1:this.scale+0.1;
          if (this.scale <= 0.7) this.dir=1;
          if (this.scale >= 1) this.dir=0;
      };

      if (this.showPercent) drawPercent();
      else {
        if (Bangle.isCharging()) animateBattery();
        else drawBattery();
      }
    }, //draw

    touchHandler: function(_b, t){
      const maxX = this.x + this.width;
      const maxY = this.y + this.height + yOffset;
      if (t.x < this.x - touchMargin || t.x > maxX + touchMargin || t.y > maxY + touchMargin) return;
      this.showPercent = true;
      this.draw();
      setTimeout(() => {
        this.showPercent = false;
        this.draw();
      }, 2000);
    }, //touchHandler

    reset: function() {
      this.scale = 1;
      this.dir = 0;
      this.showPercent = false;
      this.batHeight = this.height;
      this.batWidth = this.width;
    } //reset
  }

  WIDGETS.widanibat.drawIntervalID = setInterval(() => WIDGETS.widanibat.draw(WIDGETS.widanibat), staticUpdateInterval);

  Bangle.on('charging', (charging) => {
    changeInterval(WIDGETS.widanibat.drawIntervalID, charging ? animateUpdateInterval : staticUpdateInterval);
    if (! charging) WIDGETS.widanibat.reset();
    WIDGETS.widanibat.draw();
  });

  Bangle.on('touch', (_b, xy) => WIDGETS.widanibat.touchHandler(WIDGETS.widanibat, xy));

})();
